jQuery UI modal form not working properly
I am having a problem using the modal form. When the dialog opens the first time, the validation and form do not validate/submit. If I cancel the dialog and then open it a second time it validates/submits. Any help or suggestions would be greatly appreciated.
Here is the html:
table row that is clickable:
<tr onclick="selectRowEffect_shipping(this, 2), shippingDate(), getHALzip()" onmouseout="rowOutEffect(this)" onmouseover="rowOverEffect(this)" class="moduleRow" id="HALrow">
divs:
<style>
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<div id="zip-form" title="Fedex Hold At Location" style="display:none;">
<form>
<p class="validateTips">Enter a 5 digit zip code:</p>
<input type="text" name="zip" id="zip" class="text ui-widget-content ui-corner-all">
</form>
</div>
<div id="zip-results" title="Fedex Hold At Location" style="display:none;">
<br />
<table id="zip-results-table" class="ui-widget ui-widget-content">
<thead>
</thead>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</div>
javascript:
function getHALzip() {
$(function() {
var zip = $( "#zip" ),
allFields = $( [] ).add( zip ),
tips = $( ".validateTips" );
$( "#HALrow" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be " +
min + " digits." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#zip-form" ).dialog({
autoOpen: true,
show: {effect: "blind", duration: 1000},
hide: {effect: "clip", duration: 1000},
height: 200,
width: 250,
modal: true,
buttons: {
"View Locations": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( zip, "zip", 5, 5 );
//bValid = bValid && checkRegexp( zip, /^[0-9]{5}$/, "Five digit Zip Code required." );
bValid = bValid && checkRegexp( zip, /(^\d{5}$)/, "Please enter a valid zip code." );
if ( bValid ) {
getHAL(zip);
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#zip-form" )
.button()
.click(function() {
$( "#zip-form" ).dialog( "open" );
$("#zip-form").submit();
});
});
}
function getHAL(zip) {
$(function() {
var zip = $( "#zip" );
$( "#zip-results-table thead" ).append( "<tr class=\"ui-widget-header \">" +
"<th>Results for " + zip.val() + ":</th>" +
"</tr>" );
$( "#zip-results" ).dialog({
autoOpen: true,
show: {effect: "blind", duration: 1000},
hide: {effect: "clip", duration: 1000},
height: 500,
width: 450,
modal: true,
buttons: {
"Save Location": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#zip-results" )
.button()
.click(function() {
$( "#zip-results" ).dialog( "open" );
});
});
}