Yenile g: AJAX çağrısı üzerinden her etiket Grails

Question

Son kayıtlı kullanıcıları görüntüleyen bir istatistik panelim var. Tam sayfayı yeniden yüklemeye gerek kalmadan paneli yüklemek için bir AJAX çağrısı uygulamak istiyorum.

benim görünümünde aşağıdaki kodu vardır: Ayrıca

<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> 

, ben AJAX işlevini çağırır tıklandığında bir düğme var. Ajax işlevi, JSON formatında başarılı olan verileri alır. Oradan, g etiketimi bilmiyorum: her etiket.

yüklerim özelliğini kullanmak için Grails remoteFunction denedi, ancak bir hata görüntülenir: yok JavaScript sağlayıcı yapılandırılır ve çözüm arandı ama hiçbir şey beni çalışır.

AJAX çağrı: Bana yardım ettiğin için

$('.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(){ 
     }, 
    }); 

teşekkürler.

Answer 1

JSON Verilerini Kullanmak yerine, bunu grails şablonları ve jQuery load yöntemini kullanarak yapabilirsiniz. İşte hızlı bir POC.

Şablon (_userComments.gsp)

Bu AJAX üzerinden çağrılabilir ve diğer görünümleri doğrudan dahil edilebilir bir yeniden görünüm olarak hareket edecektir.

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

Görünüm (main.gsp)

Bizim Ana Görünüm.

<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"); 
}); 

Biz iki yöntem ana görünümde, diğeri ajax çağrısı için bir tanımlıyorsanız Kontrolör

.

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]) 
}