Setting up the jQuery Mobile script

Question

I am new to jQuery mobile. I perfectly know how to reference all my scripts and CSS file. But right now I am a little bit confused on how to embeded my own code. Take for example when coding normal jQuery we use:

$(document).ready(function (){
   // we embedded codes here
});

But for jQuery Mobile I have a code which I use:

$(document).bind('pageinit',function (){

});

So I embed all my code inside.

Should all code be in the bind? I am just a little bit confused on this or when am I suppose to embed a code inside the bind? Is it code that I want to execute when the page loads?

Also what is the difference between the mobileinit and pageinit?

Answer 1

Update:

jQuery Mobile 1.4

The following events are deprecated and will be removed on jQuery Mobile 1.5:

1. pageshow

   • Replacement: pagecontainershow

   • Usage: It is used to retrieve id of previous page.

     $(document).on("pagecontainershow", function (e, ui) {
       var previous = ui.prevPage;
     });
     

   • This event cant be attached to a specific page ID.

   • Recommendation: Use pagebeforeshow instead to attach event to specific pages.

     Demo

2. pagehide

   • Replacement: pagecontainerhide

   • Usage: It is used to retrieve id of next page.

     $(document).on("pagecontainerhide", function (e, ui) {
       var next = ui.nextPage;
     });
     

   • This event cant be attached to a specific page ID.

   • Recommendation: Use pagebeforehide instead to attach event to specific pages.

     Demo

3. pageinit

   • Replacement: pagecreate

---

jQuery Mobile 1.3.2 and below

^{Some events are deprecated, check update}

Introduction:

jQuery Mobile uses Ajax navigation to load pages/views into DOM (pagecontainer), enhance (style) them and then display them on request. A page goes through many steps (page events) from the time it gets inserted into DOM until it's removed. This applies to both models, Single-Page and Multi-Page.

Events:

I will go through essential events and most used ones in their sequential order.

• mobileinit: ⁽¹⁾

  The very first event that fires when a website using jQM is loaded. jQM consists of many widgets that have default options. Those widgets are not initiated during that event, therefore, you can override Global Settings / defaults of those widgets once this event fires.

  Important: Your code should go after jQuery.js and before jQM.js to successfully change defaults.

  <script src="jQuery.js"></script>
  <script>
    $(document).on("mobileinit", function () {
      $.mobile.page.prototype.options.theme = "b"; // set theme "b" to all pages
    });
  </script>
  <script src="jQuery-Mobile.js"></script>
  

• pagebeforecreate and pagecreate: ⁽¹⁾

  These events are almost the same. During them widgets auto-initialize and start enhance contents markup. They are useful to override widget's defaults of a specific element(s).

  $(document).on("pagecreate", "[data-role=page]", function () {
    $(".selector").listview({ icon: "star" }); // changes list items icons to "star"
  });
  

• pageinit: ⁽¹⁾⁽⁴⁾

  This is similar to .ready() and it fires once per page when it's fully initialized and styled but still not viewed. Use it to bind events to that page being initialized. If you don't specify a page, you will get muliple events every time pageinit occurs.

  $(document).on("pageinit", "#myPage" , function () {
    $(this).on("swipeleft", function () {
     // code
    });
  });
  

• pagebeforechange: ⁽²⁾

  It fires twice for a page that not has been viewed before and once for a cached/viewed page. It omits an object of data toPage and options, they contain all details related to the page that will be viewed. It's very useful to know the user came from page X and going to page Y. During this event, you can prevent the user from viewing page Y and take him to page Z.

  $(document).on("pagebeforechange", function (e, data) {
    if(data.toPage[0].id == "Y") {
      $.mobile.changePage("Z");
      e.preventDefault(); // don't update $.mobile.urlHistory
    }
  });
  

• pagebeforehide: ⁽³⁾

  It triggers on the current active page X but before page transition / animation takes place.

• pagebeforeshow: ⁽³⁾

  It triggers on the page Y that will be shown after the current page but still no transition / animation.

• pageshow: ⁽³⁾⁽⁴⁾

  Transition / animation is done and page Y is shown.

• pagehide: ⁽³⁾⁽⁴⁾

  Transition / animation is done on page X and it's hidden.

Demo

---

Diagrams (jQM 1.4) ⁽⁵⁾

---

^{(1) Fires once.}

^{(2) Fires twice for new page and once for cached page.}

^{(3) Fires whenever it occurs.}

^{(4) Deprecated as of jQM 1.4 and will be removed on jQM 1.5}

^{(5) Resource: PageContainer Events link 1 & link 2}