Question

The code below works great in Chrome and it works intermittently in IE7 and not at all in IE8… Originally I wasn’t disabling/enabling the checkboxes, but since I noticed IE data not updating properly I thought maybe it couldn’t keep up with users clicking too fast so that’s when I tried disabling all the checkboxes any time one is clicked then reenabling them once the query succeeds. That’s when it became obvious that the behavior is odd and random.

edit I just cleared my cache in IE and reloaded the page. I was able to check and uncheck each box once successfully. Once each action had been applied to each box, it ceased working. Is this a caching issue?

       $('input[type=checkbox]').live('click', function () {
           //disable all checkboxes until it's done saving
           $('input[type=checkbox]').attr('disabled', true);
           if ($('input[id=' + $(this).attr('id') + ']:checked').length) {
               //do checked stuff including ajax call
               $.ajax({
                   url: 'EditService.svc/updatedatachecked',
                   type: 'GET',
                   data: { "code": code },
                   dataType: 'json',
                   success: function () {
                       //reenable all checkboxes
                       $('input[type=checkbox]').removeAttr('disabled');
                   },
                   error: function (a, b, c) {
                       $('.EditStatus').html("Database Error!");
                   }
           } else {
               //do unchecked stuff including ajax call
               $.ajax({
                   url: 'EditService.svc/updatedataUNchecked',
                   type: 'GET',
                   data: { "code": code },
                   dataType: 'json',
                   success: function () {
                       //reenable all checkboxes
                       $('input[type=checkbox]').removeAttr('disabled');
                   },
                   error: function (a, b, c) {
                       $('.EditStatus').html("Database Error!");
                   }
           }
       });

Answer 1

This actually was a caching issue. I included a time stamp in each ajax call and it began working as expected.

$('input[type=checkbox]').live('click', function () {
       //disable all checkboxes until it's done saving
       $('input[type=checkbox]').attr('disabled', true);
       if ($('input[id=' + $(this).attr('id') + ']:checked').length) {
           //do checked stuff including ajax call
           $.ajax({
               url: 'EditService.svc/updatedatachecked',
               type: 'GET',
               data: { "code": code, "timestamp": timestamp },
               dataType: 'json',
               success: function () {
                   //reenable all checkboxes
                   $('input[type=checkbox]').removeAttr('disabled');
               },
               error: function (a, b, c) {
                   $('.EditStatus').html("Database Error!");
               }
       } else {
           //do unchecked stuff including ajax call
           $.ajax({
               url: 'EditService.svc/updatedataUNchecked',
               type: 'GET',
               data: { "code": code, "timestamp": timestamp },
               dataType: 'json',
               success: function () {
                   //reenable all checkboxes
                   $('input[type=checkbox]').removeAttr('disabled');
               },
               error: function (a, b, c) {
                   $('.EditStatus').html("Database Error!");
               }
       }
   });