오늘 직장에서 프로젝트 이름을 선택한 후 ajax를 사용하여 페이지의 회사 이름을 읽는 데 문제가 발생했습니다. 그러나 페이지가 로드된 후에 jqtransform이 호출되므로 회사 이름 드롭다운 상자에 최신 데이터가 표시되지 않습니다.
<link rel="stylesheet" href="${ctx}/jqtransformplugin/jqtransform.css" type="text/css"></link> <br /><script type="text/javascript" src="${ctx}/jqtransformplugin/jquery.jqtransform.js"></script> <br /><SCRIPT type="text/javascript"> <br /> $(function(){ <br /> $('form').jqTransform({imgPath:'images/JQueryformimg/'}); <br /> }); <br /></SCRIPT>
firebug를 사용하면 데이터가 실제로 스플라이싱된 것을 볼 수 있지만 페이지가 로드된 후 양식에서 jqTransform 메서드를 호출했으며 jqTransformSelectWrapper의 ul 데이터가 업데이트되지 않았습니다. 오랜 고민 끝에 간단하고 투박한 방법으로 ul을 업데이트하기로 결정했습니다.
function companyAjax(proid){ <br /> $.ajax({ <br /> type:"POST", <br /> <a href=""${pageContext.request.contextPath}/recordsearch/ajax/getCompanyAjax.do">url:"${pageContext.request.contextPath}/recordsearch/ajax/getCompanyAjax.do</a>", <br /> dataType:"json", <br /> data:{proid : proid}, <br /> success:function(jsondata){ <br /> var tmp=''; <br /> tmp+='<select id="centerid" name="centerid" onchange="comChange()" style="width: 160px;" name="centerid">'; <br /> //$("#centerid").empty(); tmp+='<option value="">--请选择--</option>'; <br /> for(var i=0;i<jsondata.length;i++){ <br /> tmp+='<option value="'+jsondata[i].centerid+'">'+jsondata[i].centername+'</option>'; <br /> } <br /> tmp+='</select>'; <br /> $("#centerid").parent().remove(); <br /> $("#comLable").after(tmp); <br /> $("#centerid").jqTransSelect(); <br /> } <br /> }); <br /> }
ㅎㅎ, 회사 데이터를 ajax로 쿼리한 후 jqtransform으로 생성된 select 관련 div를 삭제하고 select를 splice한 후 select를 다시 초기화하세요. 그 방법은 다소 멍청하지만 지금은 이 방법을 사용하고 나중에 더 좋은 방법을 찾아보겠습니다.
멋지지 않나요? . ㅎㅎ 사실 jqtransform이 더 강력해서 나중에 비슷한 효과를 사용해야 한다면 참고하시면 될 것 같아요.