jquery mobile page fluctuating on ajax reponce load

Question

I am working with a mobile application in which first page has

Html

    <ul>
    <li>121212</li>
    <li>123233</li>
    <li>232323</li>
    <li>4323423</li>
    <ul>

when user click on "li" then he/she entered on next page which will retrieve data related to selected "li" via Ajax. this is almost going good..

But when Ajax response come page is fluctuating 2 times. Means one time page loading, next time page totally white and then again showing page with Ajax response. Why ???

J query

 $("clickOnLi").click(function(){
        var id= $(this).val(); //get the selected li value
        $('.loadingGif').css({ 'display':'block' });
        $("#ulShowContent").html(''); // to remove old inner HTML to show new result html
        var dataString = 'selectedid='+id;
        $.ajax({
            type: "POST",
            url: remoteUrl+"handler.php",
            data : dataString,
            cache: true,
            success: function(response) {
                if(response){
                    $('.loadingGif').css({ 'display':'none' });
                    $("#ulShowContent").html(response); 
                }
                }
        });
    })



**and the result will show in this html** 


<ul id="ulShowContent" data-role="listview"> 
    <li class="comment chatsend">
        <div class="comment-meta">
            data 1
        </div>
    </li>

    <li class="comment chatsend">
        <div class="comment-meta">
            data 2
        </div>
    </li>
</ul>

Few question. Do you do an ajax call before a page change or after? — Gajotres, Feb 22 '13 at 08:55

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

You will need to change how you deal a page change and AJAX call.

What I have understand from your question, after click on LI element, page change is initialized and AJAX call is sent to a PHP server.

You will need to change this logic. Page fluctuations are cause by AJAX call which is executed during the transition from one page to an another.

This can be fixed like this:

On a first page remove HREF attribute from a list element
Add a click event to every list element
AJAX call should be executed on click event, at a same time show your custom loader (or use a default one)
When server side data is retrieved you need to store it so it can be accessed from an another page. Here you will find my other ANSWER where you can find various methods of storing data during page transitions, or find it HERE, just search for a chapter called: Data/Parameters manipulation between page transitions (your best bet is a localstorage).
Initialize a page change with changePage function
During a pagebeforeshow event (page is not yet displayed) append new data to the new container
When second page is finally shown everything will be there and

edited May 23 '17 at 11:49

Community

1
1

answered Feb 22 '13 at 09:09

Gajotres

57,309
16
102
130

Ok sir ji i will try your advise.. and will give you +1 if this problem will solve... this advice is seems too good. – Naresh Feb 22 '13 at 09:46
If you want/need I will send you a basic working demo I used to help someone else. – Gajotres Feb 22 '13 at 10:04
Just send me your mail, you will find mine in my profile. I will send you an archived project. This example uses PHP/Mysql server side code but this is not going to be a problem for you. – Gajotres Feb 22 '13 at 10:22
mail sent, take a look and tell me if it make sense. – Gajotres Feb 22 '13 at 10:51

jquery mobile page fluctuating on ajax reponce load

1 Answers1