Comment utiliser l'événement onLoading dans grails remoteFunction

Question

Je fais une application web dans grails.Dans ce que j'utilise remoteFunction dans la page gsp.Il fonctionne maintenant.Dans cet événement "onloading" je veux appeler "showSpinner() "javascript échantillon function.My Code gsp est:

<div class="menuButton" onclick="${remoteFunction(action: 'index', controller: 'file',  update: [success: 'ajax', failure: 'ajax'])}"> 
     <label class="menu">File upload</label> 
    </div> 

quelqu'un peut-il fournir une aide à ce sujet.

Answer 1

Vous pouvez enregistrer un prétendu Ajax.Responder globalement pour l'événement onLoading des requêtes Prototype Ajax. Cela se déclencherait pour chaque appel remoteFunction/Ajax dans votre page. Pour ce faire, vous devez mettre quelque chose comme ça quelque part sur votre page ou gsp la mise en page:

<script type="text/javascript"> 
function showSpinner() { 
    // TODO show spinner 
} 
function hideSpinner() { 
    // TODO hide spinner 
} 
Ajax.Responders.register({ 
    onLoading: function() { 
     showSpinner(); 
    }, 
    onComplete: function() { 
     if(!Ajax.activeRequestCount) hideSpinner(); 
    } 
}); 
</script> 

Vous auriez besoin de mettre en œuvre la fonction de showSpinner et hideSpinner bien sûr. Comme un exemple complet, vous pouvez utiliser quelque chose comme:

<script type="text/javascript"> 
    function showSpinner() { 
     $('spinner').show(); 
    } 
    function hideSpinner() { 
     $('spinner').hide(); 
    } 
    Ajax.Responders.register({ 
     onLoading: function() { 
     showSpinner(); 
     }, 
     onComplete: function() {  
     if(!Ajax.activeRequestCount) hideSpinner(); 
     } 
    }); 
</script> 
<div id="spinner" style="display: none;"> 
    <img src="${createLinkTo(dir:'images',file:'spinner.gif')}" alt="Loading..." width="16" height="16" /> 
</div> 

Answer 2

Si vous utilisez le plugin JQuery, utilisez ceci:

$(document).ready(function() { 
    $("#spinner").bind("ajaxSend", function() { 
     $(this).fadeIn(); 
    }).bind("ajaxComplete", function() { 
     $(this).fadeOut(); 
    })} 
);