0

On a jQuery page, I have a login form. The code is simple enough:

<form method="post">
    <div data-role="fieldcontain">
        .... Form here
    </div>
</form>

but the following form is submitted, JQM loads the next page via Ajax POST.

The problem is that any in-line Javasctipt on that new page is NOT initialized. I'm not talking about the $(document) elements etc. the entire in-lined Javascript blocks aren't initialized.

However if I add

data-ajax="false"

to the form tag, everything is fine. The page is loaded and initialized correctly.

Why does this happen, and is there a way to trigger a page initialization with the ajax loaded content?

I've observed this on both Firefox and the Android Webview clients.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
A.Grandt
  • 2,242
  • 2
  • 20
  • 21
  • Inline javascript inside a HTML document loaded with ajax will normally not be executed, there should be hundreds of duplicates of this if you use the search function. – adeneo Jan 27 '13 at 11:28
  • I did look, but didn't find anything that explains why, and how to overcome this, short of using rel="external" and data-ajax="false" – A.Grandt Jan 27 '13 at 12:12

3 Answers3

1

If you load your page with the default jQuery Mobile implementation (which utilizes ajax), only the script blocks on the first page (<div data-role="page">) will get loaded.

You can turn off ajax loading via mobileinit which will disable ajax loading globally or you can disable it via the source link.

$(document).on("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
});

or

<a data-role="button" data-ajax="false"
    href="myPageWithItsOwnScriptBlock.html">Link</a>

If you want to continue using ajax loading, you can place the script block inside of you "page" <div>

<div data-role="page">
    <script src="myscript.js"></script>
    <div data-role="header">
    ....

Details here: http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html

andleer
  • 22,388
  • 8
  • 62
  • 82
1

Reason data-ajax="false" worked in your case is because it will force a full page reload which will incidentally trigger page markup enhancement.

This is a segment from jQuery Mobile documentation:

It's important to note if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL.

Now in your case if you want to enhance new page content use this:

$('#pageID').trigger('create');

or in case you have also made changes to header and footer use this:

$('#pageID').trigger('pagecreate');

If you want better understatement take a look at my blog ARTICLE, were I am talking about page content markup enhancement in great details. There you will find examples for functions mentioned on top. It can be also found HERE.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
0

Try to encapsule your inline JS code into something like this:

$(document).bind('pageinit', function(event) {
    // your inline code goes here
});
Stefan
  • 94
  • 5