Home/ Questions/Q 7504479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T21:35:09+00:00

I am using Jquery form plugin. Popup is displayed with image uploading form. Image

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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