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

             });
        });
Foi útil?

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.

http://api.jquery.com/one/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top