Geek Answers Handbook

Jquerymobile - enable .js and .html

In my application, I use more than an html page to display content, and each page has its own .js file. When I invoke the html page, then the .js file is also included. In .js, I use $('div').live('pageshow',function(){}) . I am calling an html file from. js(using $.mobile.changePage("htmlpage")) .

My problem: consider, I have two html files. The second.html file is called with the name one.js. when i show second.html, then one.js time restarts again. I get the warning "one.js", then "second.js"

one.html

 <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" /> <script src="jquery-1.4.3.min.js"></script> <script src="jquery.mobile-1.0a2.min.js"></script> <script src="Scripts/one.js"></script> </head> <body> <div data-role="page"> </div> </body> </html>

Second.html

 <!DOCTYPE html> <html> <head> <title>Sample </title> <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" /> <script src="../jquery-1.4.3.min.js"></script> <script src="../jquery.mobile-1.0a2.min.js"></script> <script type="text/javascript" src="Scripts/second.js"></script> </head> <body> <div data-role="page"> <div data-role="button" id="link" >Second</div> </div><!-- /page --> </body> </html>

one.js

 $('div').live('pageshow',function() { alert("one.js"); //AJAX Calling //success result than call the second.html $.mobile.changePage("second.html"); });

second.js

 $('div').live('pageshow',function(){ { alert('second.js'); //AJAX Calling //success result than call the second.html $.mobile.changePage("third.html"); });

Note. When I show in the future. html, the following files are reloaded (one.js, second.js, third, js and 4th.js. But I only need the fourth.). I tried using $ .document.ready (function () {}); but this time .js did not call.

0
jquery jquery-mobile
source share
2 answers

The pageshow event binds JavaScript functions that run each time the page loads. When you load the second page, you create another page view function that you actually don't need to create.

This will help solve your problem if and only if you define it once:

  $('div').live('pageshow',function(event, ui){ alert('This page was just hidden: '+ ui.prevPage); }); $('div').live('pagehide',function(event, ui){ alert('This page was just shown: '+ ui.nextPage); });

When you go to pages, this will warn you about which page was just displayed and which page was hidden.

Great resource:
http://jquerymobile.com/demos/1.0a2/#docs/api/events.html

http://forum.jquery.com/topic/mobile-events-documentation

+1
source share

Edited comment (sorry, SO newbie here):

Below is an alternative approach to loading JS files based on the current HTML page

You have one script file that is included on each page of your application, but acts like nothing more than a “boot file” that detects the current page and then inserts JavaScript files (files) into the DOM.

This function inserts Javascript:

 function insertScript(script, container) { var elem = document.createElement('script'); elem.type = 'text/javascript'; elem.src = 'Assets/Scripts/' + script + '.js'; container.appendChild(elem); }

And this code detects the current page

 // The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM // and all page transition animations have completed. // See: https://gist.github.com/1336327 for some other page events $(document).bind('pagechange', function(event){ // grab a list of all the divs found in the page that have the attribute "role" with a value of "page" var pages = $('div[data-role="page"]'), // the current page is always the last div in the Array, so we store it in a variable currentPage = pages[pages.length-1], // grab the url of the page the was loaded from (eg what page have we just ajax'ed into view) attr = currentPage.getAttribute('data-url'); // basic conditional checks for the url we're expecting if (attr.indexOf('home.html') !== -1) { // now we know what page we're on we can insert the required scripts. // In this case i'm inserting a 'script.js' file. // I do this by passing through the name of the file and the 'currentPage' variable insertScript('search', currentPage); } // rinse and repeat... if (attr.indexOf('profile.html') !== -1) { insertScript('profile', currentPage); } });

Link Link

+1
source share

More articles:


All Articles