Writing my first JQTouch app. When I go from #loginto #home, the ajax JSON call succeeds, but the event pageAnimationEndedends up in an infinite loop.
$(function(){
$('#login').ajaxComplete(function (e, xhr, settings) {
jQT.goTo('#home', 'flip');
});
$('#home').bind('pageAnimationEnd', function(e, info){
alert('animation ended');
$.getJSON('/test', function(data) {
alert('json: ' + data);
});
});
});
Enter a POST call that 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 tips would be appreciated, thanks in advance! :-)
UPDATE
Obviously .ajaxComplete receives events for other elements. I added a guard to filter the event I want:
$(document).ready(function(e){
alert('document ready');
$('#login').ajaxComplete(function (e, xhr, settings) {
if(settings.url == '/login/authenticate') {
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);
});
});
});
source
share