CODEWITHSUNDEEP
jquery-mobilecordova
Basil
Basil

Reputation: 889

Change hash to create multiple jquery mobile pages from one html file

I am writing a phonegap app. I show a page like this: I basic page structure from a html file with $.mobile.loadPage and add dynamic content to it. I make the page id unique and then use $.mobile.changePage($('#pageID') to show it to the user.

So lets assume I create a page with entries for a list 'a' and then also create a page with entries for a list 'b'. The pages have unique ids. But if I edit an entry from either list, when I press the back button, I see both lists because their both referenced by 'entries.html' in $.mobile.urlHistory . I read about the data-url attribute and I think it should be possible to set it correctly to distinguish between the two generated pages, but I don't know how.

I already thought about handling the whole history myself, which by itself wouldn't be a problem. What keeps me from doing it, is that I don't see a nice way to override the default behavior of the automatically generated back button.

Any help would be greatly appreciated.

Upvotes: 1

Views: 3327

Answers (1)

Basil
Basil

Reputation: 889

I found the solution. You have to change the data-url attribute of the page. Thats how I do it now, maybe this will help someone:

$.mobile.loadPage('entries.html', {reloadPage: true}).done(function() {

            //The id of the page is 'entries'. Otherwise the html only
            //contains empty divs for the header, content and footer.

            //Fill your page with content...

            //Absolute path to the html file you just loaded. You can get it from
            //window.location.pathname for example.
            var absPath = ...

           //Set data-url attribute
           $('#entries').attr('data-url',absPath +'&ui-page=entries1');

            //Enhance page with jquery-mobile styles
            $('#entries').trigger('create');

           //Make page unique
           $('#entries').attr('id', 'entries1');

           //Display the page.
           $.mobile.changePage($('#entries1'));

           });

The whole thing with the data-url is explained in the jquery mobile docs. It's the section about "Auto-generated pages and sub-hash urls"

Upvotes: 2

Related Questions