Execute javascript after page transition

StackOverflow https://stackoverflow.com/questions/16497369

質問

I am trying to create an dynamic phonegap app using jquery mobile but am having some issues loading javascript when going to a page using transition.

My index page look like this:

<body>
<div data-role="page" id="homePage">

    <div data-role="header" data-theme="c" data-position="fixed">
        <h1>My Page</h1>
    </div>

    <div data-role="content" id="pageName"> 
        <ul data-role="listview">
            <li><a href="pages/clubpage.html?userid=48">This is a test</a></li>
        </ul>   
    </div>

</div>
</body>

On my "pages/clubpage,html" I have included below in the head:

$(document).on('pageshow', function (){
    alert("I am here!");
});

Somehow I don't get the alert? What am I doing wrong?

Please help and thanks in advance :-)

<------- EDIT --------->

I am actually trying to goto page 2 and that page has an dynamicly generated listview like this:

$(document).on('pageshow', '#clubPage',function (){ // GET THE CURRENT CLUBPAGE //

    var clubid = getUrlVars()["clubid"];
    $.getJSON("http://mypage.com/groupmenu.php?callback=?&userid="+userid+"&clubid="+clubid,          
        function(data){
            var content = []
            $.each(data , function(i,val){

                content.push(val.list);

            });

        $("#mathes_list_count").html(content.join(""));
        $('#mathes_list_count').listview('refresh');

    });

});

Now my question is... Can I generate this before the transition is made?

役に立ちましたか？

解決

You are not getting anything because delegated page events needs 2 objects, one original like document and a second one, same one you are missing. In your case it is a page id:

$(document).on('pageshow', '#homePage',function (){
    alert("I am here!");
});

But this isn't your real problem.

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.

Read more about it here in my other answer, you will also find solutions and examples: Why I have to put all the script to index.html in jquery mobile

EDIT :

There are two possible solutions here. You can executed getJson on a page before, store its content and rebuild it on an another page during the pagebeforecreate event. Take a look at my other answer how you can store data between transitions, search for topic Data/Parameters manipulation between page transitions : jQuery Mobile: document ready vs page events.

Or you can initialize page transition and load/build all data during the pagebeforecreate or pageinit event. Which is still better then doing it during the pageshow event.

In my opinion, solution 1 is a better solution because transition wont suffer and data will not magically appear if pageshow event is used.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top