Question

Writing my first JQTouch app. When I go from #login to #home, a JSON ajax call happens successfully but the pageAnimationEnded event appears to be in an infinite loop.

        $(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 call which JQuery intercepts and turns into 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>

Any hints would be appreciated, thanks in advance! 🙂

UPDATE

Apparently .ajaxComplete recieves events for other elements as well. I added a guard to filter the event that I want:

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

             });
        });

Answer 1

Ya this will definitely cause an infinite loop. Assuming that the initial pageAnimationEnd is somehow triggered, Here’s what you’re doing:

Animation ends, so your bind method does an ajax call. That ajax call has a callback registered on completion ajaxComplete() that says “go home”. This go home presumably does some sort of animation, which, on complete triggers your ajax call. That ajax call has a callback registered on completion ajaxComplete() that says “go home”… and on and on.

Likely what you want is not a generic ajaxComplete() which gets called on all ajax requests, but a specific one on your login code that does a single call. I’m not exactly sure what you’re trying to achieve though so it’s hard to give you a solution to the problem. This should be a sufficient explanation to your problem though if I understand everything correctly