fix url using jquery mobile

Question

I'm using jquery mobile to building a site but when I click on a button and this button points to a dialog page, in the URL appears #&ui-state=dialog. If I put in the <a data-ajax="false"></a> the url is correct without #&ui-state=dialog but the dialog window doesn't show correctly because obviously ajax is disable.there is some way to fix it?

Answer 1

When you open the dialog, use $.mobile.changePage() and set the changeHash option to false: http://jquerymobile.com/demos/1.0.1/docs/api/methods.html

//delegate the event binding so elements in the DOM now and in the future will be bound-to
$(document).delegate('#my-dialog-button', 'click', function () {

    //change to the dialog, forcing the hash to remain the same and the page to be viewed as a dialog
    $.mobile.changePage($('#my-dialog'), {
        changeHash : false,
        role       : 'dialog'
    });
});

Answer 2

Try to use data-history="false" in the popup div tag like:

<div data-history="false" data-role="popup" id="options-list-div" data-theme="b" data-overlay-theme="b">

Good luck! :-)

Answer 3

Using changeHash would disable the change of history because the url won't change. So if the user clicks/taps the close button , it would propagate to the previous page if there was any.

Also it might cause a problem when the user taps the back button on the mobile since there was no history change when the popup was opened, it would again take the user back to the previous page rather than closing the popup, which would be incorrect behaviour.

Instead of changeHash if we use transition it would work like a dialog and let the hash change the history too.

@Vincentp have you tried removing the changeHash property from the 'changePage' call, now that you are using transition ?

$("#my-dialog-button").click(function () {
    var default_transition = "pop";
    $.mobile.changePage("page_containing_the_dialog.html", {
        role : 'dialog',
        transition: $(this).data('transition') || default_transition
    });
    return false;
});

Answer 4

Don't know why, but Jasper example doesn't work when I try integrating it too.

I was using data-* attributes on the button for configuring the dialog box.

Now I declare all the options in the changePage function, and it works fine.

<a href="#" data-role="button" id="#my-dialog-button"></a>

---

$("#my-dialog-button").click(function() {
    $.mobile.changePage( "page_containing_the_dialog.html", {
        type: "get",
        transition: 'pop',
        role: 'dialog',
        changeHash : false
    });
});