1

I know when you are switching pages around with jquery mobile using ajax it only grabs the DOM in the body with data-role="page". The problem is this is a phonegap app running on a mobile device so doing full page loads without ajax is pretty slow getting all the JS, CSS scripts.

I've been searching around trying different things. The docs say you can append javascript to the dom and put it under a data-role="page" element but I still can't get it to fire this way.

What I am currently trying to is have a bootstrap script that is included at the top of the first page and on pagechange it tries to insert the js specific to that page in the dom

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

//get the path to the html asset
var path = document.location.pathname;

//split up
var arr = path.split('/');

//get the relevant part of the path ie index.html
var page = arr[arr.length-1];

// 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];

//if the page is index add index.js to the last dom node
if (page == 'index.html') {
    insertScript('index', currentPage);
}

});

Then for example index.js has the following

$("#start_page").live('pageinit', function() {
    alert('on start page');       
});

but the pageinit function never fires. Any ideas

**edit:

I have multiple html pages, using index.html and home.html for example

*index.html

<html>
<head>
<script type="text/javascript" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$("#index_page").live('pageinit', function() {

//do some page specific js functions for index.html
});

</head>
<body>
<div data-role="page" id="index_page">
<a href='home.html'>go to home page</a>
</div>
</body>
</html>

**home.html

<html>
<head>
<script type="text/javascript">
$("#home_page").live('pageinit', function() {

   //this is the JS I want to pull
});

</head>
<body>
<div data-role="page" id="home_page">
<h1>this is the home page</h1>
</div>
</body>
</html>

So what will happen when I click on the link from index to home the dom gets updated but any JS on the home.html page WILL NOT be inserted into the page via AJAX so I'm trying to figure out a way to do that.

I know I could include ALL of my js in one page but I'm really trying to avoid that because I have alot of pages and it will get messy fast.

captainsac
  • 2,484
  • 3
  • 27
  • 48
Brian
  • 4,328
  • 13
  • 58
  • 103

3 Answers3

1

Bear in mind that when jQuery Mobile loads another page through AJAX, all it does is insert the <div data-role="page"> from the new page into the existing page's <body>. Anything outside that div may as well not exist. So when you pull in the second page, the script you want to insert isn't actually there.

The ways you can do it then are - to include the script inside your page div, or load all your javascript in the HEAD. You should also pay attention to this little bit of wisdom on

http://code.jquery.com/mobile/latest/demos/docs/api/events.html

"for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes. This can be done in the mobileinit handler, as described on the global config page."

Oh, and one other thing to remember... copying javascript into a page that's already loaded won't actually execute it ;)

Chris Nash
  • 2,941
  • 19
  • 22
  • Even if the JS is wrapped in a pageInit event? – Brian Jan 22 '12 at 02:27
  • http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml seems helpful here. But I still think the main problem you will have is to do with the order jQuery Mobile is going to load the page, run the scripts in it, and fire the events. http://jacob4u2.posterous.com/documentready-with-jquery-mobile has been quite helpful for me. – Chris Nash Jan 24 '12 at 22:57
  • That second link I think may have the answer but I'm not quite there yet. the JS fiddle doesn't seem to run for me. With that framework if you will, do you have to link to the page specific JS file, for example do I have to put like somewhere? Or does the navigation.js go and grab the function? – Brian Jan 25 '12 at 10:23
  • The "trick" appears to be that you have to bind some events (like `pageinit`) in the head; otherwise you end up loading the page and binding to the event after the event has already been fired. I've had the most success binding to later events that happen every time (like `pagebeforeshow`), and I must admit the jQM docs are a bit vague on how event handling is done and how it interacts with the execution of js from the incoming page, so including all my js in the head seemed to save a lot of headaches. – Chris Nash Jan 25 '12 at 19:05
0

I met the problem yet. finally I using the iframe tag and add into the data-role="page" page div.

Just like this:

<iframe style="display:none" onload="javascript:js_fun()"></iframe>

then the js_fun() runs. Thus can load the js code or file by ajax.

mygoare
  • 315
  • 3
  • 11
0

Not sure exactly what you're trying to accomplish, but you could loop through each link on the page with javascript and set the onclick to return false, but forward the href to an ajax call. The php page will receive the url of the requested page, parse the xml, and return the content of the body. This can then replace the body of the first page.

mowwwalker
  • 16,634
  • 25
  • 104
  • 157
  • I added some info to the question to better layout what I'm asking. Basically I want to bring in page specific javascript when navigating with ajax – Brian Jan 21 '12 at 02:15