jquerymobile - include .js and .html

Question

In my application,I am using more than html page for displaying the content and each page have own .js file. When I call the html page then .js file also included. In the .js,I am using $('div').live('pageshow',function(){}). I am calling the html file from the .js(using $.mobile.changePage("htmlpage")).

My problem: consider, I have two html files. second.html file is called with in the one.js. when I show the second.html, that time one.js is reload again. I am getting the alert "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 forth.html that time the following files are reload(one.js,second.js,third,js and fourth.js. But I need fourth.js alone). I tried to use the $.document.ready(function(){}); but that time .js did not call.

You should post some of your code to help clarify what you are asking. — jamesmortensen
– jamesmortensen, Commented Jan 10, 2011 at 4:25
When you show second.html, are you completely reloading the page or are you using Ajax to load it in? — jamesmortensen
– jamesmortensen, Commented Jan 10, 2011 at 4:43
I am using the AJAX calling. based on the ajax result i am calling the second.html. — Finder
– Finder, Commented Jan 10, 2011 at 4:44

jamesmortensen · Accepted Answer · 2011-01-10 07:03:58Z

1

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

This should help solve your problem, if and only if you define this 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 transition pages, this will alert you with what page was just shown, and what page was just hidden.

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

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

edited Jan 10, 2011 at 7:03

answered Jan 10, 2011 at 4:47

jamesmortensen

34.2k11 gold badges102 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Finder Over a year ago

Hi I am very new to this one. I am learning side by side. Could you please help me how to do it?

Finder Over a year ago

I am calling the $('div[data-role="page"]').unbind(); before move the second page. But still it is calling. $('div').live('pageshow',function() { alert("one.js"); //AJAX Calling //success result than call the second.html $('div[data-role="page"]').unbind('pageshow'); $.mobile.changePage("second.html"); }); THanks in advance

Finder Over a year ago

Hi, THanks for the reply. Kindly clarify my doubts. U means, consider all the .js files into the single file ?

DevIntern · Accepted Answer · 2011-11-30 15:57:22Z

Edited per oers comment (Sorry, SO newbie here):

Here is an alternate approach to loading JS files based on the current HTML page

Have a single script file that is included on every page of your application but acts as nothing more than a ‘bootstrapper’ file which detects the current page and then inserts the JavaScript file(s) into the DOM.

This function will insert the 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's 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 (e.g. 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);
}

});

Reference Link

Welcome to Stack Overflow! Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.

Collectives™ on Stack Overflow

jquerymobile - include .js and .html

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related