implementing an ajax loading spinner with jqtouch

Question

I am wondering what javascript or jquery function I need to get an ajax loading spinner working with jqtouch.

I have a search button on a page which when clicked submits to a php file which processes the search results and echos back line by line the results in hthml within a div which jqtouch automatically puts inside a new div (this is my first jqtouch application but this seems pretty standard, new 'pages' are simply new divs in the html).

I have to have an onclick on the search button to trigger the javascript, as 'live' and similar jquery functions won't on the iphone I am testing with. Onclick II know to call a function to 'show' a loading div on the page and hide it when i get a desponse but then I am lost how to detect that the php file has finished processing the page results as I don't know how jqtouch tells this.

Edit

function popup(){
    $('#popup').ajaxStart(function(){
        $(this).show();
        });

    $('#popup').ajaxComplete(function(){
        $(this).hide();
        });     

    }

This works on the computer but has a bug as explained in my response to bohzo below, how do I get it working on the iphone? It's within a function as an onclick action is neccesary in my jqtouch implementation.

Answer 1

This is works for me in my app.

    function SubmitSearch()
    {
      $("#loading_gif").show();
      $.post('url to the php file', {var1: searchkey}, function(data) {
        $("#loading_gif").hide();

        //do something with returned data
        alert(data);
       });
    }

you can catch the search key in your php file as $key = $_POST[var1]; Hope this helps.

Answer 2

This works for jQTouch using Zepto (haven't tested with jQuery).

CSS:

div#jqt #loading {
  background: rgba(0,0,0,0.5) url('../images/scanner/loading.gif') 50% 50% no-repeat;
  z-index: 999;
  position: fixed;
}

JS:

$(document).on('ajaxStart', function(){
    $('#loading').addClass('current');
});

$(document).on('ajaxStop', function(){
    $('#loading').removeClass('current');
});

Answer 3

您可以使用.ajaxStart(..)和.ajaxComplete(..)