2

I am using jquery fancybox 2 to load an iframe form. The form submits and writes the data to the database then closes the fancybox. So that part of its all good. However i want to retrieve a hidden field value from the iframe form. This value will then hide the corresponding id on the parent page. I try to get the hidden field value using the beforeClose option. However i cannot get the hidden field value.

The hidden field has an pageload. fancybox code:

$(".various").fancybox({
      maxWidth : 800,
      maxHeight   : 700,
      fitToView   : false,
      width    : '70%',
      height      : '90%',
      autoSize : false,
      closeClick  : false,
      openEffect  : 'fade',
      beforeClose : function(){
        var pageload = $('#pageload').val();            
        console.log('var = ' + pageload);
      },
      afterClose : function(){
        if(pageload != 0){
            $('#'+pageload).slideUp('slow');
        } else {
            window.location.reload(true);
        }
      }
    });

and the fancybox is triggered by :

<a href="editcategory.php&pageload=<?php echo $sub_id; ?>" class='various' data-fancybox-type='iframe'>LINK</a>

When the iframe popsup there is :

<input type="hidden" value="<?php echo $_GET['pageload']; ?>" id="pageload" name="pageload" />

And all i need to do is return the pageload value back to the afterClose function. I have tried using the afterLoad function to get value, the beforeClose function but none of them seem t give me an answer apart from null. This will then 'slideup' that id and then clear it in the index page.

If the value = 0 it will do a page reload.

I have searched all day for an answer but they all seem very complex for probably a simple 2 line function.

1 Answer 1

1

First, you need to declare the variable pageload on the top of your script. Right now it is just valid inside the beforeClose callback function so

<script>
 var pageload;
 .
 .

then your fancybox callbacks

// we won't use beforeClose but beforeShow
beforeShow: function(){
 // get the value of pageload INSIDE the iframe
 pageload = $('.fancybox-iframe').contents().find('#pageload').val();
},
afterClose : function(){
 if(pageload != 0){
  $('#'+pageload).slideUp('slow');
 } else {
  window.location.reload(true);
 }
}

NOTE : this is for fancybox v2.0.6+

5
  • Thanks for a quick answer.. I added the var pageload; right under my <script>. It failed to show any result , so i firebugged / alerted the pageload variable and it gave me the answer undefined.<br/>I am using fancybox v2.0.6 Jul 15, 2012 at 21:36
  • Sussed it.. Thanks for the help i need to use the afterShow function instead of the beforeShow and it worked perfect. Jul 15, 2012 at 21:41
  • Maybe not... it worked first time and now fails with undefined again... i will keep trying... Jul 15, 2012 at 21:49
  • make sure that the ID in id="pageload" is unique in your document
    – JFK
    Jul 15, 2012 at 23:22
  • also make sure that your .fancybox() function is called after the document is ready ....see $(document).ready()
    – JFK
    Jul 15, 2012 at 23:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.