javascript-提交时关闭iFrame fancybox的问题
作者：互联网
我有一个从数据库填充的在线用户名册.每个用户名都是一个链接,可在fancybox(iframe)中打开一个表单,以允许编辑信息.在子窗口中没有任何js的情况下,表单数据将提交到数据库,但是fancybox不会关闭.我需要它来提交数据,然后关闭fancybox.
我从this question开始尝试了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
?>
这是iframed文件的代码现在的样子,它具有关闭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 =“提交更改” /> -这样确实提交了数据.
知道我需要做些什么来获取新代码以关闭fancybox并提交表单吗？
解决方法:
您当前的代码存在以下问题之一：
> Fancybox关闭,但表单未正确提交
>表单已正确提交,但fancybox不会关闭.
解
JS Fiddle的工作代码：http://jsfiddle.net/hMcc8/7/show/(忽略/ show /以查看源代码).必须添加/ show /才能使代码正常工作,以免Same origin policy干扰.
包括fancybox JS和CSS文件,并在主文件中定义以下功能：
function fancyBoxClose(){
$("#fancybox-frame").load(function(){
$.fancybox.close();
});
}
框架文件的小提琴：http://jsfiddle.net/SnTwQ/7/
将一个提交事件处理程序绑定到您的窗体,该窗体调用parent.fancyBoxClose().使用Submit事件代替单击按钮,因为可以通过在输入字段中按Enter提交表单.
$(function(){
$("#myForm").submit(function(){
parent.fancyBoxClose();
});
});
它是如何工作的？
提交表单后,将调用父函数.此函数将onload事件处理程序附加到Fancybox框架.表单提交完成后,将加载一个新页面.
页面加载完成后,将触发onload事件.我们在此onload事件中调用$.fancybox.close().如此一来,fancybox会按预期关闭.
相关答案：Uncaught TypeError: Cannot read property ‘fancybox’ of undefined – Google Chrome only error?
更新：另一种方法.小提琴：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();
});
}
});
标签：fancybox,jquery-plugins,javascript 来源： https://codeday.me/bug/20191102/1988608.html