JQuery Mobile Pop-up dialog box does not refresh the original page, keep the original page content unchanged

When developing a mobile application using jquery Mobile, a dialog box pops up on one page, closes the dialog box, and finds that the original page is refreshed. If there are some data that has been selected or filled out on the original page, the data will be lost. At this time, you need to do some processing of the return button of the dialog box, so that the page returned to the dialog box parent page in the pop-up dialog box on duty status.

The button for the pop-up dialog box is generally written as follows:

<a href= "/dialogs/mydialog.htm" data-role= "button" data-rel= "dialog" data-transition= "Pop" > Pop-up dialog Box </a>

The return button for the dialog page is as follows:

<a href= "~/home/index" data-icon= "Back" data-role= "button" > Return list </a>

In this way, when returned, the data on the index page is lost because of the refresh.

Especially when the index page needs to click on the button to load the list data by Ajax, click to return to close the dialog box, Ajax loaded list of data lost, very headache.

By searching on the StackOverflow website, you find the answer. The workaround is simple: Change the "Back" button on the dialog page to the following methods:

<a href= "~/home/index" data-icon= "Back"onclick= "$ ('. Ui-dialog '). Dialog (' Close '); data-role= "button" > Return list </a>

Special attention needs to be paid to onclick= "$ ('. Ui-dialog '). Dialog (' Close '); returns false;", after which the page hosting the dialog box is returned to its original state. "This is to prevent browser default behavior, that is, hyperlinks do not jump"

Post Address: Http://stackoverflow.com/questions/10286562/jquery-mobile-closing-dialog-reloads-calling-page

Important additions:

Later I did several experiments found that to keep the original page (the dialog box's parent page) content unchanged, the original page needs to be fully loaded , that is, to jump to the dialog box parent page connection to add data-ajax= "false" attribute. In this way, the parent page of the dialog box is loaded completely, and the contents of the parent page are unchanged when the dialog page is closed.