动态加载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, 问题终于解决了。
浪费这么久时间就为了这一句话呀.....无语  留存记录以备后用。
 

你可能感兴趣的:(JQM)