i was able to get it to work but i couldn't use the built in buttons
option for the dialog
$(function() {
var name = $("#name"),
email = $("#email"),
message = $("#message"),
allFields = $([]).add(name).add(email).add(message),
container = $('div.container');
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
resizable: false,
height: 450,
width: 350,
modal: true,
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$("#emailresume").validate({
submitHandler: function() {
$.ajax({
type: 'POST',
url: 'process.php?cmd=emailresume',
dataType: 'html',
data: { name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val() },
success: function(data){
$("#dialog").dialog('close');
},
error: function(){
alert("An error has occurred.
Please try again.");
},
complete: function() {
$("#success").show();
$("#success").fadeOut(6000);
}
});
return false;
},
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: 'li',
meta: "validate",
rules: {
name: {
required: true,
minlength: 3,
maxlength: 40
}
},
messages: {
name: {
required: "Name is required",
minlength: jQuery.format("Name
is, minimum of {0} characters"),
maxlength: jQuery.format("Name
is, maximum of {0}
characters")
}
}
});
$('#emailresumebox').click(function() {
$('#dialog').dialog('open');
});
});
<div id="dialog" title="Email Resume"
style="text-align:left; font-
size:11px;">
<form name="emailresume" id="emailresume"
method="post">
<div class="container" style="display:none;"
id="messageBox">
Please correct the errors below<br>
<div id="msgbox"
style="display:none;"></div>
<ul>
</ul>
</div>
<fieldset>
<label for="name">Name to send
to</label>
<input type="text" name="name"
id="name" class="text"
style="width: 280px;" />
<label for="email">Email to send
to</label>
<input type="text" name="email"
id="email" value="" class="text"
style="width: 280px;" />
<label
for="message">Message(optional)</label>
<textarea name="message" id="message"
class="text" style="width:
280px; height: 108px"></textarea>
<input type="submit" value="Send Email">
</fieldset>
</form>
</div>
On Apr 8, 9:11 am, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> It's possible you're having an issue because the dialog content element is
> moved to the end of the body. So if that element contains form elements,
> rather than an entire form, they'll be removed from the form. For more info
> (including some work-arounds) see
>
> http://groups.google.com/group/jquery-ui-dev/browse_thread/thread/1e9...
>
> For any further help with the jQuery UI Dialog, note there's a separate
> mailing list for jQuery UI help:
>
> http://groups.google.com/group/jquery-ui
>
> - Richard
>
> On Tue, Apr 7, 2009 at 11:50 PM, wwor...@gmail.com <wwor...@gmail.com>wrote:
>
> > Jorn i think you might be able to help with this as it relates to your
> > validate stuff, again any help is great.
>
> > I did find some post relating to removing the submit handler for the
> > modal buttons but not sure how to get that to work, tried a few things
> > and couldn't get it to work.
>
> > On Apr 7, 11:07 pm, "wwor...@gmail.com" <wwor...@gmail.com> wrote:
> > > can't seem to get the "button" for the modal to fire off the event for
> > > validate can anymore see what i'm doing wrong here?
>
> > > $(function() {
> > > var name = $("#name"),
> > > email = $("#email"),
> > > message = $("#message"),
> > > allFields =
> > $([]).add(name).add(email).add(message),
> > > container = $('div.container');
>
> > > $("#dialog").dialog({
> > > bgiframe: true,
> > > autoOpen: false,
> > > resizable: false,
> > > height: 450,
> > > width: 350,
> > > modal: true,
> > > buttons: {
> > > 'Email Resume': function() {
> > > $("#emailresume").validate({
> > > submitHandler:
> > function() {
> > > $.ajax({
> > > type:
> > 'POST',
> > > url:
> > 'process.php?cmd=emailresume',
>
> > dataType: 'html',
> > > data: {
> > name: $('#name').val(), email: $('#email').val(),
> > > message: $('#message').val() },
>
> > success: function(data){
>
> > $(this).dialog('close');
> > > },
> > > error:
> > function(){
>
> > alert("An error has occurred. Please try again.");
> > > },
>
> > complete: function() {
>
> > $("#success").show();
>
> > $("#success").fadeOut(6000);
> > > }
> > > });
> > > return
> > false;
> > > },
> > > errorContainer:
> > container,
>
> > errorLabelContainer: $("ul", container),
> > > wrapper: 'li',
> > > meta: "validate",
> > > rules: {
> > > name: {
>
> > required: true,
>
> > minlength: 3,
>
> > maxlength: 40
> > > }
> > > },
> > > messages: {
> > > name: {
>
> > required: "Name is required",
>
> > minlength: jQuery.format("Name is, minimum of {0}
> > > characters"),
>
> > maxlength: jQuery.format("Name is, maximum of {0}
> > > characters")
> > > }
> > > }
> > > });
> > > //return false;
> > > },
> > > Cancel: function() {
> > > $(this).dialog('close');
> > > }
> > > },
> > > close: function() {
>
> > allFields.val('').removeClass('ui-state-error');
> > > }
> > > });
>
> > > $('#emailresume').click(function() {
> > > $('#dialog').dialog('open');
> > > });
>
> > > });
