This has me stumped. I have a page with jQueryUI tabs. Each tab is populated via ajax. On the fourth tab a user can click a button which brings up a modal dialog. The dialog is a form that accepts user input, posts the form via ajax, closes the dialog, then updates the page with the new data.
I use custom buttons in the dialog instead of the 'buttons' option. There are two buttons on the dialog: 'Cancel' and 'Add New'. The buttons work exactly as planned in FF, but in IE7 and IE8 only the Cancel button works. The Add New button does nothing - no error, no activity.
Here are the buttons in the dialog:
<button id='btn_addInsert_cancel' class='fg-button ui-state-default ui-corner-all'>Cancel</button>
<button id='btn_addInsert_add' class='fg-button ui-state-default ui-corner-all'>Add New</button>
Here is the jQuery for the cancel button:
$('#btn_addInsert_cancel').click( function(){
$('#add_ins').dialog('close');
$('#request_type').val('');
return false;
});
And here is the code for the Add New button:
$('#btn_addInsert_add').click( function(){
$('#insName').attr('disabled', '');
var vAddInsert = $('#frmAddInsert').validate({
rules: {
// Bunch of rules here
},
messages: {
// Bunch of messages here
},
submitHandler: function(form) {
$(form).ajaxSubmit({
success: function(msg) {
// Update web page
},
error: function(){
// error handling
}
})
}
})
});
I have searched the code and set breakpoints, but it just seems that IE does NOTHING when I click the Add New button.
Oh...and I just found the same problem in a similar situation on another page. So it's the setup: jQueryUI tabs using ajax loaded data -> modal dialog with a form requiring an ajax submit. (Note: I use the tabs 'load' method to ensure javascript binding when a tab loads)
Help!