Question

我有一个自定义的jQM选择菜单。页面加载时，有一个＆＃34;占位符＆＃34;选项。

<select id="rfa-select-issues" data-native-menu="false" data-mini="true">
    <option data-mini="true">Select one or more</option>
</select>

单击SELECT按钮会导致显示弹出列表的预期行为。我有一些脚本可以在用户在文本字段中输入数据时动态加载信息。

$("#bws-bipad").on("change", function() {
    var value = $("#bws-bipad").val();
    if (value) {
        value = value.trim();
        $.ajax({
            url: "<c:url value="/issues/bipad/" />" + value,
        })
        .then( function ( response ) {
            if (response.status == 200) {
                $("#rfa-select-issues").empty(); 
                var html = "<option data-mini='true'>Select one or more</option>";
                $(html).appendTo("#rfa-select-issues");
                $.each( response.message, function ( i, issue ) {
                    var year = ("0000" + issue.year).slice(-4);
                    var addon = ("00" + issue.addon).slice(-2);
                    html = "<option id=" + issue.id + " data-mini='true'>" + year + " - " + addon + "</option>";
                    $(html).appendTo("#rfa-select-issues");
                });
                $("#rfa-select-issues").selectmenu('refresh', true);
            } else {
                $("#rfa-select-issues").empty(); 
                var html = "";
                $.each( response.errors, function ( code, message ) {
                    html = "<option id=" + code + " data-mini='true'>" + code + " - " + message + "</option>";
                    $(html).appendTo("#rfa-select-issues");
                });
                $("#rfa-select-issues").selectmenu('refresh', true);
            }
            $.mobile.loading('hide');
        });
    }
});

当它命中response.status！= 200时，会在selectmenu中加载一条错误消息，然后单击该按钮会按预期工作。当它得到一个好的响应（response.status == 200）时，会有很长的项目列表。我已经验证了它被加载到dom中。问题是，现在当我点击按钮时，它会在页面中间弹出一秒钟，然后重新加载整个页面。我该怎么办才能重新加载页面呢？

Answer 1

此行为是故意的：如果生成的listview高于窗口大小，则JQM会自动添加一个新页面，该页面充当该长列表的容器。

恕我直言的JQM人员通过尝试在所有浏览器中保持兼容性和一致行为做得很好，所以我觉得我应该相信默认的JQM行为，这种行为旨在实现良好的整体向后兼容性，优雅地降级，移动设备中屏幕尺寸更小，可用性更强。

如果您不想要默认的JQM行为，您可以覆盖内部_decideFormat函数，并对该强制，非常长的弹出窗口的可用性进行一些实验。

这是一个片段：

＆＃13;

$.widget("mobile.selectmenu", $.mobile.selectmenu, {
  _decideFormat: function() {
    var self = this;
    self.menuType = "overlay";

    self.listbox.one({
      popupafteropen: $.proxy(this, "_focusMenuItem")
    });
  }
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.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" id="page-list">
    <div data-theme="a" data-role="header" data-position="fixed">
      <h3>List Page</h3>
    </div>
    <div data-role="content">
      <div class="ui-field-contain">
        <label for="select-custom-24">Multiple, icon left, long list:</label>
        <select name="select-custom-24" id="select-custom-24" data-native-menu="false" multiple="multiple" data-iconpos="left">
          <option>Choose options</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA" selected="selected">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL" selected="selected">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA" selected="selected">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
      </ul>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
      <h3>Footer</h3>
    </div>
  </div>
</body>

</html>

＆＃13;

如您所见，popup之外的整个页面已调整大小并滚动。

关于弹出窗口的调整大小，没有开箱即用的解决方案，因为您异步刷新内容：....then( function ( response ) ... .selectmenu('refresh'...所以这是一个工作流问题而不是编码问题

什么会导致动态加载（长列表）JQM自定义选择菜单重新加载页面？

1 个答案: