Ways of action in opener form and refresh parent form

Patrick
方案1: 
1.在父页head中加入以下内容
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="/javascripts/thickbox.js"></script>
<link href="/stylesheets/thickbox.css" rel="stylesheet" type="text/css" />

2.在父页中调用子页使用thickbox的Iframe功能如下
<a href="/contact_us_form.php?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true" class="thickbox" title="Contact Us">Contact Us</a>

3.你子页的表单要采用如下的结构,请看清楚ID号
<div id="content">
    <form id="contact_us" action="/contact_us.php" method="POST">
     ... 
    </form>
</div>

4.在子页面中加入jQuery支持,不要忘了在父页head中加入jQuery库,如第一步所示
<script language="javascript">
jQuery(function($){
    $('#contact_us').submit(function(){ 
      $.post($(this).attr('action'), function(html) { 
        $('#content').html(html)
      })
      return false
    })
})
</script>

5.如上面第三步是提交到“contact_us.php”,在其程序处理完成后,加入以下代码
die("<script>alert('表单已提交'); window.parent.tb_remove(); window.parent.location.reload();</script>");

使用thickbox层,但是事件发生在iframe层,导致只有iframe层呈现thickbox,。 


方案2: 
我们要达到iframe层事件触发的thickbox影响到整个页面,可对thickbox.js稍做修改。 

function tb_init(domChunk){
    $(domChunk).click(function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
});
}


function tb_init(domChunk){
    $(domChunk).click(function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    self.parent.tb_show(t,a,g);
    this.blur();
    return false;
});
}

方案3:
// 刷新打开本窗口的opener窗口. 
function refreshOpener(){ 
// 可能存在frame页面,所以要引用top窗口. 
var win = top.window; 
try{ 
// 刷新. 
if(win.opener) win.opener.location.reload(); 
}catch(ex){ 
// 防止opener被关闭时代码异常。 
} 
} 

// 刷新opener窗口后关闭自己。 
function refreshOpenerAndCloseMe(){ 
refreshOpener(); 
closeWin(); 
}

方案4:
1.父页面添加引用 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> 

2.父页面添加如下按钮,引用thickbox打开子窗口
<input alt="search.php?height=400&width=800" title="Search ALL" class="thickbox" type="button" value="Search ALL"/> 

3.子页面添加按钮或链接
<input id="search" type="button" value="Search"/> 
<input id="closeBT" type="button" value="Cancel"/> 

4.子页面添加相关jQuery和thickbox代码(因为父页面已经引用了jQuery和thickbox库,子页面不需要再引用)

<SCRIPT type="text/javascript">
$("#closeBT").click(function(){
    tb_remove();
});

//click the save button to submit, close the current window and refresh the opener window
$("#search").click(function(){

    //get the transfer params
    var brands = new Array();
    $("input:checkbox").each(function(){
        if(this.checked) {
            brands.push($(this).val());
        }
    });
    
    $.ajax({
        type:"POST",
        url:"search.php",
        data:"brands="+brands.join(","),
        success:function(msg){
            tb_remove();    //close the thickbox
            var win = top.window; 
            try{ 
                if(win){ 
                   win.location.reload();
                }
            }catch(ex){} 
        }
    });

});
</SCRIPT>

方案5 
 不使用thickbox和jQuery,  使用http://code.kolmio.com/jsdialog/

你可能感兴趣的:(JavaScript,jquery,PHP,Ajax,css)