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?