Seeking assistance with a Wordpress plugin I've created using PHP. It's a gallery plugin that allows users to add captions and custom fields for images. The forms are displayed in a Fancybox modal, triggered by clicking input buttons.
Here is an example of the edit function:
$(".edit").click(function() {
var formData = $(this).closest('form').serializeArray();
formData.push({ name: this.name, value: this.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;
});
The issue I'm facing is integrating the Edit form within an iframe, so that when the form is submitted, the action page appears inside the iframe instead of the main window. Currently, the action page loads in the main window causing exit from the WordPress admin area. How can I achieve this using an iframe for the Edit form and pass input values from the main window form to the fancybox-iframe with the edit form inside?
The HTML code for the form that opens the Fancybox looks like this:
<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 Add Image form is simpler and functions correctly, displaying in the iframe as intended:
$("#upload").click(function() {
$.fancybox.showActivity();
$.fancybox({
'type' : 'iframe',
'width' : '50%',
'height' : '75%',
'href' : '<?php echo plugins_url(); ?>/upload/addImage.php'
});
});
I hope you understand my dilemma and can provide guidance. Thank you in advance!