I encountered a problem when I was working today. The company name on the page is read using ajax after selecting the project name. However, jqtransform is called after the page is loaded, so the company name drop-down box cannot display the latest data.
<link rel="stylesheet" href="${ctx}/jqtransformmplugin/jqtransform.css" type="text/css"></link> <script type="text/javascript" src="${ctx}/jqtransformmplugin/jquery.jqtransform.js"></script>
<SCRIPT type="text/javascript">
$(function(){
$('form').jqTransform({imgPath:'images/JQueryformimg/'});
});
</SCRIPT>
Using firebug, you can see that the data has actually been spliced, but form has called the jqTransform method after the page is loaded, and the ul data in jqTransformSelectWrapper has not been updated. After thinking for a long time, I decided to update the ul in a simple and crude way.
function companyAjax(proid){ $.ajax({
type:"POST",
url:"${pageContext.request.contextPath}/recordsearch/ajax/getCompanyAjax.do",
dataType:"json",
data:{proid:proid},
success:function(jsondata){
var tmp='';
tmp+='<select id="centerid" name="centerid" onchange="comChange()" name="centerid">';
//$("#centerid").empty(); tmp+='<option value="">--Please select-</option>';
for(var i=0;i<jsondata.length;i++){
tmp+='<option value="'+jsondata[i].centerid+'">'+jsondata[i].centername+'</option>';
}
tmp+='</select>';
$("#centerid").parent().remove();
$("#comLable").after(tmp);
$("#centerid").jqTransSelect();
}
});
}
Haha, after ajax querys the company data, delete the select-related div generated by jqtransform, then splice the selct, and then re-initialize the select. The method is stupid, but let's use it first, and there is a better way to talk about it in the future.
Isn't it cool? . Haha, in fact, jqtransform is more powerful. If you need to use similar effects in the future, you can refer to it.