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

问题描述：

我有一个自定义jQM选择菜单。当页面加载时，有一个“占位符”选项。什么会导致动态加载（长列表）JQM自定义选择菜单按钮来重新加载页面？

<select id="rfa-select-issues" data-native-menu="false" data-mini="true"> 
    <option data-mini="true">Select one or more</option> 
</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中。问题是，现在当我点击按钮时，它会在页面中间弹出一秒钟，然后重新加载整个页面。我能做些什么以免重新加载页面？

答

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

恕我直言，JQM的人通过试图在所有浏览器中保持兼容性和一致的行为做了很好的工作，所以我觉得我应该相信默认的JQM行为，这是为了良好的整体向后兼容性，而且移动设备的屏幕尺寸越小，可用性越好。

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

这里是一个片段：

$.widget("mobile.selectmenu", $.mobile.selectmenu, { 
 
    _decideFormat: function() { 
 
    var self = this; 
 
    self.menuType = "overlay"; 
 

 
    self.listbox.one({ 
 
     popupafteropen: $.proxy(this, "_focusMenuItem") 
 
    }); 
 
    } 
 
});

<!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>

正如你看到的，超越popup整个页面的大小时，并滚动。

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

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

相关推荐