.live('pageshow') needs user manual refresh to work

Question

$('#home').live('pageshow', function(event) {
    $.mobile.showPageLoadingMsg();
    var task = getUrlVars()["que"];
    var page = getUrlVars()["page"];
    var query = '';
    if(page == undefined){
        page = 0;
    }
    var nextPage = page+1;
    if(task == undefined){
        task = 'home';      
    }
    switch(task){
        case 'home':
            query = 'task=home&page='+page;
            break;
    }
    $.get('http://myappserver.com/api.php?'+query,function(data,response){
        alert(response);
        alert(data);
        var json = eval(data);
        var list = '';
        for (var i=0;i<json.length;i++){
            var item = json[i];
            var img = 'http://myappserver.com'+item.img;
            list += '<li><a href="page.html?id=' + item.id + '">' +
                        '<img src="' + img + '" class="recipeAvatarList"/>' +
                        '<h4>' + item.value + '</h4>' +
                        '<p>' + item.familia + '</p>' +
                        '<span class="ui-li-count">' + item.votos + '</span></a>';
                 +'</li>';
        }
        list += '<li><a href="index.html?que='+task+'&page='+nextPage+'">Cargar más..</a></li>';
        $('#mainlist').html(list).listview('refresh');
        $.mobile.hidePageLoadingMsg();
    });  

});

WHERE

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

This seems to work great lo load the results in the first page, but if you notice, i append a link to load the next page:

list += '<li><a href="index.html?que='+task+'&page='+nextPage+'">Cargar más..</a>

The thing is that when that link is clicked it loads the next URL properly, and the data and response alert are with the expected content but the list is not filled... User must manually refresh that view to do so..

Is this because i shouldnt use .live('pageshow') ?

-EDIT-

Page markup is like this

<div id="home" data-role="page" >     
                <header role="banner" class="clearfix" >        
                    <h1>Title</h1>       
                </header>
                <div data-role="content">
                        <div class="">
                            <input type="search" id="buscar_receta" placeholder="busca recetas" />
                                <a href="search.html" class="advancedSearchLink">+ Busqueda avanzada</a>
                        </div>
                </div>
                <div data-role="content">
                    <ul id="mainlist" data-role="listview" >

                    </ul>

                </div>        
</div>

I just realised now that its creating a new #home container, so there are 2 of them.. ! — Toni Michel Caubet, Dec 29 '12 at 12:08
Sorry! I answered before noticing your comment, I'll update my answer in a few minutes. — Roimer, Dec 29 '12 at 14:40
You need to make various changes in order to make it work. Question: what is the difference between api.php and index.html? it looks like api.php loads the first few items on the list and index.html loads more items replacing the previous list. — Roimer, Dec 29 '12 at 15:34
api.php is in the server and index.html is in the device... I finallally managed this by preventing de default and appending the new resutls to the list (and refreshing the list) — Toni Michel Caubet, Dec 30 '12 at 12:07

score 0 · Accepted Answer · edited May 23 '17 at 12:12

The problem is what you said: you shouldn't use $.live with jQueryMobile (unless you really have to).

Try changing your code from this:

$('#home').live('pageshow', function(event) {
    //your code here
}

To this:

$('#home').on('pageshow', function(event) {
    //your code here
}

Explanation: pages are by default loaded by jqMobile using ajax, so the new content is added to the existent DOM. If you use $(#home).live('pageshow', ...), which is equivalent to $(#home).on('pageshow', 'html', ...), you are asking to the HTML element to listen for the pageshow event.

Every time you load the same page again (by ajax) the event binding is done again to the same HTML element and your code is executed two times, then three times, then four...

You may want to read this related question and my answer there: JQueryMobile listen click

UPDATE:

Sorry! I answered before noticing your comment. There is a problem in your code because you are using live instead of on, but your main problem is the way you are opening the link: it will create a second <div id='home'> every time you click, and probably the first of your duplicated lists is correctly being updated, but you have in screen the second grid which is empty.

You have to make some changes in how you load the data in order to make it work. Please read my comment in your question.

score 0 · Answer 2 · answered Dec 29 '12 at 14:43

0

.live is a deprecated method. So try using the following...

$('#home').on('pageshow', function(event) {

}

or you can use

$('#home').delegate('pageshow', function(event) {

}

Refer here

answered Dec 29 '12 at 14:43

Wolf

2,150
1
15
11

.live('pageshow') needs user manual refresh to work

2 Answers2

UPDATE: