问题记录(1):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" /> &nbsp;
         <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);
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值