Aktualisieren g: jedes Tag über AJAX-Aufruf in Grails

Question

Ich habe ein statistisches Panel, das die zuletzt registrierten Benutzer anzeigt. Ich möchte einen AJAX-Aufruf implementieren, um das Panel hochzuladen, ohne die gesamte Seite neu laden zu müssen.

Ich habe den folgenden Code in meiner Ansicht:

<g:each in="${lastUsers}" var="user"> 
    <div class="mt-comments"> 
     <div class="mt-comment"> 
       <div class="mt-comment-img"> 
        <g:if test="${user?.avatar}"> 
         <img src="${createLink(controller:'controllerUser', 
         action:'image', id: user?.id)}" /> 
        </g:if> 
        <g:else> 
         <img class="img-circle" 
         src="${resource(dir: 'img/profile', file: 'user_profile.png')}"/> 
       </g:else> 
       </div> 
       <div class="mt-comment-body"> 
       <div class="mt-comment-info"> 
        <span class="mt-comment-author">${user?.username}</span> 
        <span class="mt-comment-date"> 
         <g:formatDate date="${user?.dateCreated}"/> 
        </span> 
       </div> 
       <div class="mt-comment-text">${user?.email}</div> 
        <div class="mt-comment-details"> 
         <g:if test="${user?.enabled}"> 
         <span class="mt-comment-status label label-sm label-success circle"> 
         </g:if> 
         <g:else> 
         <span class="mt-comment-status label label-sm label-info circle"> 
         </g:else> 
         <g:formatBoolean boolean="${user?.enabled}"/> 
         </span> 
         <ul class="mt-comment-actions"> 
         <li> 
          <g:link controller="user" action="edit" id="${user?.id}">Edit</g:link> 
         </li> 
         </ul> 
        </div> 
       </div> 
     </div> 
    </div> 
</g:each> 

Auch

, ich habe eine Schaltfläche, wenn es angeklickt wird ruft die AJAX-Funktion. Die Ajax-Funktion empfängt die Daten erfolgreich im JSON-Format. Von dort weiß ich nicht, mein g: jedes Tag hochzuladen.

Ich habe die remoteFunction von Grails versucht, das Upload-Attribut zu verwenden, aber ein Fehler angezeigt: Kein Javascript Anbieter konfiguriert ist, und ich habe die Lösung gesucht, aber nichts funktioniert mich.

Der Ajax-Aufruf:

$('.button').click(function() { 

    $.ajax({ 
     url: URL,  
     success: function(data) { 

      console.log(data[index]); 
      console.log(val.username); 
      console.log(val.dateCreated); 
      console.log(val.email); 
      console.log(val.enabled); 
      console.log(val.avatar); 
      console.log(val.id); 
     }, 
     error: function(){ 
     }, 
    }); 

Vielen Dank für mich zu helfen.

Answer 1

Anstatt JSON-Daten zu verwenden, können Sie dies mithilfe von Grails-Vorlagen und der jQuery-Lademethode tun. Hier ist eine schnelle POC.

Vorlage (_userComments.gsp)

Dieser wird als wiederverwendbare Ansicht handeln, die über AJAX genannt werden können oder direkt in anderen Ansichten aufgenommen werden.

<g:each in="${lastUsers}" var="user"> 
    <div class="mt-comments"> 
     ..... 
    </div> 
</g:each> 

Ansicht (main.gsp)

Unser Hauptansicht.

<div class="userComments"> 
    <!-- When the Page is Loaded, We need render this without an Ajax Call --> 
    <g:render template="userComments" model="['lastUsers':lastUsers]"/> 
</div> 

Javascript

$('.button').click(function() { 
    $(".userComments").load("user/userComments"); 
}); 

-Controller

Wir definieren zwei Methoden eine für die Hauptansicht und eine für den Ajax-Aufruf.

def index() { 
    def lastUsers = User.list(); 
    render(view:'main', model: [lastUsers: lastUsers]) 
} 

// Ajax Call 
def userComments() { 
    def lastUsers = User.list(); // what ever your fetch logic is 
    render(template:'userComments', model: [lastUsers: lastUsers]) 
}