Ajax提交后如何关闭fancybox？
Posted
技术标签:
【中文标题】Ajax提交后如何关闭fancybox？【英文标题】：How to close fancybox after Ajax Submit? 【发布时间】：2012-02-16 15:23:34 【问题描述】：我正在使用 Jquery 表单插件。
Popup 以图片上传形式显示。图片上传成功。我想在成功上传图片后关闭弹出窗口。以下 javascript 是在弹出内容中编写的。
$(this).ajaxSubmit(
success: function(dd)
parent.$.fancybox.close();
);
但它不起作用。 jquery 库，fancybox 库包含在弹出内容和父页面中。
此外，我想用加载的“dd（ajax 返回值）”内容再次重新加载fancybox。它将具有 Jcrop 功能。
现在，一旦 ajaxSubmit 用于上传图像，Jcrop 就无法正常工作。否则它正在工作
编辑 我重命名了 page1 page2 和 page3 以便更好地理解 index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript">
$(document).ready(function()
$(".various").fancybox(
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '100%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
);
);
</script>
</head>
<body>
<a href="upload.php" class="various fancybox.ajax">Upload</a>
</body>
</html>
上传.php
<div class="result">
<form method="post" id="form" class="form" action="test.php" enctype="multipart/form-data">
<div>
<label>Upload Image : </label>
<input type="file" name="user_photo" value="" />
</div>
<div>
<input type="submit" value="Upload" />
</div>
</form>
</div>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("#form").submit(function()
$(this).ajaxSubmit(
beforeSubmit: function(before)
,
success: function(dd)
$('.result').html(dd);
);
return false;
);
);
</script>
test.php 包含（我只是用静态图片测试。这里没有写上传脚本。）
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<script language="Javascript">
$(function()
$('#cropbox').Jcrop( ); );
</script>
<img src="images.jpg" id="cropbox" />
Jcrop 不适用于此方法。如果我跳过upload.php 步骤，jcrop 在fancybox 中工作正常。所以我需要在上传后删除并创建一个新的fancybox！
编辑结束
【问题讨论】：
你为什么使用parent？除非您在 iframe 中，否则请执行 $.fancybox.close();
我试过 $.fancybox.close();不工作。 $(this).ajaxSubmit( $.fancybox.close(); );工作
【参考方案1】：
试试这个
var fancyboxProxy = $.fancybox;
$(this).ajaxSubmit(
success: function(dd)
fancyboxProxy.close();
);
编辑：
我修复了将所有 js 放入 index.php 并使用 jquery live 设置事件侦听器的问题
$(document).ready(function ()
$(".various").fancybox(
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '100%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
);
$("#form").live('submit', function ()
$(this).ajaxSubmit(
beforeSubmit: function (before)
,
success: function (dd)
$.fancybox.close();
);
return false;
);
);
demo
source
干杯
【讨论】：
不工作 :( -- 上传图片时页面加载，会不会有什么问题？ --- 刚试过没有图片上传选项，还是一样的问题。 服务器响应 200 OK 吗？ -查看开发工具 > xhr 请求 是的，警报有效，结果是从请求的页面加载的。但fancybox并没有关闭。在 XHR 请求中，我可以看到 200 ok 的 page2.php。 Jquery 加载了两次，Fancy box 加载了一次，jcrop 加载了一次，form.min 加载了两次。 page1.php 调用图片上传内容（page2.php）。提交该表单后，它将 page3.php 加载到与 jcrop 相同的精美框中。我想在加载 jcrop 之前关闭并重新加载 fancybox！ fancybox 变量和关闭函数的类型是什么？他们被定义了吗？success: function(dd) console.log((typeof fancyboxProxy), (typeof fancyboxProxy.close));
我刚得到“函数函数”【参考方案2】：
感谢您提供漂亮的代码。
只需在 test.php 文件中插入下面的代码。 在您的根目录中创建上传文件夹。
<?php
$path = 'upload';
$name = $_FILES["user_photo"]["name"];
if (move_uploaded_file($_FILES['user_photo']['tmp_name'], $path.'/'.$name))
echo '<img src="'.$path.'/'.$name.'" />';
else
print "Upload failed!";
?>
你会得到完美的结果。
【讨论】：
以上是关于Ajax提交后如何关闭fancybox？的主要内容，如果未能解决你的问题，请参考以下文章
在 Fancy Box 中运行 CKEditor：编辑器弹出窗口/覆盖集中在 fancybox 覆盖后面
如何在 on_sent_ok 或 fancybox 关闭时使用 Wordpress contant form 7 和花式框显示特定部分