Question

I have a multipage jquerymobile website with a list on the first page. Each element of the list points to a second page which content depends on which list element has been pressed. In the specific I have a alist of “locations” in the first page and the detail of the specific location in the second.

<ul id="location_list" data-role="listview">
    <li><a href="#location_page" data-id="1231">Location 1</a></li>
    <li><a href="#location_page" data-id="4056>Location 2</a></li>
    <li><a href="#location_page" data-id="7569">Location 3</a></li>
</ul>

Where the data-id attribute is the location identifier.
To pass paramenters I added a jQuery function on the list elements which find out the pressed element data-id value and store it int a variable in the window variable before calling the next page.

$('#location_list').find("a").live("click",function(event){
    window.location_id = $(this).data("id");
});

The second page will read the value in window.location_id and show the right content.

Everything works fine until I refresh the second page. If I do that the variable I used to pass the paramenters is (correctly) empty and nocontent is loaded.
I tried to pass the value in the URL of the page (linking the list with href=”#location_page?locid=1231″) and parse the document.location value but it does not work on page to page itaration (if I print the URL the second page has I have just “#location_page” instead of “#location_page?locid=1231”)

Can anyone help me solving my problem? Maybe with a better way to pass paramenters between pages or a way to make post passing paramenters works.

Thanks for your help.

Answer 1

There is a better way of passing the parameters.

jQuery.data() works by attaching the data to the DOM (like you did with id: <a ... data-id=""></a>). Because jQuery Mobile never refreshes and uses AJAX for page switching, that data is available throughout your mobile application/website, but once a page refreshes, the DOM is reloaded and it knows nothing about the data that was previously attached.

What I believe you should do is the following. Create a locations.html page for the list and a location-details.html page for a specific location’s details. Then you could easily pass the data through the URL.

Example:

<!-- locations.html -->
...
<ul id="locations_list" data-role="listview">
    <li>
        <a href="location-details.html?id=1">Location 1</a>
    </li>
    <li>
        <a href="location-details.html?id=2">Location 2</a>
    </li>
    <li>
        <a href="location-details.html?id=3">Location 3</a>
    </li>
    <li>
        <a href="location-details.html?id=4">Location 4</a>
    </li>
    <li>
        <a href="location-details.html?id=5">Location 5</a>
    </li>
</ul>
...

<!-- location-details.html -->
...
<script type="text/javascript">
    $(document).on('pageinit', function () {
        function setupLocationDetails () {
            var location_id = $.mobile.path.parseUrl($(location).attr('href')).search.replace('?id=', '');

            // Do whatever you need to do here.
        }

        setupLocationDetails();
    });
</script>
...