Jquery Mobile 1.4.3 dialog display incorrect (the from page display dialog content) when press back button

Jquery Mobile 1.4.3 dialog display incorrect (the from page display dialog content) when press back button

JQuery mobile dialog display incorrect after pressed back button.

  1. First time run

  2. Click open dialog button

  3. Clicked back button 

  4. Click open dialog button again 

The dialog page content will copied to the from page after clicked back button. This will happen after added jquery-ui. It seems there is conflict between jquery mobile dialog and jquery ui. Or it will be normal if the dialog content is just several lines only.

Here is my code: 

1.From Page


  2. @{ 
  3.    Layout = null;
  4. }

  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10.     <meta charset="utf-8" />
  11.     <title>@ViewBag.Title</title>
  12.     <meta name="viewport" content="width=device-width" />

  14.     <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
  15.     <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />

  17.     @*
  18.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>*@
  19.     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  21.     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  22.     <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
  23. </head>
  24. <body>
  25.     <div data-role="page" class="jqm-demos" data-quicklinks="false" id="page1" style="height:600px">
  26.         <div data-role="header" class="jqm-header">
  27.             <h2>
  28.                 Test
  29.             </h2>
  30.         </div><!-- /header -->

  32.         <div role="main" class="ui-content jqm-content" id="mainContent">
  33.             @using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "form10" }))
  34.             {
  35.             <div data-role="controlgroup" data-type="horizontal" data-mini="true">
  36.                 <a href='@Url.Action("TestDialogPage", "Test")' class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">Open dialog</a>
  37.             </div>

  39.             }


  42.         </div><!-- /content -->

  44.     </div>
  45. </body>
  46. </html>

  48. <script>
  49.     $(document).on("mobileinit", function () {
  50.         $.mobile.ajaxEnabled = false;
  51.     });

  53. </script>


  • 2.Dialog Page


  •
    2.    @{
    3.   ViewBag.Title = "Test Dialog";
    4.     ViewBag.Save = "Save";
    5.     ViewBag.Back = "Back";
    6.     Layout = null;
    7. }

    9. <!DOCTYPE html>

    11. <html>
    12. <head>
    13.     <meta name="viewport" content="width=device-width" />
    14.     <title>Test Dialog</title>
    15. </head>
    16. <body>
    17.     @*<div id="TestInfoDialog" data-role="dialog">*@

    19.     <div id="TestInfoDialog" data-role="page" data-dialog="true">
    20.         <div data-role="header" data-position="fixed">
    21.             <a data-rel="back" data-icon="back">@ViewBag.Back</a>
    22.             <h2>@ViewBag.Title</h2>
    23.         </div>

    25.         <div class="ui-content" role="main">
    26.             <form id="TestInfoForm">
    27.                 <div>
    28.                     @Html.Label("test1")
    29.                     @Html.TextBox("test1")
    30.                     @Html.Label("test1")
    31.                     @Html.TextBox("test1")
    32.                     @Html.Label("test1")
    33.                     @Html.Label("test1")
    34.                     @Html.Label("test1")
    35.                     @Html.TextBox("test1")
    36.                     @Html.Label("test1")
    37.                     @Html.TextBox("test1")
    38.                     @Html.Label("test1")
    39.                     @Html.Label("test1")
    40.                     @Html.Label("test1")
    41.                     @Html.TextBox("test1")
    42.                     @Html.Label("test1")
    43.                     @Html.TextBox("test1")
    44.                     @Html.Label("test1")
    45.                     @Html.Label("test1")
    46.                     @Html.Label("test1")
    47.                     @Html.TextBox("test1")
    48.                     @Html.Label("test1")
    49.                     @Html.TextBox("test1")
    50.                     @Html.Label("test1")
    51.                     @Html.Label("test1")
    52.                 </div>
    53.             </form>
    54.         </div>

    56.     </div>
    57. </body>
    58. </html>

    Thanks

    Wilson