I already below for JQM page with id page1:
$('#page1').live('pageinit', function(event, data){
});
If I have another JQM page with id page2 and want to have the same pageinit with page1, how to call it or add the event without copying all the code at page1 pageinit event.
$('#page1,#page2') should do the trick.
Pls refer - http://api.jquery.com/multiple-selector/
I think it will be triggered only once in a multi-page template.
See page load events and page change events:
http://jquerymobile.com/test/docs/api/events.html
Related
In my jQuery Mobile I have 2 pages, index.html and test.html. There is a <p> tag in the index page which has a class, so when the <p> tag is clicked on my javascript, it wants to load test.html.
But with jQuery Mobile when the index page loads the test page, it is not in the DOM. So in order to go to the test page and replace the contents of a div in test.html it must first be loaded into the DOM. So here is what I am doing:
When try2 is clicked, I do a load page to get it into the DOM, then I replace the div with the new html, and then I change to the page. The html of the div never changes.
$('.try2')
.click(function(){
$.mobile.loadPage( 'test.html', { showLoadMsg: false } );
$('#mytest').html('i am here now').fadeIn('slow');
$.mobile.changePage( "test.html", { transition: "slideup"} );
});
Pre-fetch the page by using the data-prefetch attribute on a link that points to the second page. Docs: http://jquerymobile.com/demos/1.1.0/docs/pages/page-cache.html
Then bind to either the pageinit or pageshow event to update the div before the second page is transitioned into view.
Your current code won't work because the first two lines in your event handler are asynchronous, so to use them you would have to utilize the callback functions for the asynchronous functions.
Update
If you want to pre-cache a page but don't have a direct link to the page, you can always create a dummy link and hide it from view:
<a data-precache href="page2.html" style="display:none;"></a>
I am trying to execute a snippet of JS only once, after the page has completely loaded and JQM has taken care of all the ui modifications (i.e. listviews, buttons, etc.). I do want it to execute only on that page, and not on subsequent pages.
What I tried first, was pageshow
<script>
$('[data-role=page]').live("pageshow", function() {
alert("Ready!");
});
</script>
This has the problem that the function is now attached to the page div and gets executed every time any subsequent page gets shown. However, I only want this to be executed once, and only for the page that contains that JS snippet.
Is there a way to listen to the pageshow event, without actually attaching the function to it.
The only way I was able to do it was by binding and unbinding like this:
<script>
$('[data-role=page]').bind("pageshow.test", testfun);
function testfun() {
alert("Ready!");
$('[data-role=page]').unbind("pageshow.test", testfun);
}
</script>
But is there a more elegant way to do so?
jQuery has a one function to bind an event handler to be executed only once. Check the reference.
The pageinit event fires once per page just after the jQuery Mobile framework initializes its widgets; I think it may be what you're looking for.
pageinit
Triggered on the page being initialized, after initialization occurs.
We recommend binding to this event instead of DOM ready() because this
will work regardless of whether the page is loaded directly or if the
content is pulled into another page as part of the Ajax navigation
system.
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html
If you want to bind to a specific page and not the rest, then select only the page you want to alter... Here's an example:
<script>
$(document).delegate('#my-page-id', 'pageinit', function() {
alert("PageInit!");
});
</script>
When it's a normal jquery mobile page, I can use the following code as onload function:
$(document).delegate("#page", "pageinit", function(){});
However, it's not working when a page is opened as dialog(using ).
How can I catch onload event?
It depends a lot on how your page is structured. First of all your delegate call is targeting a specific id #page so if your dialog isn't using that id, then it won't be handled. You can use a more generic selector like this:
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})
I created an example that shows how to capture pageinit and pageshow for normal pages and dialogs http://jsfiddle.net/kiliman/hQh6u/1/
I have a single file for each page and i am trying to implement the pageinit event handler on every page (I think what belongs strictly to one page, should be declared there) as shown below:
<body>
<div id="myPage" data-role="page">
<!-- Content here -->
<script type="text/javascript">
$("#myPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
The event is bound properly to the page, so the code is executed but - now my problem - if i go to another page and return later on the pageinit event will be executed twice. I think that is because the .live method binds the pageinit event again to the page. But shouldn't the pageinit event only called once at page initialization? What I am missing here?
I solve the issue by passing the name of the event, in this case the "pageinit" instead of the handler.
<script defer="defer" type="text/javascript">
var supplier = null;
$("#pageID").die("pageinit"); //<--- this is the fix
$("#pageID").live("pageinit", function(event){
console.log("initialized - #(ViewBag.ID)");
supplier = new Tradie.Supplier();
supplier.Initialize("#(ViewBag.ID)");
});
Ref: http://www.rodcerrada.com/post/2012/04/26/jQuery-Mobile-Pageinit-Fires-More-Than-Once.aspx
I think its probably best to move your JavaScript code into another file as while your navigating around your site jQuery Mobile may cleanup (read: delete from DOM) that myPage page and therefore will have to load it in again and hense rerun that same block of code you defined and bind 2 listeners for the pageinit event.
Thats basically why they suggest using the live or on functions however it falls over if you include the binding code on the page ;)
However if you insist on having your code placed on a per page basis than use bind instead of live.
Ref: http://jquerymobile.com/demos/1.0/docs/pages/page-cache.html
jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the pagehide event).
I'm pretty sure they recommend binding pageinit to the document using on(). E.g.
$(document).on ('pageinit', '#myPage', function (event) {
instead of having the pageinit bound to the page, which is getting re-inited. In fact, I thought $(document).on() was the recommended way to bind events in jQuery, in general, now.
A quick workaround I have used is declaring a variable containing the handler function.
var handler = function() {
// your code
};
Then always use die() before binding the handler with live()
$( "#myPage" ).die( handler ).live( handler );
I'm sure this is not the intended usage by the authors, but it does the trick, you can leave your code within the page DIV.
$("#page1").live("pageinit", function () {
alert('pageinit');
$("#page1").die("pageinit"); //<--- prevent from firing twice on refresh
});
I'm trying to navigate to a different .html page using
$.mobile.changePage( "PlayGame.html", { transition: "slideup"}, true, true)
PlayGame.html is being transitioned to, however, none of the following are firing:
$(document).bind("mobileinit", function()
{
alert(1);
});
$('#gamePage').live('pageinit',function(event, ui)
{
alert('pageinit');
});
$('#gamePage').live('pagebeforeshow',function(event, ui)
{
alert('booooo');
});
However, if I do window.location.href = "PlayGame.html" then everything fires accordingly.
What am I missing?
Thanks
Tom
If the code in your example is in the <head> of the PlayGame.html document then it will not be included when the jQuery Mobile framework grabs the page via AJAX. That is why your custom code runs when you load the whole page but not when clicking on a link from another page.
You will want to either put your custom JavaScript in a single file and include it on every page (so it will be available no matter what page the user enters your site from) or you will want to move the custom JavaScript for each page into the <div data-role="page"> element for each page (so it will be included when the page is pulled into the DOM).
The reason is that when you click on a link to an external file, jQuery Mobile uses AJAX to pull out the first instance of a <div data-role="page"> element and places that element in the current DOM, everything else in the document is discarded.
Here is some suggested reading about how jQuery Mobile navigation works: http://jquerymobile.com/demos/1.0rc2/docs/pages/page-navmodel.html