Long blocking operation when loading page from a page with a form

rodcloutier commented 11 years ago

Using the JQM 1.3 version, I have the following behaviour occurring.

Load an external page (does not occur with embedded page) that contains a form with many form elements. From that form page, load another page (in this case a dialog to easily show that no interaction is possible). The loaded page cannot be interacted with (ie cannot close the dialog). You have to wait a few seconds. This does not occur with version 1.2.1.

The wait time seems to be proportional to the amount of element the form contains (in my app it can take up to 16 seconds).

Since it involves an external page, I couldn't write a fiddle. Here are the content of the two files involved.

Index.html

<html lang="en" >
  <head>
    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css">
    <script src="https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter-standalone.js" type="text/javascript"></script>
  </head>
  <body ng-app='ngm'>

    <div id="main" data-role="page">
      Click the following link <a href="/formpage.html">Show Form Page</a>
    </div>

    <div id="dialog" data-role="dialog">
      <div data-role="header"> <h1>Dialog</h1> </div>
    </div>

  </body>
  <script>
    var mod = angular.module("ngm", []);
  </script>
</html>

formpage.html

<div id="formpage" data-role="page">
  <div data-role="content">
    Click the following link to show the
    <a href="/#dialog">Dialog</a>.
    <br>
    Observe that the dialog cannot be dimissed immediately.
    Commenting out the form will make allow the dialog to respond.

    <form>
      <ul data-role="listview" data-inset="true">
        <!-- ng-repeat used as a convenience, the expanded
           version will show the same behaviour.
           The more element is added the longer the way
           in the dialog
        -->
        <li ng-repeat="i in [0,1,2,3,4,5]">
          <fieldset class="ui-grid-a">
            <div class="ui-block-a" style="width:97%">
              <div data-role="fieldcontain">
                <label for="id_1 class="select">{{$index}}</label>
                <select name="id_1" id="id_1"></select>
              </div>
            </div>
          </fieldset>
        </li>
      </ul>
    </form>
  </div>
</div>

tbosch commented 11 years ago

Thanks a lot! This really was a performance problem introduced by me since v1.2.0 of the adapter. Used the Chrome timeline for debugging, Chrome Developer Tools are really great!

Tobias

rodcloutier commented 11 years ago

That's also how I confirmed that there was a problem.

Thanks for all the quick response on the issues. — Sent from Mailbox for iPhone

On Sat, Mar 16, 2013 at 10:34 AM, Tobias Bosch notifications@github.com wrote:

Thanks a lot! This really was a performance problem introduced by me since v1.2.0 of the adapter. Used the Chrome timeline for debugging, Chrome Developer Tools are really great!

Tobias

Reply to this email directly or view it on GitHub: https://github.com/tigbro/jquery-mobile-angular-adapter/issues/141#issuecomment-15005734

opitzconsulting / jquery-mobile-angular-adapter

Long blocking operation when loading page from a page with a form #141

Tobias