zoukankan      html  css  js  c++  java
  • 页面弹窗并且加载数据的实现(使用jquery和普通js方法结合实现浏览器的兼容)

    这里假设父页面有个弹窗按钮,点击后弹出一个新的窗体,而这个窗体还要包含父窗口的数据,在子窗体操作完后关闭子窗体然后刷新父窗体:

    父窗体的弹窗按钮单击事件触发后的处理函数:

     1 function sendToMakePrice(){
     2     var hrid=$("#hrid").val();
     3     var appid=$("#appid").val();
     4     var posid=$("#posid").val();
     5     var hisid=$("#hisid").val();
     6 
     7         //到同意与否的界面respond.jsp
     8     var tempForm = document.createElement("form");    
     9      tempForm.id="tempForm1";    
    10      tempForm.method="post";    
    11      tempForm.action="${pageContext.request.contextPath}/skipmakepricedetail.action";    
    12      tempForm.target="makepricepage";       
    13      var hridInput = document.createElement("input");    
    14      hridInput.type="hidden";    
    15      hridInput.name= "hrid"  
    16      hridInput.value= hrid;  
    17      var posidInput = document.createElement("input");    
    18      posidInput.type="hidden";    
    19      posidInput.name= "posid"  
    20      posidInput.value= posid;  
    21      var appidInput = document.createElement("input");    
    22      appidInput.type="hidden";    
    23      appidInput.name= "appid"  
    24      appidInput.value= appid;  
    25      var hisidInput = document.createElement("input");    
    26      hisidInput.type="hidden";    
    27      hisidInput.name= "hisid"  
    28         hisidInput.value= hisid; 
    29      tempForm.appendChild(hridInput);     
    30      tempForm.appendChild(posidInput);    
    31      tempForm.appendChild(appidInput);  
    32      tempForm.appendChild(hisidInput); 
    35      document.body.appendChild(tempForm);  
    36     $("#tempForm1").bind("submit",function(){
    37         openMakePricePage();
    38          });
    39     $("#tempForm1").submit();
    40      document.body.removeChild(tempForm);  
    41     
    42 }
    43 function openMakePricePage(){
    44         window.open("","makepricepage",'height=300, width=480, top=200, left=400, toolbar=no,alwaysRaised=true'+
    45      'menubar=no,scrollbars=no,resizable=no,location=no, status=no,alwaysRaised=yes,titlebar=no,toolbar=no'); 
    46 }

    首先从父窗口获取参数值,然后使用js的

    document.createElement("form");  创建一张表单以及属性35行是将创建的表单追加到当前页面,注意在这以后写表单提交的监听函数,然后提交,最后注意清楚你创建的表单,
    这样一来结构就很明显,单击弹窗按钮后调用这个
    sendToMakePrice()函数,创建好你要访问的后台action表单,然后提交表单触发提交时间,返回一个openMakePricePage()函数,这个函数再调用window.open函数打开你的新窗体,注意这里的写法,第一个参数为""不然新窗体显示名字,第二个参数则必须与12行target属性相同,这样弹出来的窗体就包含父窗体的属性了。
     1 function makePrice(){
     2     var price=$("#price").val();
     3     var ea=/^[0-9]*$/;
     4     if(!ea.test(price)){
     5         alert("请输入数字")
     6         return ;
     7     }
     8     var posid=$("#posid").val();
     9     var hrid=$("#hrid").val();
    10     var appid=$("#appid").val();
    11     var hrinfo=$("#hrinfo").val();
    12     var hisid=$("#hisid").val();
    13     $.ajax( {
    14                   type: "POST",
    15                 url : "makeprice.action",
    16                 data: "posid="+posid+"&hrid="+hrid+"&appid="+appid+"&hrinfo="+hrinfo+"&price="+price+"&hisid="+hisid,
    17                 success : function(html) {
    18                         alert("发送成功");
    19                         opener.opener.location.reload();
    20                          opener.window.close();
    21                         setTimeout("window.close()",1000);
    22                                 }
    23                             });
    24 }

    这里是子窗体操作提交后提示信息刷新父窗体并且1秒后关闭自己的函数,19行的函数即使刷新父窗体21行写了一个时间触发器关闭窗体这样实现一个比较平稳的过渡

     
  • 相关阅读:
    Linux 下 Nand Flash 调用关系
    postgresql
    Web 在线文件管理器学习笔记与总结(19)上传文件
    Java实现 LeetCode 139 单词拆分
    Java实现 LeetCode 138 复制带随机指针的链表
    Java实现 LeetCode 138 复制带随机指针的链表
    Java实现 LeetCode 138 复制带随机指针的链表
    Java中那些烦人的位运算(&,|...)
    Java中那些烦人的位运算(&,|...)
    Java中那些烦人的位运算(&,|...)
  • 原文地址:https://www.cnblogs.com/wq123/p/2903485.html
Copyright © 2011-2022 走看看