Как использовать onLoading событие в grails remoteFunction

Question

Я делаю веб-приложение в grails.In тем, что я использую remoteFunction в gsp page.It работает сейчас. В том, что в событии onloading я хочу назвать showSpinner() "javascript function.My sample gsp code is:

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

Может ли кто-нибудь помочь в этом.

Answer 1

Вы можете зарегистрировать так называемый Ajax.Responder глобально для события onLoading для прототипов Ajax-запросов. Это будет срабатывать для каждого вызова remoteFunction/Ajax на вашей странице. Чтобы сделать это, вы должны поставить что-то вроде этого где-то в вашей GSP страницы или макета:

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

Вы должны были бы реализовать функцию showSpinner и hideSpinner конечно. В качестве законченного примера, вы могли бы использовать что-то вроде:

<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

Если вы используете плагин JQuery, используйте:

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