Geek Answers Handbook

Using jQuery Mobile, the onload function does not run in HTML

I have an index.html file with the following syntax

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <a href="occassion.html"> <img class="frametoicon" src="img/occasion.png" /> </a> </body> </html>

then I have an occassion.html page that has a body onload function as follows

  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Occassion</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script> function loaded() { alert("hii"); } </script> </head> <body onLoad="loaded()"> </body> </html>

but the onload function does not work .... if I try to refresh the page ( occassion.html ), then the onload function works ... why it does not work when navigating with index.html

If I delete jQuery files, then it works as expected .... what am I missing to add?

This also does not work.

  $(document).ready(function () { loaded(); });

Edit

I added

  <script> $(document).bind("pagechange", function (event, data) { console.log(data); var toPage = data.toPage[0].id; alert(toPage); if (toPage == "page2") alert("hello"); }); </script>

and put the following in occassion.html

 <div data-role="page" id="page2"> hello </div>

To my surprise, even the warning (hi) does not shoot, but hi also does not appear, and the warning (topage) comes empty.

Like this? what is missing

+4
source share
2 answers

jQuery Mobile uses AJAX to move pages in the DOM so that it can navigate between pages. When jQuery Mobile does this, there is a chance that this will happen after the window.load event occurs, so the event usually does not fire unless you refresh the page (then window.load will fire again). It seems possible that the user can click the link and load it before the window.load event occurs, but I would not expect this to be the norm.

The fix is ​​to use jQuery Mobile special events, in which case you are probably looking for pageload / pagecreate / pageinit , see the documentation for them here: http://jquerymobile.com/demos/1.2.0/docs/api/events. html

Here is a brief example of how this might work (this code will be located centrally and included in each document):

 $(document).on("pageinit", "#occasions", loaded);

Note that #occasions will be the data-role="page" element on the cases page.

+9
source

EDIT

In fact, since you are using jquery mobile, you may be looking for a problem elsewhere.

So, going to the jquery mobile api , we see that we need the pagechange or pageload .

+3
source

More articles:


All Articles