什麼會導致動態加載（長列表）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中。問題是，現在當我點擊按鈕時，它會在頁面中間彈出一秒鐘，然後重新加載整個頁面。我能做些什麼以免重新加載頁面？

來源

2017-10-20 Brian bcr666 Ray

此行爲是故意的：如果生成的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'...因此，這比工作流問題更像一個編碼問題。

來源

2017-10-20 07:08:40 deblocker

什麼會導致動態加載（長列表）JQM自定義選擇菜單按鈕來重新加載頁面？

回答

相關問題