CODEWITHSUNDEEP
ajaxjquery-mobilepage-init
foodev
foodev

Reputation: 117

jQuery mobile "pageinit" calls hashtag for short time

I'm currently building a page with jQuery mobile. I need to load some custon JavaScript on one page, so I found the pageInit function. Here's a short example of what i'm using:

page1.html:

<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Page 1 Title</h1>
    </div>

    <div data-role="content">
        <a href="page2.html">go to page2</a>
        <p>Page 1 content goes here.</p>
    </div>

    <div data-role="footer">
        <h4>Page 1 Footer</h4>
    </div>
</div>

page2.html:

<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Page 2 Title</h1>
    </div>

    <div data-role="content">
        <a href="page1.html">go to page1</a>
        <p id="addstuff">Page 2 content goes here.</p>
    </div>

    <div data-role="footer">
        <h4>Page 2 Footer</h4>
    </div>
</div>

js.js

$(document).delegate('#page2', 'pageinit', function() {
    $('<div />', {
        html: 'Some text that was added via jQuery'
    }).appendTo('#addstuff');
});

So I need to execute some JavaScript on page2.html. It actually works great (the div was created and you see the text). But when I'm clicking on a link to change the page, you can see, that jQuery is calling a hashtag in the URL first. So it looks like:

example.org/page1.html#/page2.html

when I clicked on the link on page1.html (just for a few milliseconds maybe) and then it redirects to 

example.org/page2.html

I guess it's because of the id .. but I need this one for the pageInit (as far as I know). Is this behavior normal ? Or am I doing something wrong. Maybe there's even a command to not call the hash tag.

Upvotes: 0

Views: 554

Answers (1)

Red2678
Red2678

Reputation: 3297

Here you go:

It's important to note that 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. This is critical because AJAX pages use the hash (#) to track the AJAX history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.

For example, a link to a page containing multiple internal pages would look like this:

< a href="multipage.html" rel="external">Multi-page link< /a>

Src: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument

Upvotes: 1

Related Questions