How to close and apply jQuery Mobile modal Dialog?

Question

I am showing a dialog using jquery mobile alpha 4 with ajax, for example:

Inside the succes callback:

success: $j('#wchkdiv').html(msg); $j("#wchkdiv").dialog(); $.mobile.changePage($('#wchkdiv'), 'pop', false, true); 

Above the code makes the dialog nicely transition to its appearance when any text on the html page (and not the anchor tag) is clicked on it, with which the javascript binds the click event.

Now in the dialog box there is code:

 <form id="gform" name="gform" class="formbody" method="post"> <input class="btns" type="button" onclick="return wchkSubmit(event,'tryAgain');" name="tryAgain" value="Try Again"/> </form> 

When the Try Again button is clicked, I have to process it through javascript, which should close the dialog box (by the way, what it needs to do), and the content page that was shown before the dialog box displays now displays again. This means that it should not cause the page to reload, and the dialog should not be part of the browsing history.

It would be another big plus if you could show me how I can make jquery mobile Dialog appear on a part of the screen overlaid on an html page with the html page content darkened or some kind of transparency effect? Dialog currently occupies the entire screen.

Answer 1

Live example: http://jsfiddle.net/ReMZ6/4/

HTML

 <div data-role="page" data-theme="c" id="page1"> <div data-role="content"> <p>This is Page 1</p> <button type="submit" data-theme="a" name="submit" value="submit-value" id="submit-button-1">Open Dialog</button> </div> </div> <div data-role="page" data-theme="a" id="page2"> <div data-role="content"> <p>This is Page 2</p> <button type="submit" data-theme="e" name="submit" value="submit-value" id="submit-button-2">Close Dialog</button> </div> </div> 

Js

 $('#submit-button-1').click(function() { $.mobile.changePage($('#page2'), 'pop', false, true); }); $('#submit-button-2').click(function() { alert('Going back to Page 1'); $.mobile.changePage($('#page1'), 'pop', false, true); }); 

Answer 2

Closest to what you're looking for is probably jtsage jquery-mobile-simpledialog

http://dev.jtsage.com/#/jQM-SimpleDialog/

HTML:

 <p>You have entered: <span id="dialogoutput"></span></p> <a href="#" id="dialoglink" data-role="button">Open Dialog</a> 

JavaScript:

 $('#dialoglink').live('vclick', function() { $(this).simpledialog({ 'mode' : 'string', 'prompt' : 'What do you say?', 'buttons' : { 'OK': { click: function () { $('#dialogoutput').text($('#dialoglink').attr('data-string')); } }, 'Cancel': { click: function () { return false; }, icon: "delete", theme: "c" } } }) }) 

Answer 3

I found that $('.ui-dialog').dialog('close'); works to close the dialog through JS.

And, $.mobile.changePage('#pageID', {transition: 'pop', role: 'dialog'}); to display the POP dialog.

Answer 4

I'm not sure I fully follow what you are trying to do, but to close the dialog through javascript you only need to call:

 $j("#wchkdiv").dialog('close'); 

How to make a popup dialog on the same “page”, I assume that you mean the behavior of jQM select lists? If this is so, as far as I know, this is impossible - for this purpose I actually wrote my own version of the dialogue, the demo can be found here: http://dev.jtsage.com/jQM-SimpleDialog/

If I completely missed this question, please let me know and I will see if I can add understanding.