Disable Jquery button in Chrome

Question

I want the button to be disabled during the ajax request and the loading icon to appear. I made the following script:

$(document).ready(function(){

   //Clicar no botão deletar selecionadas
   $('#deleteSelecionados').click( function () {
       //Desabilita o botao
       $("#deleteSelecionados").attr("disabled", "disabled");
       //Mostra icone de carregando
       $("#loadIcon").css('visibility','visible');
       //Solicitação ajax
       jQuery.ajax({
            url: strUrl,
            success: function(json) {
                 // qualquer coisa

            },
             async:false
         });    
       //Habilita botao
       $("#deleteSelecionados").removeAttr("disabled");
       //remove icone
       $("#loadIcon").css('visibility','hidden');

    });
 });

The process works correctly in Firefox but in Chorme when executed nothing happens, when I run with the debug of javascrip by Chrome it works perfectly disabling the button and showing the icon. The feeling is that it doesn’t update the screen during normal process, only when it is in debug mode.

Does anyone have any idea how to fix this?

Answer 1

I couldn’t reproduce the problem. A slightly better way to accomplish this process you are doing may be as follows:

$(function(){

  $('#deleteSelecionados').on('click', function(){
    var self = $(this),
        icon = $('#loadIcon');
    
    $.ajax({
      url: '',
      beforeSend: function(){
        self.attr('disabled', 'true');
        icon.css('visibility','visible');
      },
      success: function(json){
         // faz algo
      },
      complete: function(){
        self.removeAttr('disabled');
        icon.css('visibility','hidden');
      }
    });
  });
});

#loadIcon { visibility: hidden }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<button id='deleteSelecionados'>Deletar selecionados</button>
<img id='loadIcon' src='http://i.stack.imgur.com/agofk.gif'/>

The function beforeSend shall be executed before the request is made. Since you need to disable the button and display the image only in the ajax request, it may be time to do so.

The function complete will be executed regardless of whether the result ends successfully or error. Then you can use this moment to enable the button again and hide the image that indicates the data upload.