jQuery mobile: page specific javascript, hashtag pages

Question

I am creating a JQM site with multiple pages, using hashtag. e.g. index.html#a On one of the page I need to initialize a map, say index.html#map. But it occurred to me that no matter where I place the map initialization script, the script would still be executed when the index.html first load, which I want to avoid.

Although I may associate the map script with some buttons, I also want to be able to load the map when someone load index.html#map directly.

So it comes down to how can I associate JavaScript to a subpage (page with hashtag)?

score 1 · Accepted Answer · edited May 23 '17 at 12:23

I hope all of that pages are part of a single HTML file. If I am correct you don't need to use this syntax:

index.html#map

this one will be enough:

#map

Lets say this is your HTML:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

Then to associate a javascript to a certain page use this syntax:

$(document).on('pagebeforeshow', '#index', function(){       
    alert('Index page');
});

$(document).on('pagebeforeshow', '#second', function(){       
    alert('Second page');
});

Here's a working jsFiddle EXAMPLE.

Also take a look at my personal blog ARTICLE, it will help you to deal with jQuery Mobile page events. Or take a look at my other ANSWER.

Thanks a lot. I found something similar by probing into a plugin $('#basic_map').live('pageshow', function()... , both works. I really appreciate your detailed answer! — user2018232, Jan 28 '13 at 13:25

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

Use the callback parameter:

$(document).ready(function(){
var s = document.createElement("script");
s.type = "text/javascript";
s.src  = "http://maps.google.com/maps/api/js?v=3&sensor=true&callback=gmap_draw";
window.gmap_draw = function(){
   alert ("Callback code here");
};
$("head").append(s);  
});

Make sure the callback is global. You can find a corresponding thread here: lazy load google maps api v3 jQuery callback

edited May 23 '17 at 12:15

Community

1
1

answered Jan 28 '13 at 13:16

gulty

1,068
1
8
14

$(document).ready(function(){ should not be used with jQuery Mobile, it will not trigger as a page event. – Gajotres Jan 28 '13 at 13:17

jQuery mobile: page specific javascript, hashtag pages

2 Answers2