I'm trying to something that should be pretty simple: Open up a jquery-ui
modal dialogue with a form in it. When the user submits the form, it shows
the server output right there in the open dialogue. User closes it, and
goes back to the screen where they just were.
I can get it to pop the dialogue and show the form, but when you submit the
form it submits it normally (doesn't use ajax/jquery.form to do it)
Code:
At the bottom of my main document:
<div id="download" title="Download Template"></div>
A random link on the page might look like this:
javascript:download(1584) Download
Here's the "download" function:
function download( id ) {
var cURL = '/templates/download/id/' + id + '/';
load_modal_dialog( cURL, "download" );
}
And that load_modal_dialog() function:
function load_modal_dialog( cURL, oTarget ) {
$("#" + oTarget).dialog({
autoOpen: false,
modal: true,
height: 350,
width: 450,
overlay: {
opacity: 0.5,
background: "black"
}
});
$("#" + oTarget).dialog("open");
$.ajax({
url: cURL,
cache: false,
success: function(html){
document.getElementById(oTarget).innerHTML = html;
}
});
}
This works perfectly, it opens up the URL given which draws a form. Here's
the exact HTML that it currently loads up:
<html>
<head>
<script type='text/javascript' language='javascript'
src='/include/jquery.js'></script>
<script type='text/javascript' language='javascript'
src='/include/jquery.form.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var options = {
target: '#outputdiv', // target
element(s) to be updated with server response
beforeSubmit: function() {
document.body.style.cursor = 'wait'; }, // pre-submit callback
success: function() {
document.body.style.cursor = 'default'; } // post-submit callback
};
// bind to the form's submit event
$('#dlform').submit(function() {
alert('submitting');
$(this).ajaxSubmit(options);
return false;
});
});
</script>
</head>
<body>
<div id='outputdiv'>
<form id='dlform' action='$SCRIPT_NAME' method='post'>
<table>
<tr>
<td>
eMail Address: <input name='email_address' />
</td>
<td>
<input type='submit' value='Download' />
</td>
</tr>
</table>
<input type='hidden' name='controller' value='files'
/>
<input type='hidden' name='action' value='download' />
<input type='hidden' name='id' value='$id' />
</form>
</div>
</body>
</html>
As you can see, this is currently a full HTML page that reloads the jquery
and jquery.form libraries, and does the binding for the form on the page.
I've wrapped the form in the "outputdiv", which is where I want the
returning output from the server after the submit button is clicked to show
up. Clicking the submit button just submits the form.
The "bind" doesn't seem to work at all (It never alerts me). Now, if I were
to load up the URL that is called by the download function all by itself
(outside of the modal stuff), it works perfectly, just not from within the
modal dialogue.
I've tried this without the full <html> ... just the script and the form.
I've tried binding to all forms ( using $('form') and I've even tried to
load an iframe into the modal dialogue (but could never get it to display
anything)
I'm at a loss --- I'm sure someone has crossed this bridge already.
I appreciate your assistance.
--
View this message in context:
http://www.nabble.com/jQuery-Form-and-jQuery-UI-Submission-Problem-tp20788490s27240p20788490.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
