Ajax提交后如何关闭fancybox? [英] How to close fancybox after Ajax Submit?
问题描述
我正在使用Jquery表单插件.
弹出窗口随图像上传表单一起显示.图像上传成功.成功上传图像后，我想关闭弹出窗口.下面的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>
upload.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！
编辑结束
尝试一下
我修复了将所有js放入index.php并使用jquery live设置事件监听器的问题
欢呼
I am using Jquery form plugin.
Popup is displayed with image uploading form. Image is uploaded successfully. I want to close the popup after successful upload of image. The below javascript is written in popup content.
$(this).ajaxSubmit({
success: function(dd) {
parent.$.fancybox.close();
}
});
But it is not working. Jquery library, fancybox library included in the popup content and in parent page.
Additionally i want to reload the fancybox again with "dd (ajax return value)" content loaded with it. It will have Jcrop function.
Right now, Jcrop is not working once the ajaxSubmit used to upload an image. Otherwise it is working
EDIT I renamed page1 page2 and page3 to better understand 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>
upload.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 contains (i just test with static image. Didnt write the uploading script here.)
<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 is not working in this method. If i skip the upload.php step, jcrop is working fine in fancybox. So i need to remove and create a new fancybox after upload!
END OF EDIT
try this
var fancyboxProxy = $.fancybox;
$(this).ajaxSubmit({
success: function(dd) {
fancyboxProxy.close();
}
});
EDIT:
I fixed it putting all js in index.php and using jquery live to set the event listener
$(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;
});
});
Cheers
这篇关于Ajax提交后如何关闭fancybox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
