gpt4 book ai didi

jQuery colorbox onclose 更新父级

转载 作者:行者123 更新时间:2023-12-01 02:46:18 27 4
gpt4 key购买 nike

可以为你们提供一些帮助。

所以我使用 jQuery colorbox 并通过单击链接激活它。在颜色框中有一个带有一些复选框的表单,我想做的是在单击提交时将所选复选框的所有值放入父级(并随后关闭颜色框)。我不想刷新父窗口。它应该自动用内容填充“Colorbox 中的复选框项目”

这是链接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>

如果我能得到一些帮助,我将非常感激。

提前非常感谢

最佳答案

您可以通过在 ajax.html 文件中添加以下函数来实现此目的

首先在该文件中加载 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;
});
});

这是做什么的,当用户点击overlay iframe上的submit按钮时,它会将所有选中的复选框添加到父窗口的文本div中,然后关闭颜色框窗口。

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

<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>

还要向要添加值的段落添加一个 id,如下所示

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

您必须从localhost或相同的virtualhost(如果有)运行代码,否则它将不允许从子iframe访问父级。只需将修改后的文件放入文档根的文件夹中,然后通过浏览器访问它即可。让我知道它是否有效。

这是一个工作演示 http://joynag.net/demos/colorbox/

关于jQuery colorbox onclose 更新父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10654850/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com