ajax同步非同步的坑
阿新 • • 發佈:2019-01-07
以上是動態載入html方法function companyValueULHtml(){ var faxhtml =''; var tel = ''; faxhtml += '<select style="width:100px;height:30px;" id="companyfaxcountrycode" name="companyfaxcountrycode" function="changeCompanyFaxCountry()">' //獲取國碼 $.ajax({ type : 'post', url : '<s:url value="/countryCodeAction_getAjaxCountryCodeList.action"/>', async:false,///設定同步請求完後在執行
dataType : 'json', error : function(XMLHttpRequest, textStatus, errorThrown) { ErrorReminder(XMLHttpRequest); //請求錯誤提示 }, success : function(data) { for(var index in data){ var country = data[index]; var countryName = country.countryName; countryCode = country.countryCode; countryNameKey = country.countryNameKey; //console.log(JSON.stringify(country)); if (index == 0){ //預設選擇第一個 faxhtml += '<option value="'+countryCode+'" selected="selected">'+countryName+'</option>'; tel += '<option value="'+countryCode+'" selected="selected">'+countryName+'</option>'; mobilecountrycode = countryCode; //驗證行動電話 telcountrycode = countryCode; //驗證固定電話 faxcountrycode = countryCode; //驗證傳真 } else{ faxhtml += '<option value="'+countryCode+'">'+countryName+'</option>'; tel += '<option value="'+countryCode+'">'+countryName+'</option>'; } } faxhtml +='</select>'; var theHtml = ''; theHtml += '<li class="customercountrycodeli"><span><p>'; theHtml += '公司傳真:'; theHtml += '</p></span>'; theHtml += faxhtml + '<input name="edcustomercompanyfax" id="companyfax" />'; theHtml += '</li>'; theHtml += '<li><span><p>'; theHtml += '公司主頁:'; theHtml += '</p></span>'; theHtml += '<input name="edcustomercompanyweb" id="companyweb" >'; theHtml += '</li>'; theHtml += '<li><span><p>'; theHtml += '<s:text name="1446711635441683">註冊編號</s:text>:'; theHtml += '</p> </span>'; theHtml += '<input name="edcustomercompanynumber" id="companynumber" class="companynumber" >'; theHtml += '</li>'; theHtml += '<li><span style="display:inline;"><p>'; theHtml += '<s:text name="1446711635521769">註冊時間</s:text>:'; // theHtml += '</p></span><div class="date" style="display:inline;position:relative;"><input id="timespan" onclick="'+"WdatePicker({skin:'whyGreen',el:'edcustomerbeginningdate',dateFmt:'yyyy-MM-dd'})"+'" name="edcustomerbeginningdate" ></input><img style="position: absolute;" src="images/date1.png" onclick="'+"WdatePicker({skin:'whyGreen',el:'edcustomerbeginningdate',dateFmt:'yyyy-MM-dd'})"+'"/>'; theHtml += '</p></span><div class="date" style="display:inline;position:relative;"><input id="timespan" disabled="disabled"></input><img style="position: absolute;" src="images/date1.png" id="edcustomerbeginningdateimg"/>'; theHtml += '<input type="hidden" name="edcustomerbeginningdate" id="timehide"/>'; theHtml += '</div></li>'; if(tax_rate == 1){//稅率GST theHtml += '<li><span><p>'; theHtml += '<s:text name="1469600830924705">GST編號</s:text>:'; theHtml += '</p> </span>'; theHtml += '<input name="edcustomergstno" id="gstno" >'; theHtml += '</li>'; //先隱藏掉 之後在改 } //$("#ctelcountrycode").html(tel); //$("#ctelcountrycode").append(tel); //$("#ctelcountrycode").styleSelect({styleClass:"selectDark"});//樣式 $("#changeValueUL").html(theHtml); $.parser.parse($("#changeValueUL")); $("#companyfaxcountrycode").styleSelect({styleClass:"selectDark"});//樣式 bindingcompanyCInfoVer(); //繫結客戶 在去驗證 //companyValueValidation_on();//開啟驗證 } }); }
//構建 公司客戶資訊框
function companyCustomerInfo(customerdata){
//debugger;
companyValueULHtml();//構建html
bindingcompanyCInfoVer();
//設定資訊驗證}
在此方法呼叫// 根據customer 型別構造資訊表單 function customerTypeInfochange(type_flag,customerdata){ if(theEditFlag == 'addc'){ $('#edaccountbirthdayimg').css("right","12px"); $('#edaccountbirthdayimg').css("top","8px"); edaccountbirthdayimgdatadiv.css("left",""); } if(type_flag == 1){//ycw:大客戶 and 公司客戶 $('#customereditmenudiv').css("height",getHeight(660,100)); $('#changeValueUL').show(); document.getElementById("customerNameP").innerHTML = '<s:text name="1446711635481558">公司名稱</s:text>:'; //客戶姓名提示相關 $("#customerprompt").css("display","none"); if(theEditFlag == 'addc'){ $('.accountNameLi').show(); $('#firstname').verification('enableValidation'); //啟動輸入框驗證 $('#secondname').verification('enableValidation'); //啟動輸入框驗證 $('#accountfaxLi').hide(); /* var theLI = document.getElementById("accountmobleTelLi"); theLI.innerHTML =accountMoblieliHtml(); $.parser.parse(theLI); */ //accountMoblieliHtml(); $('#accountmobleTelLi').show(); creatajaxDateValidate('mobile','mobile','mobile',true,ajaxDateValidateUrl,"accountmobile"); $('#mobile').verification('enableValidation'); //啟動輸入框驗證 $('#mobile').verification('setajaxDefultval',''); //設定當前值 //$("#mobilecountrycode").styleSelect({styleClass:"selectDark"}); } companyCustomerInfo(customerdata); }}
然後通過select標籤選擇型別的時候進行出發
//客戶型別選擇變更執行方法 改變對應的客戶型別動態屬性ul
function customerTypeSelChange(option,customerdata){
$.ajax({
type : 'post',
url:'<s:url value="customerType_ajaxGetCustomerType.action"/>?Typeid='+option,
dataType : 'json',
success : function(data){
var theUl = document.getElementById("changeValueUL");
var childs = theUl.childNodes;
for ( var i = childs.length - 1; i >= 0; i--) {
theUl.removeChild(childs[i]);
}
customertypeflag = data.customertypeflag;
/************私人使用者,學生******去掉電話**************2016-12-30*******************************************************************/
if(data.customertypeflag == 3 || data.customertypeflag == 2){
$('#companytel').verification('disableValidation'); //停止輸入框驗證
$('#companyfax').verification('disableValidation'); //停止輸入框驗證
//$('#companyfax').removeClass("verification-invalid");
$('#companytel').val("");
$('#telli').css({"display":"none"});
}else{
$('#companytel').verification('enableValidation'); //啟動輸入框驗證
$('#companyfax').verification('enableValidation'); //啟動輸入框驗證
//$('#companyfax').removeClass("verification-invalid");
//$('#companyfax').addClass("verification-invalid");
$('#telli').css({"display":"block"});
}
/*********************************************************2016-12-30***********************************************************/
customerTypeInfochange(data.customertypeflag,customerdata);
}
});
}
主要原因是 當頁面載入時第一次 companyValueULHtml()
非同步載入時 沒載入完返回結果接跳過了~ 查看了一下~居然迴圈2次結果,當你設定debugger; 或者alert 時 就會出現回填companyCustomerInfo(customerdata)
此方法才真正獲取到companyValueULHtml()
非同步的html元素~ 所以 需在companyValueULHtml()
方法裡面ajax請求設定同步請求~ 意思是ajax同步完後再去執行以下操作。