StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>Intro</h1> <p>All information found here can also be found in my blog <strong><a href="http://www.gajotres.net/page-events-order-in-jquery-mobile/" rel="nofollow noreferrer">ARTICLE</a></strong>, you will also find working examples.</p> <h1>Difference between pageinit and pageshow</h1> <p>Lets start from the beginning. As you already know jQuery Developers have provided us with page events to bridge a gap that document ready cant fulfil. While document ready can tell you that content is ready inside a DOM we need more then that because jQuery Mobile still needs to enhance content markup (enhance content style).</p> <p>There are <a href="https://stackoverflow.com/a/14469041/1848600"><strong>several</strong></a> page events and every and each of them has its purpose. Some will trigger before page content can be enhanced (like <strong><a href="http://api.jquerymobile.com/pagebeforecreate/" rel="nofollow noreferrer">pagebeforecreate</a></strong>) so that dynamic content can be added. Some will trigger only during page change like <strong><a href="http://api.jquerymobile.com/pagebeforechange/" rel="nofollow noreferrer">pagebeforechange</a></strong>.</p> <p>But let as get back to your question. <strong><code>Pageinit</code></strong> is here to be a jQuery Mobile version of <strong><code>document ready</code></strong>. While you can still use <strong><code>document ready</code></strong> it is still logical to have same alternative among page events. </p> <p>As you already told you are using <strong><code>pageinit</code></strong> for event binding (like click or swipe events) and that is a good solution. Mainly because <strong><code>jQuery Mobile</code></strong> suffers from a problem called "multiple event binding". If e.g. you have a click event bind to an element, nothing can prevent another click event from been bound to the same element. And that will happen if you use <strong><code>pageshow</code></strong> event. If you use event binding during the <strong><code>pageshow</code></strong> event, each time page is visited that same event will be bound over and over again. It can be easily prevented but that same prevention will take additional processor processing power, same power that can used to handle rest of web app.</p> <p>Here we have another question (one of your questions), what is then purpose of <strong><code>pageshow</code></strong>? Obvious answer would be to do something with a available and shown page. While correct answer it is not that important. <strong><code>Pageshow</code></strong> is important because it is ONLY page event where page height can be calculated correctly and it is not 0. Now you can see why your carousel needs to be initialized at that point. Carousels like many other plugins (charts, image galleries) requires correct page height and if you initialize them before <strong><code>pageshow</code></strong> they will have height 0, so they will exist but you will not be able to see them. </p> <p>Regarding your last question. Cashing don't play any role if your application is built correctly. For start you should always use delegated event binding because it will not care if page element exist or not. Basically if you bind your event to some parent element like document it doesn't matter if you page is cashed or removed from the DOM. As soon as it is back that same event will work again.</p> <p>Example:</p> <pre><code>$(document).on('click', '#some-button',function(){ }); </code></pre> <p>This method will bind a click event to document but that same click event will only work on an element with an id '<strong><code>some-button'</code></strong>. It really doesn't matter if that element exist or not because document object will always exist. </p> <p>This same logic is not that important if you work with normal web pages were page reload / refresh is a common thing. Or even here with jQuery Mobile if ajax is turned off so every page change is basically page refresh / reload.</p> <p>I hope this answers all of your questions. If you need clarifications ask them in comment section.</p> <p><strong>EDIT :</strong> </p> <ol> <li><p>Where should you load you data depends on what do you need to load. If you want to do in only once then use <strong><code>pageinit</code></strong>. If you need it each time page is visited then use <strong><code>pagebeforeshow</code></strong> (because if you use <strong><code>pageshow</code></strong> that content will just show up out of nowhere and it can confuse the user). Dont use <strong><code>pagebeforecreate</code></strong> because content will load after the event ends so no point in using it.</p> <p>If you want to load content in some interval use <strong><code>pageinit</code></strong> with setinterval function. Don't forget to <a href="https://stackoverflow.com/a/14550417/1848600"><strong>manually enhance</strong></a> page content styles each time dynamical content is added.</p></li> <li><p><strong><code>Pageshow</code></strong> is useful only from plugin initialization the requires page height. Nothing else in particular. From answer 1 you can see it is bed for dynamical content because it will show up from nowhere. </p> <p><strong><code>Pageinit</code></strong> should be used for event binding and dynamical content generation.</p></li> <li><p>Tomorrow I will update my <strong><a href="https://stackoverflow.com/a/14469041/1848600">answer</a></strong> with use cases for every page event. I hope this will be enough for you.</p></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload