動態加載select內容 不顯示 error

最近在做jqm開發過程中需要做一個地址選擇器,做成異步加載形式。在web瀏覽器下一切正常,可是一放到手機上需要異步加載的數據總是獲取不到,急呀。
html部分代碼

<div data-role="fieldcontain">
<label for="province" class="select">省</label>
<select name="stateProvinceGeoId" id="province" data-native-menu="false">
<option value="">請選擇:</option>
<#list provinceGeoList?if_exists as provinceGeo>
<option value="${provinceGeo.geoId?if_exists}"
<#if provinceGeo.geoId==(postalAddress.stateProvinceGeoId)?default("")>selected</#if> >${provinceGeo.geoName}</option>
</#list>
</select>
</div>
<div data-role="fieldcontain">
<label for="city" class="select">市</label>
<select name="cityGeoId" id="city" data-native-menu="false">
<option value="">請選擇:</option>
</select>
</label>
</div>

<div data-role="fieldcontain">
<label for="county" class="select">顯:</label>
<select name="countyGeoId" id="county" data-native-menu="false">
<option value="">${uiLabelMap.PleaseChoose}</option>
</select>
</div>
======================================================================
js部分代碼
$("#province").change(function() {
var provinceValue = $("#province").val();
var city = $("#city");
getGeoSelect("PROVINCE", provinceValue, city);
var county = $("#county");
county.empty();
$("<option value=''>${uiLabelMap.PleaseChoose} </option>").appendTo(county);
county.selectmenu("refresh");
});

$("#city").change(function() {
var cityValue = $("#city").val();
var county = $("#county");
getGeoSelect("CITY", cityValue, county);
});

function getGeoSelect(geoTypeParameter, geoIdParameter, oSelect) {

$.ajax({
url:"<@ofbizUrl>getgeo</@ofbizUrl>" ,
type:"GET",
data:"geoTypeParameter="+geoTypeParameter+"&geoIdParameter="+geoIdParameter,
contentType: "application/json",
success:function (data,status){
alert(status);
$.each(data.geoList, function(i, item) {
var optionKeyValue = "<option value=" + item.geoId + ">" + item.geoName + "</option>";
$(optionKeyValue).appendTo(oSelect);
});
oSelect.selectmenu("refresh");
},
error:function (){
alert("error");
}
});
}
以上代碼在瀏覽器中執行沒有問題,但是一到手機上就獲取不到數據, 異步請求後error函數總是執行,百思不得其解。無奈只好逛論壇了,終於有所收穫呀。
http://forum.jquery.com/topic/dynamically-generated-listview在這個帖子裏我找到了解決的辦法。

I solved this by doing an synchronous load using the .ajax() method instead, otherwise refreshing the listview will not work because it is not loaded (if done async)


Here's some sample code which worked for me.


$.ajax({ url: "get-new-list-url.php",
async: false,
success: function(data) {
//alert("Loaded content...");
$("#isearch-results").html(data);
$("#search-results-list").listview("refresh");
},
error: function(response, error) {
//alert("Error: " + response + " : " + error)
$("#search-results").html("Unable to load search results.");
}
});


Hope that helps..

根據這個我把我的ajax請求加上async: false, 問題終於解決了。
浪費這麼久時間就爲了這一句話呀.....無語 留存記錄以備後用。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章