CODEWITHSUNDEEP
jqueryeventsweb-applicationsmobile
altralaser
altralaser

Reputation: 2073

Differences between pageinit and pageshow

I created a simple webapp using jQuery Mobile 1.2. This app consists of a main page index.html and a second page named settings.html. The main page contains a button in the header section to open the settings page:

<div data-role="header">
    <h1>Main</h1>
    <a href="settings.html">Settings</a>
</div><!-- /header -->

In the settings dialog the user should be able to change program options. For this purpose I implemented a function to set the current options every time the dialog opens:

$(document).on("pageinit", "#page-settings", function() {
    // numeric text field to change the year of date (settings is an array)
    $("#text-year").val(settings.year);
    ...
});

That works correct so far.

Now I read that there are some more events like "pagebeforeshow" and "pageshow". But I don't understand the difference between these events. I tested the triggers as follows:

$(document).on("pageinit", "#page-settings", function() {
    alert("pageinit");
});
$(document).on("pagebeforeshow", "#page-settings", function() {
    alert("pagebeforeshow");
});
$(document).on("pageshow", "#page-settings", function() {
    alert("pageshow");
});

If I click the button on the main page then all three events will fire and all alerts will display. So why there are different events? And which one should I use in my settings scenario?

I thought that the process is the following: I go to my index page the first time, all elements on that page are added to the DOM and then the events pageinit and pageshow for index are fired. Then I click the link and change to the settings page, all elements of the settings page are added to the DOM and the events pageinit and pageshow for settings are fired. So far okay. Then I go back to the index page. Beacuse the index elements are still in DOM, only the pageshow event is firing. Then I click the settings link again. The settings elements should also be in DOM, so only pageshow should firing again. But the problem is that all events are fired everytime I change a page. So the question is: Why are there different events? And where should I place the filling of text boxes or the triggers of button clicks?

Upvotes: 1

Views: 3052

Answers (1)

Xanatos
Xanatos

Reputation: 91

  • "pageinit" is triggered when the DOM is ready. This one is usefull when you want to initialize variables when your page is dowloaded.

  • "pagebeforeshow" is triggered just before your page is showed. You
    can use this event when you need to do an action before displaying,
    like add div or HTML structure.

  • "pageshow" is triggered when the page is displayed. I use this event to add my click events and other events.

You can find more informations about the events in the documentation : http://api.jquerymobile.com/category/events/

Upvotes: 3

Related Questions