Disable Jquery button in Chrome

Question

Disable Jquery button in Chrome

Navigation

#1 by (2 votes)

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?

javascript jquery google-chrome

asked by anonymous 02.02.2015 / 22:10

1 answer

Jquery taking too long to execute Div div block proportional to itself

score 2 · Accepted Answer

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.