JQTouch and handling geolocation and dynamic AJAX requests to PHP

Question

Having an issue with JQTouch where the animation and load to a new DIV ID sometimes occurs before either the geolocation data is ready and/or the AJAX request to a PHP script is ready.

I'm attempting to listen to the pageAnimationStart (tried end too, not sure whether it is better?) but it's completely breaking my code in the process (no errors, just doesn't run).

Any suggestions on how to set up my functions in the code below so that the event listener waits for the AJAX and geolocation to work, before starting the animation?

    function locationList(clicked_id) {

navigator.geolocation.getCurrentPosition(

        function(position) {    

$('#location-list').bind('pageAnimationStart', function(event, info){ 
if (info.direction == 'in') 

$.ajax({
        beforeSend: function () {
            $('#location-list').html('<div class="ajax-load"><img src="img/ajax-loader.gif" /></a>');},
        url: 'search.php',
        type: 'GET',
        data: 'id='+clicked_id+'&action=geolocation&latitude='+position.coords.latitude+'&longitude='+position.coords.longitude,
        success: function(msg) {
            $('#location-list').html(msg);
            },
        error: function (XMLHttpRequest, textStatus, errorThrown)
            {   
            alert('Error submitting request.'); 
            }
         });

      }, /* position */

     function() {
    $('#location-list').html('<div class="toolbar"><h1>GPS Error</h1><a class="back" href="#home">Home</a></div><div class="scroll"><ul class="rounded"><li><p>To take advantage of this app you need the GPS capability of your phone turned on. Please check whether this is turned on or else the app will not work</p></li></ul></div>');
    } /* no position so failure */

    );/* bind */

    }/* position */

    ); /* navigator.geo */

    }

Answer 1

I would try to change the page on "complete:" instead of on "success:", so get the data and fill the page on "success:" then start the transition on "complete:"

more info at: http://api.jquery.com/jQuery.ajax/