什么会导致动态加载（长列表）JQM 自定义选择菜单按钮重新加载页面？
What would cause a dynamically loaded (long list) JQM Custom selectmenu button to reload the page?
我有一个自定义的 jQM select 菜单。页面加载时，有一个 "place holder" 选项。
<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 时，会在 select 菜单中加载一条错误消息，单击按钮会按预期工作。当它得到良好的响应时 (response.status == 200)，将会放入一长串项目。我已经验证了 s 已加载到 dom 中。问题是，现在当我点击按钮时，它会在页面中间弹出一秒钟，然后重新加载整个页面。我该怎么做才能不重新加载页面？
此行为是故意的：如果生成的 listview 大于 window 大小，则 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 select 菜单。页面加载时，有一个 "place holder" 选项。
<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 时，会在 select 菜单中加载一条错误消息，单击按钮会按预期工作。当它得到良好的响应时 (response.status == 200)，将会放入一长串项目。我已经验证了 s 已加载到 dom 中。问题是，现在当我点击按钮时，它会在页面中间弹出一秒钟，然后重新加载整个页面。我该怎么做才能不重新加载页面？
此行为是故意的：如果生成的 listview 大于 window 大小，则 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'...所以这更多是工作流问题而不是编码问题.