onclose更新父

onclose更新父

关注
发信
关注(28)粉丝(399)

jQuery的colorbox onclose更新父

本文介绍了jQuery的colorbox onclose更新父的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



所以我使用jQuery colorbox，并通过点击链接激活它。在colorbox中有一个带有一些复选框的表单，我想要做的是当点击提交（并随后关闭colorbox）时，将所选复选框的所有值存入父级。我不希望父窗口刷新。它应该自动填充彩盒中的复选框项目和内容。



以下是链接 

 父代码
 
<！DOCTYPE html> 
< html> 
< head> 
< meta charset ='utf-8'/> 
< title> ColorBox Examples< / title> 
< style> 
 body {font：12px / 1.2 Verdana，sans-serif; padding：0 10px;} 
 a：link，a：visited {text-decoration：none;颜色：＃416CE5; border-bottom：1px solid＃416CE5;} 
 h2 {font-size：13px; margin：15px 0 0 0;} 
< / style> 
< link rel =stylesheethref =colorbox.css/> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script> 
< script src =../ colorbox / jquery.colorbox.js>< / script> 
< script> 
 $（document）.ready（function（）{
 $（。iframe）。colorbox（{iframe：true，width：400px，height：400px}）; 
}）; 
< / script> 
< / head> 
< body> 
< p>< a class ='iframe'href =../ content / ajax.html>外部网页（Iframe）< / a>< / p> 
< p> 
彩盒中的复选框项目
< / p> 
< / body> 
< / html> 
 
弹出式代码
 
< form action =method =post> 
选择一个国家
< br />< br /> 
< input type =checkboxname =countryCheckbox []value =UK/> UK< br /> 
< input type =checkboxname =countryCheckbox []value =USA/> USA< br /> 
< input type =checkboxname =countryCheckbox []value =Japan/>日本< br /> 
< input type =checkboxname =countryCheckbox []value =China/>中国< br /> 
< input type =checkboxname =countryCheckbox []value =Australia/> Australia 
< br />< br /> 
< input type =submitname =formSubmitvalue =Submit/> 
< / form>

如果我可以得到一些帮助，我会非常感激。



提前致谢

解决方案

您可以通过在<$ c


$ b

首先在该文件中加载jQuery，然后添加这个文档就绪函数

  $（document）.ready（function（）{
 $（'＃form'）。submit（function（）{
 
 $（'input：checkbox：checked'）。each（function（）{
 window.parent。$（＃text）。text（parent。$（＃text）。text（ ）+ $（this）.val（）+，）; 
 
}）; 
 parent。$。colorbox.close（）; 
 return false; 
}）; 
}）;

当用户点击提交按钮 on overlay iframe 它将所有选中的复选框添加到父窗口的文本div中，然后关闭colorbox窗口。



以下是 ajax.html 文件的修改后的代码 

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script> 
< form action =method =postid ='form'> 
选择一个国家
< br />< br /> 
< input type =checkboxname =countryCheckbox []value =UK/> UK< br /> 
< input type =checkboxname =countryCheckbox []value =USA/> USA< br /> 
< input type =checkboxname =countryCheckbox []value =Japan/>日本< br /> 
< input type =checkboxname =countryCheckbox []value =China/>中国< br /> 
< input type =checkboxname =countryCheckbox []value =Australia/> Australia 
< br />< br /> 
< input type =submitname =formSubmitvalue =Submit/> 
< / form> 
 
< script> 
 $（document）.ready（function（）{
 $（'＃form'）。submit（function（）{
 
 $（'input：checkbox：checked' ）.each（function（）{
 window.parent。$（＃text）。text（parent。$（＃text）。text（）+ $（this）.val（）+ ，）; 
 
}）; 
 parent。$。colorbox.close（）; 
 return false; 
}）; 
}）; 
< / script>

同时在段落中添加一个id，以便像这样添加值

 < p id =text> 
彩盒中的复选框项目：
< / p>

您必须从 localhost 或相同的虚拟主机，如果您有任何或不允许从子级iframe 访问父级。只需将修改后的文件放入文档根目录中的文件夹中，然后通过浏览器访问它。让我知道它是否有效。



这是一个工作演示


Could do with some help you guys.

So I'm using jQuery colorbox and its activated by clicking a link. In the colorbox there is a form with some checkboxes, what I would like to do is to get all the values of the selected checkboxes into the parent when submit is clicked (and close colorbox subsequently). I don't want the parent window to refresh. It should automatically populate the "Checkbox Items from Colorbox" with the contents

Here is the link http://tdesigns.net84.net/colorbox/example1/

Parent code

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>ColorBox Examples</title>
        <style>
            body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
            a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
            h2{font-size:13px; margin:15px 0 0 0;}
        </style>
        <link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="../colorbox/jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                $(".iframe").colorbox({iframe:true, width:"400px", height:"400px"});
            });
        </script>
    </head>
    <body>
        <p><a class='iframe' href="../content/ajax.html">Outside Webpage (Iframe)</a></p>
        <p>
            Checkbox Items from Colorbox
        </p>
    </body>
</html>

popup code

<form action="" method="post">
    Choose a country
    <br /><br />
    <input type="checkbox" name="countryCheckbox[]" value="UK" />UK<br />
    <input type="checkbox" name="countryCheckbox[]" value="USA" />USA<br />
    <input type="checkbox" name="countryCheckbox[]" value="Japan" />Japan<br />
    <input type="checkbox" name="countryCheckbox[]" value="China" />China<br />
    <input type="checkbox" name="countryCheckbox[]" value="Australia" />Australia
    <br /><br />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

Would really appreciate it if I could get some help with this.

Many thanks in advance

解决方案

You can do this by adding the following function in your ajax.html file

First load jQuery in that file and then add this document ready function

$(document).ready(function(){
        $('#form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                        window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,");

                    });
                    parent.$.colorbox.close();
                    return false;
        });
    });

What this is doing is when user clicks on the submit button on overlay iframe it takes all checked checkbox add those values into parent window's text div and then close the colorbox window.

Here's the modified code for ajax.html file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form action="" method="post" id='form'>
    Choose a country
    <br /><br />
    <input type="checkbox" name="countryCheckbox[]" value="UK" />UK<br />
    <input type="checkbox" name="countryCheckbox[]" value="USA" />USA<br />
    <input type="checkbox" name="countryCheckbox[]" value="Japan" />Japan<br />
    <input type="checkbox" name="countryCheckbox[]" value="China" />China<br />
    <input type="checkbox" name="countryCheckbox[]" value="Australia" />Australia
    <br /><br />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

<script>
    $(document).ready(function(){
        $('#form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                        window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,");

                    });
                    parent.$.colorbox.close();
                    return false;
        });
    });
</script>

Also add an id to the paragraph where value will be added like this

<p id="text">
    Checkbox Items from Colorbox:
</p>

You have to run the code from localhost or same virtualhost if you have any or it will not allow accessing parent from child iframe. Just drop the modified files in a folder in your document root and access it through browser. Let me know if it works.

here's a working demo http://joynag.net/demos/colorbox/

这篇关于jQuery的colorbox onclose更新父的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-20 16:41
Powered by LMLPHP ©2024 onclose更新父 0.047378