页面弹出框,关闭后再打开,控件值的初始化

7 篇文章 0 订阅

      从做权限系统开始,我就跟弹出页面成了好朋友。。。开始我向无头苍蝇一样的寻找着各种办法,上篇博客也写到了页面弹出框的实现,虽然有多中实现方法,也满足了基本的要求,然而在后面不断应用中会发现很多不完善的地方,过程中看到了自己很多的不足,首先是对js实现弹出框的不熟悉,其次是各种需求想不全面。不过还是看到了进步,这次问题出现后,不像以前那样毫无头绪,而是由几种基本的想法,所以就一一去验证,但是最终的方法还没确定。问题是这样的:

     我的页面弹出框是在页面加载时就存的的,只不过是隐藏状态,当打开弹出框时才显示,但是即使关闭了,里面的数据也不会消失,只是隐藏了,所以在第二次打开弹出框时,上次填写的数据还会存在,第二次打开弹出框效果如果:

                                  

显然这样的用户体验并不好,所以我需要做的就是在关闭弹出窗口时将数据置空,或者是回复到初始化状态;解决问题的办法有如下三种:

    一、刷新整个页面:

           由于整个弹出框都是以div的形式存在于页面里的,所以只要刷新整个页面,div的数据也就可以初始化,方法:

   

function dialogOpen(div_dialogid,div_width,div_height,url) {    
    $(function () {
        $('#' + div_dialogid).dialog({
            width: div_width,
            height:div_height,
            close: function () {        //触动关闭方法时,刷新页面,url为html传递过来的当前页面        
                window.location = url;
           }
        });
    });
}
     由于要刷新整个页面,如果数据很多时,有些浪费资源,所以这个方法并不是很好。

二、设置循环为div中的每个数据进行清除

        思路是:只要将可以填写数据的控件中的数据进行清空,则下次打开时,则不会再存在数据,代码如下:

function dialogOpen(div_dialogid,div_width,div_height) {    
    $(function () {
        $('#' + div_dialogid).dialog({
            width: div_width,
            height:div_height,
            
            close: function () {                
                var div_id = document.getElementById(div_dialogid);  //获取当前div
                var inputnum=div_id.getElementsByTagName("input");   //获取input的数量(input中输入数据)
                var intnum;
                for (intnum = 0; intnum < inputnum.length; intnum++)  //循环将每个input的数据写为空
                {
                    div_id.getElementsByTagName("input")[intnum].value = "";
                };            
                var txtnum = div_id.getElementsByTagName("textarea"); //获取textarea的数量
                for (intnum = 0; intnum < txtnum.length; intnum++) {
                    div_id.getElementsByTagName("textarea")[intnum].value = '';   //将每个textarea的内容写为空
                    div_id.getElementsByTagName("textarea")[intnum].innerHTML = "";
                };                
           }
        });
    });
}
       虽然这样可以把数据置空,但是如果在页码上写有验证,那么验证则不会取消,所以这是治标不治本的办法。

方法三:局部更新div(只更新当前操作的div)

       想到ajax的异步更新,或许可以用到,但是这里不需要与服务器的交互,所以直接在加载弹出框时,将innerHTML的值保存,在关闭时,将初始时候的innerHTML赋值给这个div即可:

<script type="text/javascript">
    function dialogOpen()
      {
         $(function () {
		  var divhtml = $("#dialog").html();
          $("#dialog").dialog({			   
		   close:function(){	  
                $("#dialog").html(divhtml);
		   }
		  });
		  
	     });
      }
  </script>
     目前这个方法是最可行的。希望还可以找到更好的方法来解决。
       方案尚未确定,我仍需努力,渐渐的发现,对这块的内容不向之前那么没头没脑了,出错不可怕,可怕的是没思路呀,不过我觉得我现在至少还是有思路的。。。
   










  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值