CODEWITHSUNDEEP
javascriptjquery-mobilecordova
jhdj
jhdj

Reputation: 631

Jquery mobile javascript on another html not working

So I have 2 pages example page1.html and page2.html. there is a href link in from page1 to page2. But it seems that the javascript in page2.html are ignored and not called. (tried document ready, body onload did not work)

So does jquery mobile only accept the javascripts on the first page?

How do you run the javascript after the page2.html is called?

New to jquery mobile thanks.

sample code on page2.html similar to page 1:

    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
    <script type="text/javascript" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/imageresize.js"></script>
    <link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
    <script src="js/jquery.-1.10.1.min.js"></script>
    <script>
    $(document).bind("mobileinit", function(){
        $.extend(  $.mobile , {
            defaultPageTransition:'none'    
        });
    });
    </script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>   
    <body>
    HELLO WORLD
    </body>
    <script>

   $(function() {
    alert('testing js');        
  });
    </script>

Upvotes: 0

Views: 2791

Answers (4)

Gajotres
Gajotres

Reputation: 57309

Everything you need to know about this problem can be found here: Why I have to put all the script to index.html in jquery mobile

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.

That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).

Upvotes: 5

user859952
user859952

Reputation:

Make sure you include required jquery lib and also u can also try another jquery mobile events..

Page transitions are used to animate the change from the current active page (fromPage) to a new page (toPage). Events are triggered before and after these transitions so that observers can be notified whenever pages are shown or hidden. The events triggered are as follows:

pagebeforeshow

Upvotes: 1

JanR
JanR

Reputation: 6132

Based on the code you have posted:

Make sure you include:

 <script src="js/jquery.mobile-1.3.1.min.js"></script>

Before:

    <script>
    $(document).bind("mobileinit", function(){
        $.extend(  $.mobile , {
            defaultPageTransition:'none'    
        });
    });
    </script>

As I am sure mobileinit is part of the jquery-mobile framework.

Secondly I would strongly suggest using the directed page structure as per the jquery-mobile documentation.

One added advantage of using multiple divs(pages) in one document is that the user will not have to reload all the javascript/css on each page request which minimizes the amount of bandwidth used as well as the performance of your page.

Upvotes: 2

Anand
Anand

Reputation: 5332

You should include the jquery file in each html file using script tag as follows

<script type="text/javascript" language="javascript" src="jquery-1.6.3.min.js"></script>

Upvotes: 0

Related Questions