I hope the title makes sense. Ultimately what I have is a piece of jQuery code that causes all the links on a given page to open into their own dynamically sized jQuery window.
<script type="text/javascript">
$(document).ready(function() {
$('#start, #footer a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
title: $link.attr('title'),
width: $link.attr('width')
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
One of the pages is a contact form that I then want to process using this jQuery code:
<script type="textjavascript">
$(document).ready(function(){
// Send Contact Form
$("form#frmContact").submit(function() {
var dataStr = $("#frmContact").serialize();
alert(dataStr);
$.ajax({
type: "POST",
url: "process.php",
data: dataStr,
success: function(del){
$('#contact-thanks').fadeIn();
}
});
return false;
});
});
</script>
Here's the form
<form id="frmContact">
<span class="frmTitle">Your Name</span><br /><input type="text" class="textbox" name="n" value="" /><br />
<span class="frmTitle">Your E-mail</span><br /><input type="text" class="textbox" name="e" value="" /><br />
<span class="frmTitle">Topic</span><br /><select name="topic"><option value="">Select</option><option value="General">General</option><option value="Support">Support</option></select><br />
<span class="frmTitle">Questions / Comments</span><br /><textarea name="comments" class="contact-comments" value=""></textarea><br />
<input type="submit" value="Submit" /><br />
</form>
<div id="contact-thanks" style="display:none;">Thanks for contacting us, we'll be in touch soon!</div>
But what I need to have happen is all the processing to be handled and anchored in side the jQuery popup that is opened by the first piece of code so that after a user submits the form, they stay in the window and see the success div.