CODEWITHSUNDEEP
jqueryhtmlcordovajquery-mobilejquery-mobile-ajax
vishalg
vishalg

Reputation: 437

jquery page navigation dynamic js load issue

I am using page navigation and for that i am using .live pageshow event like this

$('#watchlist').live('pageshow', function(event) {
        watchList();
    });

it is giving correct result as i expect but if i want to add any javascript file on that templates, can i do that so that i can use other functionality for perticular templates.

I just want to load dynamic templates with js on that templates not all the js file on index page becoz it is conflicting somewhere

Upvotes: 2

Views: 369

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Intro

This answer is a response to the comment

"I just want page navigation with different html page including different js and css file thats it.. ".

To understand this answer lets discuss how jQuery Mobile works. It uses ajax to load other pages into the DOM.

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.

Solutions

There are 2 solutions here:

Solution 1

In your second page, and every other page, move your SCRIPT, LINK and STYLE tags into the BODY content, like this:

<body>
    <script>
        // Your javascript will go here
    </script>
    <link rel="stylesheet" href="some.css" />
    // And rest of your HTML content
</body>

This is a quick solution but to me this is an ugly solution.

Solution 2

Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application.

<a href="#second" class="ui-btn-right" rel="external">Next</a>

Official documentation, look for a chapter: Linking without Ajax. Unfortunately mobile app will lose page transitions because of this.

Upvotes: 1

Related Questions