JQuery / JQTouch Getjson Call causando loop infinito?
Pergunta
Escrevendo meu primeiro aplicativo JQTouch. Quando eu vou de #login
para #home
, uma chamada JSON Ajax acontece com sucesso, mas o pageAnimationEnded
O evento parece estar em um loop infinito.
$(function(){
$('#login').ajaxComplete(function (e, xhr, settings) {
jQT.goTo('#home', 'flip');
});
$('#home').bind('pageAnimationEnd', function(e, info){
alert('animation ended'); //infinite loop happens in here
$.getJSON('/test', function(data) {
alert('json: ' + data); //this returns data successfully
});
});
});
Login Post Chamada que o jQuery intercepta e se transforma em Ajax:
<div id="login" class="current">
<div class="toolbar">
<h1>testapp</h1>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<form:form commandName="user" action="/login/authenticate">
<ul class="edit rounded">
<li><form:input path="email"/></li>
<li><form:password path="password" /></li>
<li>Remember Me<span class="toggle"><input type="checkbox" /></span></li>
</ul>
<a style="margin:0 10px;color:rgba(0,0,0,.9)" href="" class="submit whiteButton">Login</a>
</form:form>
</div>
Qualquer dica seria apreciada, obrigado antecipadamente! :-)
ATUALIZAR
Aparentemente .AjaxComplete Recebe eventos para outros elementos também. Eu adicionei um guarda para filtrar o evento que eu quero:
$(document).ready(function(e){
alert('document ready');
$('#login').ajaxComplete(function (e, xhr, settings) {
if(settings.url == '/login/authenticate') { //add check to prevent infinite loop
alert('jqt goto ' + settings.url);
jQT.goTo('#home', 'flip');
}
});
$('#home').bind('pageAnimationEnd', function(e, info){
alert('animation ended');
$.getJSON('/test', function(data) {
alert('json: ' + data);
});
});
});
Solução
Você definitivamente causará um loop infinito. Assumindo que o inicial pageAnimationEnd
de alguma forma é acionado, eis o que você está fazendo:
A animação termina, portanto, seu método de ligação faz uma chamada AJAX. Essa chamada Ajax tem um retorno de chamada registrado na conclusão ajaxComplete()
Isso diz "Vá para casa". Presumivelmente, isso vá para casa faz algum tipo de animação, que, em completo desencadeia sua chamada Ajax. Essa chamada Ajax tem um retorno de chamada registrado na conclusão ajaxComplete()
Isso diz "vá para casa" ... e assim por diante.
Provavelmente o que você quer não é genérico ajaxComplete()
que é chamado em todas as solicitações do AJAX, mas uma específica no seu código de login que faz uma única chamada. Não sei exatamente o que você está tentando alcançar, por isso é difícil lhe dar uma solução para o problema. Esta deve ser uma explicação suficiente para o seu problema, se eu entender tudo corretamente
Outras dicas
Não sou muito bom com o jQuery, mas acho que você poderia usar o $(selector).one(function(){...}
Para evitar um loop.