提交时关闭iFrame花哨框的问题
Issues closing iFrame fancybox on submit
我有一个从数据库填充的在线用户名册。每个用户名都是一个链接,它在一个花哨框(iframe)中打开一个表单,允许编辑信息。子窗口中没有任何js,表单数据提交给数据库,但fancybox没有关闭。我需要它提交数据,然后关闭fancybox。
我尝试了Amr对这个问题的回答,现在它关闭了,但没有提交。
下面是打开fancybox的代码:<script type="text/javascript">
$(function() {
$(".updateLink").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 650,
'height' : 560,
'showCloseButton': true,
'type': 'iframe'
});
});
</script>
<?php
foreach ($contacts as $contact) {
$updateLink = '<a class="updateLink" href="update_person.php?people_id='.urlencode($contact->people_id).'&company_id='.urlencode($company_id).'&uid='.urlencode($uid).' ">'.$contact->first_name.' '.$contact->last_name.'</a>';
print '<tr>';
print '<td>'.$contact->people_id.'</td>';
print '<td>'.$updateLink.'</td>';
print '<td>'.$contact->title.'</td>';
print '<td>'.$contact->email.'</td>';
print '</tr>';
} # end foreach contact
?>
下面是这个框架文件的代码,加上关闭fancybox的函数:
<?php
include('/home/www/viola/ssl/include/ez_sql.php');
include('/home/www/lib/common_functions.php');
if (isset($_POST['submit'])) {
//write to roster table
$people_id = $_POST['people_id'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$title = $_POST['title'];
$email = $_POST['email'];
$db->query("INSERT INTO roster (people_id, first_name, last_name, title, email) values ($people_id, '$first_name', '$last_name', '$title', '$email')");
}
else {
$people_id = urldecode($_GET['people_id']);
$uid = urldecode($_GET['uid']);
$query = "SELECT id AS people_id, first_name, last_name, title, email
FROM new_people
WHERE active = 1 AND id = $people_id";
$person = $db->get_row($query);
$people_id = $person->people_id;
$first_name = $person->first_name;
$last_name = $person->last_name;
$email = $person->email;
$title = $person->title;
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?= $jsPath; ?>/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
function closeME() {
event.preventDefault();
parent.$.fancybox.close();
$('#myForm').submit();
}
</script>
<style>
fieldset {margin: 35px;}
label {margin-right: 30px;}
input[type="text"]{
width:350px;
/*display:block;*/
}
input[type="button"]{
width:120px;
margin-left:35px;
display:block;
}
select {
width:350px;
}
</style>
<form action="update_person.php" method="post" id="myForm">
<input type="hidden" name="people_id" value="<?= $people_id; ?>"/>
<fieldset>
<legend>Update <?= $first_name . " " . $last_name; ?></legend>
<table>
<tr>
<td><label for="first_name">First Name:</label></td>
<td><input type="text" name="first_name" value="<?= $first_name; ?>"/></td>
</tr>
<tr>
<td><label for="last_name">Last Name:</label></td>
<td><input type="text" name="last_name" value="<?= $last_name; ?>"/></td>
</tr>
<tr>
<td><label for="user_email">Email:</label></td>
<td><input type="text" name="email" value="<?= $email; ?>"/></td>
</tr>
<tr>
<td><label for="title">Title:</label></td>
<td><input type="text" name="title" value="<?= $title; ?>"/></td>
</tr>
<tr><td colspan="2" style="text-align:center"><!--<input type="submit" id="mysubmit" name="submit" value="Submit changes" />-->
<button onclick="closeME();">
<span>Save changes</span>
</button>
</td></tr>
</table>
</fieldset>
</form>
<?
}
?>
在做出链接帖子中建议的更改之前,只有被注释掉的<input type="submit" id="mysubmit" name="submit" value="Submit changes" />
-这确实正确提交了数据。
任何想法我需要做什么,以获得新的代码,既关闭fancybox和提交的形式?
您当前的代码有以下问题之一:
- Fancybox关闭,但是表单没有正确提交
- 表单已正确提交,但是fanybox无法关闭
解决方案/strong>
JS中的工作代码Fiddle : http://jsfiddle.net/hMcc8/7/show/(省略/show/
以查看源代码)。必须添加/show/
才能使代码工作,因此同源策略不会干扰。
包含fancybox JS和CSS文件,并在主文件中定义以下函数:
function fancyBoxClose(){
$("#fancybox-frame").load(function(){
$.fancybox.close();
});
}
查找框架文件:http://jsfiddle.net/SnTwQ/7/
将submit
事件处理程序绑定到窗体,该窗体将调用parent.fancyBoxClose()
。使用submit
事件代替按钮click
,因为可以通过在输入字段内按enter键提交表单。
$(function(){
$("#myForm").submit(function(){
parent.fancyBoxClose();
});
});
它是如何工作的?
当表单被提交时,父函数被调用。该函数将onload
事件处理程序附加到Fancybox框架上。表单完成提交后,将加载一个新页面。
当页面加载完成时,将触发onload
事件。我们从这个onload
事件中调用$.fancybox.close()
。结果,fancybox按预期关闭。
相关答案:Uncaught TypeError: Cannot read property 'fancybox'的未定义-谷歌Chrome唯一的错误?
Update: 另一个方法。小提琴:http://jsfiddle.net/hMcc8/9/show/。
根据评论,表单被提交到同一页面。当页面在同一域中提供服务时,以下代码应该始终有效: 主:
$(function() {
$(".updateLink").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 650,
'height' : 560,
'showCloseButton': true,
'type' : 'iframe',
'onClosed': function(){ /* Reset variable when closing*/
fancyBoxToClose = false;
}
});
});
var fancyBoxToClose = false;
function fancyBoxLoaded(){
if (fancyBoxToClose) {
fancyBoxToClose = false;// Reset flag
$.fancybox.close(); // Close fancybox
return true; // Callback for frame
}
}
function fancyBoxClose(){
fancyBoxToClose = true; // Activate flag
}
坐标系:
// You don't need fancybox code at this page
$(function(){
if(parent.fancyBoxLoaded()){ /* Notify that the DOM has finished*/
// If the parent function returned true, this page is going to be closed.
$('body').hide(); //Hide body, so that the user cannot submit another form.
}
else {
$("#myForm").submit(function(){
parent.fancyBoxClose();
});
}
});
- 由于iframe导致的问题
- 使用YouTube iFrame API的IE中的JavaScript问题
- 将HTML表单发布到iframe会导致浏览器历史记录出现问题
- 从父页面调用iframe中的javascript,IE问题
- 在Google Chrome中打印iFrame时出现问题
- 在Internet Explorer 8中的Iframe中创建TinyMCE时出现问题
- 这个基于iFrame选择器的if函数有什么问题
- 当内容显示在FireFox的iFrame中时,jQuery高度问题
- 如何应对iframe安全问题
- 使用 Iframe 问题设置跨域 Cookie
- 移动设备上的 iFrame 重定向主页问题
- iframe 的奇怪跨域问题
- Iframe 透明度问题
- 缺少 iframe ie8.相对定位不能解决问题
- HTML5验证中漂亮的照片iframe的问题
- 检测 iframe 中的连接问题
- Firefox 13 iframe 打印问题来自 JavaScript
- insertBefore() 一个 iframe jquery 问题
- 未捕获的安全错误端口问题:Iframe调整大小
- fanybox的问题.Iframe只适用于网站上的第一个链接