How to prevent auto-closing in jquery mobile dialog

Question

I am trying to use Jquery Mobile's dialog. On the documetnation, it says that diaglog would be closed if a user clicks any links on a dialog page.

Documentation:

"When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open. This pattern of linking to the previous page is also usable in non-JS devices as well."

How do I prevent it?

Answer 1

Don't use an <a> tag, use a <div>

<div id="my_button" data-role="button" data-theme="a">Don't Close</div>

Then you just have to programmatically attach some actions to the clicking of that div

$('#my_button').live('click', function({
    // do something
}

Answer 2

If you add a function to onclick, that will override the default behavior. Just leave href="#" in the tag, put the function like onclick="myFunction()" and you should be good.

Then in the function you can do the close with this: $('.ui-dialog').dialog('close')

Or you can obviously navigate to another page with: $.mobile.changePage('#page')

I'm sure you've moved on by now, but hopefully this can help someone else looking for this solution.

Answer 3

wom's solution is good, but you don't need to change from tag to . You just need to change href like href="#" as Mar said. I have test like this, it works fine.

And if still can't prevent default action, add e.preventDefault() on button's click handler.