Geek Answers Handbook

How to close fancybox after Ajax Submit?

I am using a jQuery form plugin.

A popup window is displayed with a form for uploading an image. Image uploads successfully. I want to close the popup after a successful image upload. The following javascript is written in pop-up content.

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

But it does not work. JQuery library, fancybox library included in pop-up content and on the parent page.

Also, I want to download fancybox again with the contents of "dd (ajax return value)" loaded with it. It will have a Jcrop function.

Right now, Jcrop is not working as soon as ajaxSubmit is used to load the image. Otherwise it works

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'm just testing a static image. I did not write a script download 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 does not work in this method. If I skip the upload.php step, jcrop works fine in fancybox. Therefore, I need to delete and create a new fancybox after loading!

END OF EDITING

0
source share
2 answers

try it 

 var fancyboxProxy = $.fancybox; $(this).ajaxSubmit({ success: function(dd) { fancyboxProxy.close(); } });

code>

EDIT:

I fixed it by putting all js in index.php and using jquery live to install an 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; }); });

code>

demo

source

Greetings

+1
source

Thanks for the nice code.

Just paste the following code into the test.php file. Create a download 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 a great result.

0
source

More articles:


All Articles