Staying Passionate and Motivated ON web development: pages navigation

February 28, 2013

JavaScript do not execute in jquery mobile

Recently, I receive a question about why javascript do not execute in jquery mobile when using
<a href="aboutus.html">About US<a> in home.html.

It is because jquery Mobile will intercept the <a> tag and use AJAX to get the HTML to navigate the page instead of changing page directly. This result the javascript in "aboutus.html" will not execute. Let's see an example:

This is home.html


<!DOCTYPE html>
<html>
<head>
 <title>Home</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta charset="utf-8">
 <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.2.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>
 <script src="phonegap-1.4.1.js"></script>
</head>

<body onload="onBodyLoad()">
    <div data-role="header" data-id="aboutus" data-position="fixed">
        Home
    </div>
 <div data-role="header">
  <a href="aboutus.html">About US<a>
 </div>
 
</body>
</html>

This is aboutus.html


<!DOCTYPE html>
<html>
<head>
 <title>About us</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta charset="utf-8">
 <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.2.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>
 <script src="phonegap-1.4.1.js"></script>
 <script type="text/javascript">

  function onBodyLoad()
  {
   document.addEventListener("deviceready", onDeviceReady, false);
  }

  function onDeviceReady()
  {
   alert("testing");
  }
 </script>

</head>

<body onload="onBodyLoad()">
    <div data-role="header" data-id="aboutus" data-position="fixed">
        About us
    </div>
</body>
</html>

In order to fix this issue, you would add rel="external" data-ajax="false" to make it refresh and go to the page directly instead of AJAX.


<a href="aboutus.html" rel="external" data-ajax="false">About US</a>

February 23, 2013

change pages in jquery mobile

In jquery Mobile, page navigation can be done by using $.mobile.changePage(). How it works? Actually, this method will programmatically change from one page to another page by using ajax load html instead of refreshing the whole page in browser.

Assume we have index.html and a page in sub directory pages/home.html.
Here is the example:


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, 
    user-scalable=no" /> 
  <title>Index page</title>
  <link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
  <script src="jquery-1.8.2.min.js"></script>
  <script src="jquery.mobile-1.3.0.min.js"></script>
 </head>
 <body >
  <!-- Home -->
  <div data-role="page" id="indexPage">
   <div data-theme="a" data-role="header">
    <h3>
     I am index page
    </h3>
   </div>
   <div data-role="content">
    Content is here....
   </div>
  </div>
 </body>
</html>

Now, we would like to change page to page/home.html when the user start to navigate index.html. We bind a pagecreate event to "#indexPage" instead of "documenet". It is because bindind "pagecreate" event to document, the event will be fired every time changePage performed.


<script type="text/javascript >
 $("#indexPage").bind('pagecreate', function()
 {
  $.mobile.changePage("pages/home.html");
 });
</script>

After that you will see page/home.html is loaded.

Important notes:

If you are executing the html with file path in browser like this (file:///C:/test/index.html), $.mobile.changePage() cannot work normally because loading html, javascript by using ajax in local drive is not allowed. There is an alternative way to switch page instead of using $.mobile.changePage or put you files to hosting/ install apache/iis in your machine.


<script type="text/javascript >
 $("#indexPage").bind('pagecreate', function()
 {
   window.location = "pages/home.html;
 });
</script>

Navigation

February 28, 2013

JavaScript do not execute in jquery mobile

February 23, 2013

change pages in jquery mobile