Disable Jquery button in Chrome

2

I want the button to be disabled during the ajax request and the loading icon appears. 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 javascrip debug by chrome it works perfectly disabling the button and showing the icon. The feeling is that it does not update the screen during the normal process, only when it is in debug mode.

Does anyone have any idea how to solve this?

    
asked by anonymous 02.02.2015 / 22:10

1 answer

2

I could not reproduce the problem. A slightly better way to accomplish this process you are doing might be this:

$(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 beforeSend function will be executed before making the request. Since you need to disable the button and display the image only in the ajax request, it may be time to do so.

The complete function will be executed regardless of whether the result succeeds or fails. Then you can use this moment to re-enable the button and hide the image that indicates the loading of the data.

    
02.02.2015 / 23:16