：jquery插件jquery-ui-1.8.18.custom.min.js弹框数据丢失)
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。
第一次使用jqueryUI嵌入到系统中，jquery-ui-1.8.18.custom.min.js这个插件可以把一个div封装成一个弹出框，不用window.open()这种纯dom方式，使得代码编写更加简单易懂，但是我使用的这个版本有点问题：
jsp页面中定义如下的div作为对话框的“载体”：
<div id="editradiationdiv" style="display: none"> <table style="border:1px; border-color: red;width: 100%"> <thead> <tr> <td>货物名称</td><td>辐照数量</td><td>辐照重量</td><td>辐照方式</td><td>辐照时间</td> </tr> </thead> <tr> <td><input id="divcargoname" name="divcargoname" type="text" disabled="disabled" /> <input type="hidden" id="receiveorgid" name="receiveorgid" /> </td> <td> <input type="text" id="irradednum" name="irradednum" /> <input type="hidden" id="hiddenoldirradednum"/> <crazy:dictselect id="showcountorginfos" name="showcountorginfos" collection="${showcountorginfos}" ></crazy:dictselect> </td> <td> <input type="text" id="cargoweight" name="cargoweight" /> </td> <td><crazy:dictselect id="irradtypes" name="irradtypes" collection="${irradtypes}" ></crazy:dictselect></td> <td> <input type="text" id="irradtime" name="irradtime" /> <crazy:dictselect id="timeorgs" name="timeorgs" collection="${timeorgs}" ></crazy:dictselect> </td> </tr> </table> <table> <thead> <tr> <td>日期</td> <td>序号</td> <td>交接时间</td> <td>首位吊具号</td> <td>辐照批号</td> <td>入场时间</td> <td>吊具号码</td> <td>装载模式</td> <td>运行参数</td> <td>运行圈数</td> <td>变动说明</td> <td>下圈开始时间</td> <td>备注</td> </tr> </thead> <tr> <td> <input type="text" id="doirraddate" placeholder="格式：yyyy-mm-dd" /> </td> <td> <input type="text" id="ordernum" /> </td> <td> <input type="text" id="connecttime"/> </td> <td> <input type="text" id="firstspreadernum" /> </td> <td> <input type="text" id="irradbatchnum" /> </td> <td> <input type="text" id="entrancetime" /> </td> <td> <input type="text" id="spreadernum" /> </td> <td> <crazy:dictselect id="loadmodel" name="loadmodel" collection="${loadmodel}" ></crazy:dictselect> </td> <td> <input type="text" id="runparam" /> </td> <td> <input type="text" id="runcycle" /> </td> <td> <input type="text" id="changedesc" /> </td> <td> <input type="text" id="nextcyclestarttime" /> </td> <td> <input type="text" id="mask" /> </td> </tr> </table> </div>页面的按钮单击事件（业务就是一个编辑操作，根据Id得到一条信息，放到对话框里边，用户修改后保存活取消操作）触发弹框的代码如下（PS：黑体部分是弹框数据丢失的解决方案）：
function goeditradiation(id,receivemgrid){ globalstillid = id+"-"+receivemgrid; initradiation(); //使用jQuery的Dialog控件时，jQuery会将创建的dialog缓存到页面上，生成一些隐藏的div，当再次创建dialog时，由于id相同 //总会调用缓存中的Dialog，导致无法显示想要显示的内容。必须使用remove()才能彻底清除，同时把原div从dom树种移除，移除意 //味着弹出框只能弹出一次，为了解决此问题此处将当前的DIV克隆一份放在内存，当关闭对话框romove()之后再将克隆的div添加到 //dom树之中 **var dialogParent = $("#editradiationdiv").parent(); var dialogOwn = $("#editradiationdiv").clone(); dialogOwn.hide();** //在此初始化（存在bug） $("#editradiationdiv").dialog({ autoOpen : false,// 设置对话框打开的方式 不是自动打开 show : "bind", hide : "explode", modal : true, height : 350, width : 900, title: "编辑", buttons : { '保存' : function() { var irradednum= document.getElementById("irradednum").value; var hiddenoldirradednum= document.getElementById("hiddenoldirradednum").value; if(parseInt(irradednum) > parseInt(hiddenoldirradednum)){ alert("辐照数量不能超过已有货物数量！"); return; } if(!CommnUtil.validatetime($("#doirraddate").val())){ alert("日期格式错误!\n 格式：yyyy-mm-dd"); return; } if(CommnUtil.haveOneTagIsNull("doirraddate,ordernum,connecttime,firstspreadernum,irradbatchnum,entrancetime,spreadernum,runparam,runcycle,changedesc,nextcyclestarttime")) { alert("标红信息必须填写！"); return; } saveradiation(); $(this).dialog("close"); }, "取消" : function() { $(this).dialog("close"); } }, open : function(ev, ui) { // CommnUtil.cleanInputValue("addcargoname,org,irradtype,irradtime,timeorg"); }, close : function(ev, ui) { //将克隆的添加到dom之中，然后移除当前的div **dialogOwn.appendTo(dialogParent); $(this).dialog("destroy").remove();** //CommnUtil.cleanInputValue("divcargoname,receiveorgid,irradednum,hiddenoldirradednum,showcountorginfos,cargoweight,irradtypes,irradtime,timeorgs"); } }); $('#editradiationdiv').dialog('open'); }其中initradiation();是从数据库得到数据然后吧数据塞到input标签里边：
function initradiation(){ var id = globalstillid.split("-")[0]; var data = CommnUtil.normalAjax("/business/receivingmana/goradiation.do","id="+id, "json"); if(CommnUtil.notNull(data)){ $("#receiveorgid").val(data.receiveorgid); $("#divcargoname").val(data.cargoname); $("#hiddencargoid").val(data.cargoid); document.getElementById("irradednum").value=data.cargocount; $("#hiddenoldirradednum").val(data.cargocount);// $("#showcountorginfos").find("option[value='"+data.countorg+"']").attr("selected",true); document.getElementById("cargoweight").value=data.cargoweight; $("#irradtypes").find("option[value='"+data.irradtype+"']").attr("selected",true); document.getElementById("irradtime").value=data.irradtime; $("#timeorgs").find("option[value='"+data.irradtimeorg+"']").attr("selected",true); } }
)
