How to close fancybox after Ajax Submit?

Asked 16/2, 2012 at 15:23 Answered 29/7, 2013 at 10:21

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

Gelb answered 16/2, 2012 at 15:23 Comment(2)

Why are you using parent? Unless you're in an iframe just do $.fancybox.close(); – Cryan 16/2, 2012 at 15:26

I tried $.fancybox.close(); not working. $(this).ajaxSubmit({ $.fancybox.close(); }); working – Gelb 16/2, 2012 at 15:28

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

Vicky answered 16/2, 2012 at 15:32 Comment(12)

Not working :( -- There is a loading in the page while uploading the image. Could it cause any problem? --- Just tried without image uploading option, still same problem. – Gelb 16/2, 2012 at 15:34

is the server response 200 OK ? -look on dev tools > xhr requests – Vicky 16/2, 2012 at 15:37

Yes, alert works, The result is loaded from the requested page. But fancybox is not closed. In XHR request, I can see the page2.php with 200 ok. Jquery is loaded twice, Fancy box is loaded once, jcrop is loaded once, form.min loaded twice. page1.php calls image uploading content (page2.php). after submitting that form it loads page3.php in the same fancy box with jcrop. I want to close and reload the fancybox before loading the jcrop! – Gelb 16/2, 2012 at 15:49

what's the type of the fancybox variable and close function ? are they defined ? success: function(dd) {console.log((typeof fancyboxProxy), (typeof fancyboxProxy.close)); } – Vicky 16/2, 2012 at 15:57

I just got "function function" – Gelb 16/2, 2012 at 15:58

cool, so it is not a reference problem... if you are reloading scripts you could be missing bindings... hmmm this could be a workaround if you have the X closing button on $('#fancybox-close').trigger('click'); – Vicky 16/2, 2012 at 16:19

that's odd... is page2.php including scripts again to the DOM ? what if you call fancyboxProxy.close(); before the ajaxSubmit() function, does it work ? – Vicky 16/2, 2012 at 16:35

inside $(document).ready(function() { fancyboxProxy.close(); }); -- Not working ### $(document).ready(function() { $("#form").submit(function() { fancyboxProxy.close(); }) }); -- Not working ##### $(document).ready(function() { $("#form").submit(function() { $(this).ajaxSubmit({ fancyboxProxy.close(); --- working – Gelb 16/2, 2012 at 16:47

Nope. I want fancyboxProxy.close(); to work inside success: function(dd) { but it is not working on there. :( – Gelb 16/2, 2012 at 17:9

if you share the source code, it would be awesome, I'd love to go deeper. – Vicky 16/2, 2012 at 18:45

How do i share the code here? I m just doing testing with three files. Can i attach the three files and those scripts with few images zipped? – Gelb 16/2, 2012 at 19:7

I just typed the three pages content in question (I edited question) – Gelb 16/2, 2012 at 19:20

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.

Weakness answered 29/7, 2013 at 10:21 Comment(0)

upload.php

Recommended topics

Hot tags