CODEWITHSUNDEEP
jquery-mobile
xdumaine
xdumaine

Reputation: 10329

jQuery Mobile caching link to relative page

I'm having an issue with jQuery Mobile links to a dynamic page.

I have a list of links generated with a relative link like this:

<a href="#page2?q=Foo">Foo</a>
<a href="#page2?q=Bar">Bar</a>

And on the page page2, I use the data in the query string to populate fields dynamically.

The problem is, if I click on Foo, go back, and click on Bar, JQM actually takes me to #page2?q=Foo again. I tried setting data-cache="never" on page2 but with no luck. Any idea why the link isn't actually going to what it is, but the first that was clicked since page load?

Edit: example site here [fixed]. Just click on any item, go back, and try to go to another one. You'll get the first again.

Edit: I've tried setting data-dom-cache="false" which doesn't help, as it isn't that the page is cached, but that the link is cached (maybe?). I've also tried removing the page from the DOM, but then when I try to re-navigate to the page, I am unable, as it is gone.

I tried to work around this problem by simply programmatically setting the page value on click/tap, but this doesn't work when trying to load a specific page (for bookmarking/deep-linking).

Edit 2: I think I have found a related issue that may be causing this one. When I load up each page, I parse out the document.location.search. Oddly, with URLS like 

http://.../#route-page?route=test
http://.../#route-page?route=test2

document.location.search should return ?route=test and ?route=test2 and document.locations.hash should return #route-page for both. What I'm actually getting is empty strings for document.location.search and the entire thing for document.location.hash: #route-page?route=test. Am I using these two properties wrong?

Upvotes: 2

Views: 1731

Answers (3)

Oiva Eskola
Oiva Eskola

Reputation: 949

No sure if you fixed this already, as the links in your example take to different pages every time?

Anyway, this piece from jQuery Mobile's documentation might be related to your problem:

jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight page params plugin and a more fully featured jQuery Mobile router plugin for use with backbone.js or spine.js.

Upvotes: 0

Mike Sherov
Mike Sherov

Reputation: 13427

You're using document.location.search and document.location.hash wrong. A URL is structured so that the fragment (hash) comes after the query string (search). When you create a URL that has a ? after a #, the URL parser seeS that whole thing as the hash.

Ex:

example.com?a=b#c would have a search of ?a=b and a hash of #c

vs.

example.com#c?a=b would have a search of empty string and a hash of #c?a=b

Upvotes: 1

Apostolos Emmanouilidis
Apostolos Emmanouilidis

Reputation: 7197

You have a multi-page document and you link the first page with the second one using the page id (example: href="#route-page?route=50%20Grit").

The Javascript function getParameterByName uses the window.location.search in order to get the URL. But the URL still remains the same after the first page transition.

Try to use the following script instead of the getParameterByName:

    <script type="text/javascript">
          $(document).bind( "pagebeforechange", function( e, data ) 
            {
                if ( typeof data.toPage === "string" ) 
                {
                    var urlObj = $.mobile.path.parseUrl(data.toPage);
                    var rex = /^#route-page/;
                    if ( urlObj.hash.search(rex) !== -1 ) 
                    {
                        var specificRouteName = urlObj.hash.replace( /.*route=/, "" );
        // The specificRouteName gives you the "route" parameter.               
                    }
                }
            });
    </script>

Below you can find an example which is based on your code. I hope this helps you.

    <html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.17/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>

<body>
    <div data-role="page" id="home" data-theme="a">
        <div data-role="header" data-position="fixed">
            <h2 class="full-text">Climbing Areas</h2>
        </div>
        <div id="home-content" data-role="content">
            <ul id="locations" class="data" data-role="listview" data-filter="true" 
                data-filter-placeholder="Search for location, type, or route/problem name" data-filter-theme="a" >
                <li>
                    <a href="#route-page?route=mountain" data-transition="slide">Test1</a>
                </li>
                <li>
                    <a href="#route-page?route=sea" data-transition="flip">Test2</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- end of Home Page -->

    <!-- Route Page -->
    <div data-role="page" id="route-page" data-dom-cache="false" data-theme="a" data-cache="never">
        <script type="text/javascript">
            $(document).bind( "pagebeforechange", function( e, data ) 
            {
                if ( typeof data.toPage === "string" ) 
                {
                    var urlObj = $.mobile.path.parseUrl(data.toPage);
                    var rex = /^#route-page/;
                    if ( urlObj.hash.search(rex) !== -1 ) 
                    {
                        var spesificRouteName = urlObj.hash.replace( /.*route=/, "" );
                        document.getElementById('tst').value = spesificRouteName;
                    }
                }
            });
        </script>

        <div data-role="header" data-position="fixed">
            <h2 id="route-header" class="full-text"></h2>
            <a href="#home" class="ui-btn-right" data-icon="home">Home</a>

            <a href="#home" class="ui-btn-left" data-icon="arrow-l" rel="external">Back</a>
        </div>
        <div id="route-content" data-role="content">
            <h3 id="route-name"></h3>
            <p id="route-description"></p>
            <input id="tst" type="text" value="">
            <div id="route-colors" class="ui-grid-e">
            </div>
            <div id="route-images" class="ui-grid-a">
            </div>
        </div>
    </div>
</body></html>

Upvotes: 1

Related Questions