My goal: upon clicking a link, I want to load an external page (with a image upload form) into a jQuery UI Dialog and have it submitted AJAX style.
My problem: The dialog loads the external PHP page just fine and I'm able to submit the form via AJAX -- using the jQuery form plugin shown here http://jquery.malsup.com/form/ -- BUT for some reason the AJAX submission won't work inside the dialog box, only when I view the page directly. It simply loads the page itself as if the JS was turned off or something.
Here's the parent page displaying the dialog:
port_edit.php (header)
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow(){
location.reload(true);
}
$(document).ready(function() {
$('#gallery-display').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: 'Gallery Display',
width: 280,
height: 280,
close: refreshWindow,
resizable: false
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
port_edit.php (link)
<a href="image_upload.php" id="gallery-display">Modify</a>
And the external document loaded into the dialog:
image_upload.php
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// attach handler to form's submit event
$('#image-upload').submit(function() {
// submit the form
$(this).ajaxSubmit();
return false;
}); });
</script>
</head>
<body>
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" />
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>
HELP!