views:

241

answers:

0

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!