Send input values from main window to fancybox iframe correctly

2 Views

I was wondering if someone could help me. I have made a simple
plugin for WordPress using php. It’s a gallery that allows the user to
add captions and custom fields for the images.. The forms are
displayed using a Fancybox, that is opened by clicking input-
buttons…

The edit-function looks like this:

Read More
$(".edit").click(function() {
    var formData = $(this).closest('form').serializeArray();
    formData.push({ name: this.name, value: this.value }); //this is
to get the submit-buttons value

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "<?php echo plugins_url(); ?>/upload/
editImageForm.php",
        data        : formData,
        success: function(data) {
            $.fancybox(data);
        }
    });
    return false;

});

Since the edit-form needs the imageID to edit the right image-
information I currently send it through a hidden field.

My problem is that I want the Edit-form to be displayed inside a
Iframe, so that when submitting the edit-form the form-action-page
appears inside the iframe. Currently the form-action-page loads in the
main window.. and exit from the wordpress admin-area.. How do I use an
iframe for the Edit-form, and how do I send input values from a form
in the main window, to the fancybox-iframe (with the edit-form
inside)?

The HTML for the form that opens the fancybox looks like this, this is displayed next to each image in the overview page: 

<form method='post' action='' class="imageform">
    <input type='submit' value='Edit' name='edit' class="edit imageButton" />
    <input type='submit' value='Delete' name='delete' class="delete imageButton" onClick="return delete('<?php echo $image->name; ?>', '<?php echo $image->id; ?>')"/>
    <input name='imageID' type='hidden' value='<?php echo $image->id; ?>' class="imageID" />
    <input name='imageNavn' type='hidden' value='<?php echo $image->name; ?>' class="imageNavn" />
</form>

(The delete-function on the delete button only display a confirm-box in javascript, asking if the user are sure he/she wants to delete the image..)

The Add Image-form is a bit simpler works as it should, and the iframe
displays correctly: 

$("#upload").click(function() {
    $.fancybox.showActivity();

    $.fancybox({
        'type'              : 'iframe',
        'width'             : '50%',
        'height'            : '75%',
        'href'              : '<?php echo plugins_url(); ?>/upload/
addImage.php'
    });

});

Hopefully you understand my problem and will be able to help me 😉

Thanks in advance!

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. There does not seem to be way to set name of iframe, which is created.

    Here’s code which generates fancybox iframe and as it shows, it just takes current time to make created iframes unique.

    case 'iframe' :
    $('<iframe id="fancybox-frame" name="fancybox-frame' + new Date().getTime() + 
      '" frameborder="0" hspace="0" scrolling="' + selectedOpts.scrolling + 
      '" src="' + selectedOpts.href + '"></iframe>').appendTo(tmp);

    I’ll have to write patch (probably trivial) to fancybox to make our system to support this. Hope that someone does the same to fancybox mainline.

    I needed the feature, because I do file upload in fancybox and Selenium testing environment needs to know iframe name to be able to move to window and input test data automatically.

  2. Avoid using iframe becase its not they are a pain in the (…) so instead just use ajax, and json if possible can get better result.

    why?

    1. iframes may be disabled by some users
    2. can be hard to work with cross browser
    3. will waste alot of your time by switching back and forward when debuging or developing.

    if you absolutly need to work with iframes well $('iframe').attr('src',url); will change the iframe url. Another way is to use the <a target="frame_name"> when <iframe name="frame_name">

    Then on the iframe itself you need to use top.window or window.top not too sure 🙂 but it gets top most window on dom and use self.window to refer to iframe itself.

    hope this helps some how