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

Gabo Esquivel

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

Nimesh07

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.

来源：https://stackoverflow.com/questions/9313918/how-to-close-fancybox-after-ajax-submit

标签

jquery

fancybox

jcrop

How to close fancybox after Ajax Submit?

upload.php