Jquery mobile javascript on another html not working

Question

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>

Can you share a bit of your html and code so far? It makes it easier for us to debug. — JanR
– JanR, Commented Jul 24, 2013 at 4:15
I tried the single html with multiple pages div, well it works with on pageshow but still want to know how to do this in separate htmls since I like to keep htmls within a number of lines and not a single page with thousands of line which will be harder to find and debug in the future — jhdj
– jhdj, Commented Jul 24, 2013 at 4:47

Community · Accepted Answer · 2017-05-23 12:14:49Z

5

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).

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 24, 2013 at 7:00

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

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

Comments

JanR · Accepted Answer · 2013-07-24 05:05:08Z

2

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.

answered Jul 24, 2013 at 5:05

JanR

6,1303 gold badges25 silver badges30 bronze badges

Comments

user859952 · Accepted Answer · 2013-07-24 05:49:24Z

1

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

answered Jul 24, 2013 at 5:49

user859952

Comments

Anand · Accepted Answer · 2013-07-24 04:16:56Z

0

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>

answered Jul 24, 2013 at 4:16

Anand

5,3305 gold badges47 silver badges59 bronze badges

Collectives™ on Stack Overflow

Jquery mobile javascript on another html not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related