jQuery Mobile listview refresh after redirection

Question

The page feed.html works fine when its called from browser but when it is called from another page via a href="feed.html" page loads but the listview inside doesn't show up.

The script that works for feed.html contains $('#feedList').listview('refresh'); and it works fine when its calling from direct url.

So each time i need to refresh the page after redirection to work.

getfeed.js :

    var newsfeeds;

    $('#feedListPage').bind('pageinit', function(event) {
        getFeedList();
    });

    function getFeedList() {
        $.getJSON(serviceURL + 'getfeeds.php', function(data) {
            $('#feedList li').remove();
            newsfeeds = data.items;
            $.each(newsfeeds, function(index, newsfeed) {
                $('#feedList').append('<li><a href="feeddetails.html?id=' + newsfeed.id + '">' +
                '<img src="' + newsfeed.img + '"/>' +
                '<h4>' + newsfeed.title + '</h4>' +
                '<p>' + newsfeed.desc + '</p>' +
                '</a></li>');
            });
            $('#feedList').listview('refresh');
        });
    }

This code alone works fine but when its called from another page it does not refresh the list.

Are you using several html pages or do you have all of your pages inside one html file? — Gajotres, May 17 '13 at 13:08
several html pages are calling from a panel 'right push panel'. — Mr. Crowley, May 17 '13 at 13:18

score 2 · Accepted Answer · edited May 23 '17 at 10:25

2

This is a wild guess but I think I know what is wrong in your case.

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. So when you open your page directly and your javascript is placed inside a HEAD that javascript will execute successfully but if you are opening other html file and its javascript is in head it will be discarded as only BODY will be loaded.

If you want to find more about this problem and how to solve it (+ working solutions) take a look at my other answer: Why I have to put all the script to index.html in jquery mobile

edited May 23 '17 at 10:25

Community

1
1

answered May 17 '13 at 13:19

Gajotres

57,309
16
102
130

I don't know if its a good way or no but i tested to put jquerymobile and jquery .js into all html files. Didn't work ! – Mr. Crowley May 17 '13 at 13:49
It is not a point to put jQuery.js and jQuery Mobile into all files, it will solve nothing. If you read my other answer your whole javascript should be placed in your main / first html file or placed inside a BODY tag for all pages except main /first one. – Gajotres May 17 '13 at 13:52
1

Great ! your other answer link helped me, actually all it needed was to add a `rel="external"` to you a href tag. Thanks a lot mate. – Mr. Crowley May 17 '13 at 14:00
Answer `My Page` Original answer from @Gajotres , answer link is [Why I have to put all the script to index.html in jquery mobile](http://stackoverflow.com/questions/15800121/why-i-have-to-put-all-the-script-to-index-html-in-jquery-mobile/15806954#15806954) – Mr. Crowley May 17 '13 at 14:19

jQuery Mobile listview refresh after redirection

1 Answers1