Ajax提交后如何关闭fancybox？

发布于 2025-01-05 21:05:35 字数 2916 浏览 5 评论 0原文

我正在使用 Jquery 表单插件。

弹出窗口显示图像上传表单。图片上传成功。我想在成功上传图像后关闭弹出窗口。下面的 javascript 是在弹出内容中编写的。

$(this).ajaxSubmit({    
  success: function(dd) {
   parent.$.fancybox.close();
  }
});

但它不起作用。 Jquery 库、fancybox 库包含在弹出内容和父页面中。

另外，我想再次重新加载 fancybox，并加载“dd（ajax 返回值）”内容。它将具有 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！

编辑结束

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦幻之岛 2025-01-12 21:05:35

试试这个

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;
    });

});

演示

来源

干杯

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;
    });

});

demo

source

Cheers

回复收藏 0 原文

Smile简单爱 2025-01-12 21:05:35

感谢您的好代码。

只需在 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.'" width="250" />';
} else {
    print "Upload failed!";
}
?>

您将得到完美的结果。

Thanks for nice code.

Just insert bellow code in test.php file.
create upload folder in your root.

<?php 
$path = 'upload';

$name = $_FILES["user_photo"]["name"];
if (move_uploaded_file($_FILES['user_photo']['tmp_name'], $path.'/'.$name)) {
    echo '<img src="'.$path.'/'.$name.'" width="250" />';
} else {
    print "Upload failed!";
}
?>

You will get your perfect result.

回复收藏 0 原文

~没有更多了~