JQueryMobile: SelectWidget not showing after second page visit

问题

First off: I beg your pardon, I am a bit of a newbie to JQueryMobile and I could not find an answer to my question:

On iOS and Android my JQueryMobile app (JQM 1.4.5 and JQ 1.11.3) features a selectWidget on the first page of a multi-page app (index.html):

<select name="type[]" id="type" multiple="multiple" data-native-menu="false">
  <!-- options -->
</select>

It behaves correctly, nicely styled, during the first time the page is called. So far all ok.

Now, the footer contains a navbar which all other pages have as well, containing a link back to the index page:

<a href="index.html" data-icon="home" data-transition="flip">Home</a>

So, when I navigate to any other page and then come back to the index.html using the link in the navbar, the selectWidget on the index.html does not fire anymore. I tested navigating back to index.html using a JQM "back" button in the header, and then the selectWidget works. It just does NOT work when I navigate to the index.html page using a link (link in the navbar) other than a JQM "back" button.

Can you please hint me in the right direction? What am I missing? How can I make the selectWidget work on subsequent page calls? Again, I apologize if I am not precise enough or don't express myself proficiently.

回答1:

Issue description:

As Omar points out in his comment, for single page models the first JQM page is duplicated in the DOM under the following conditions:

The url used to request the page is yoursite.com/ and not yoursite.com/index.html
The attribute data-url="" (link to API) has not been set, or has been set incorrectly

The duplication occurs when navigating to the first page from another JQM page.

Example: See the two files index.html and index2.html under.

index.html contains a selectmenu and a navigation button that points to index2.html.

index2.html contains only a button to navigate back to index.html (Note that this is an anchor tag with href to index.html, the attribute data-rel="back" is not used.)

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="main" class="ui-content">
    <p>Page 1 content</p>
    <select name="type[]" id="type" multiple="multiple" data-native-menu="false" data-inline="true" >
      <!-- options -->
      <option>Select...</option>
      <option value="1">Audi</option>
      <option value="2">BMW</option>
      <option value="3">Ford</option>
    </select>
    <a href="index2.html" data-role="button" data-inline="true" data-icon="star">Page 2</a>
  </div>
</div> 
</body>
</html>

index2.html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="main" class="ui-content">
    <p>Page 2 content</p>
    <a href="index.html" data-role="button" data-inline="true" data-icon="home">Home</a>
  </div>
</div> 
</body>
</html>

These files are also available here: https://www.elitesystemer.no/demo/JQMduplication/

To reproduce the issue, do the following:

Store the two files in the same folder somewhere
Navigate to the folder, do not specify index.html in the URL
Click the selectmenu and confirm it works
Click the page 2 button and confirm that index2.html is loaded
Click the Home button and confirm that index.html is loaded again
Click the selectmenu. It will not open.

Now examine the DOM (the F12 key in most browsers). There will be one page with the attribute (in the case of the URL above) data-url="/demo/JQMduplication/" and a second page with the data attributes data-url="/demo/JQMduplication/index.html" and data-external-page="true".

Fix

To correct this behaviour and avoid page duplication, use the data attribute data-url to provide a correct URL, instead of the url used to request the page, e.g: data-url="/path/index.html"

Example: A correct index.html as in the example above will be:

<div data-role="page" data-url="/demo/test/index.html">
  <div data-role="main" class="ui-content">
    <p>Page 1 content</p>
    <select name="type[]" id="type" multiple="multiple" data-native-menu="false" data-inline="true" >
      <!-- options -->
      <option>Select...</option>
      <option value="1">Audi</option>
      <option value="2">BMW</option>
      <option value="3">Ford</option>
    </select>
    <a href="index2.html" data-role="button" data-inline="true" data-icon="star">Page 2</a>
  </div>
</div>

来源：https://stackoverflow.com/questions/36168027/jquerymobile-selectwidget-not-showing-after-second-page-visit

标签

jquery-mobile