CODEWITHSUNDEEP
jquerycordovajquery-mobile
ManfredP
ManfredP

Reputation: 1057

jQuery Mobile loading content during page change

I have the following case in my code. On a page where the search results are shown every result has this code:

<a href='#pageSearchDetail'>Result</a>

On a click the page #pageSearchDetail i use the following event to do something before the page is shown:

$(document).delegate('#pageSearchDetail', 'pagebeforeshow', function() 
{    
    AjaxSearchDetail();        
});

In the AjaxSearchDetail i load some data from a webserver and insert that data into the DOM. My Problem is now that the page is already being shown, altough the ajax request hasn't finished yet. So till the the ajax loading is complete the page is only shown partially and "empty".

Code for ajax request:

function AjaxSearchDetail()
{               
    var data = "&data=test";

    $.ajax({
        data: data,        
        success: Success,
        error: Error
    });
}

Another funny thing is that the loading widget is not shown during the loading process of the page. What am i doing wrong ?

Upvotes: 0

Views: 750

Answers (1)

ManfredP
ManfredP

Reputation: 1057

I solved this issue with the following code:

$(document).ajaxStart(function() {    
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});

and now i use:

$(document).on("pagechange", function(e, data) 
{
    var pageID = data.toPage.attr("id");

    switch (pageID)
    {

    }
}

Upvotes: 1

Related Questions