jQuery addClass and removeClass not working in keyup ajax call

Question

I am trying to disable an input when there is a result from database on keyup function. The addClass and removeClass are not working. They simply don't fire. Any help appreciated.

$("#patient_code").keyup(function() {
  var patient_code = $(this).val();
  var patient_category = $('#patient_category').val();
  var medicine_id = $('#medicine').val();

  var formData = {
    _token: $('[name="csrf_token"]').attr('content'),
    patient_code: patient_code,
    medicine_id: medicine_id,
    patient_category: patient_category
  }

  $.ajax({
    type: "POST",
    url: "/medicines/confirmation/checkConfirmation",
    data: formData,
    dataType: "JSON",
    success: function(response) {
      if (!jQuery.isEmptyObject(response.confirmation_status)) {
        $(".patient_has_confirmationform").show();
        $(".selected_patient_code").html(response.confirmation_status[0].patient_code);

        //THIS IS NOT FIRING                    
        $(".btnSaveConfirmation").removeClass().addClass("btn btn-borders btn-danger btn-lg disabled").attr("disabled", true);

        console.log("there is a result for that patient code ");
      } else {
        $(".patient_has_confirmationform").hide();

        //THIS IS NOT FIRING                                        
        $(".btnSaveConfirmation").removeClass().addClass("btn btn-borders btn-success btn-lg").attr("disabled", false);

        console.log("there are no results for that patient code ");
      }
    },
    error: function(jqXHR, textStatus, errorThrown, data) {
      console.log(jqXHR, textStatus, errorThrown, data);
    }
  });
});

Are you sure the AJAX request is completing successfully? Are the classes actually applied in the DOM? Are their rules specific enough? — Rory McCrossan, Feb 24 '17 at 09:24
@RoryMcCrossan yes. They return an array if there is a result and if not then it is empty. there is only one input with that class on the page. and in the ajax call the classes are not appending at all. but if i remove the removeClass from the else, it works and disables the button — z0mbieKale, Feb 24 '17 at 09:28
Try seperating it to different lines and check where exactly is the problem — Kostis, Feb 24 '17 at 09:32
[See this](http://stackoverflow.com/questions/16355332/jquery-removeclass-not-removing-all-classes) It may be helpful. — Vishal Kumar Sahu, Feb 24 '17 at 09:36

tRx · Answer 1 · 2017-02-24T09:34:11.840

1

Is it working if you do this? I'm not sure if jquery handles addClass after removeClass correctly.

$(".btnSaveConfirmation").removeClass();
$(".btnSaveConfirmation").addClass("btn btn-borders btn-success btn-lg");
$(".btnSaveConfirmation").attr("disabled", false);

Edit: addClass and attr is not working because you remove the .btnSaveConfirmation class..

edited Feb 24 '17 at 09:34

answered Feb 24 '17 at 09:32

tRx

815
1
15
24

Please answer when you are bit sure regarding your response. – Vishal Kumar Sahu Apr 27 '17 at 13:35

score 1 · Accepted Answer · edited Feb 24 '17 at 09:49

1

Why do you expect removeClass/addClass to work?

Feed something to .removeClass('Someclass')
If you are removing the same class that is selecting it .removeClass('btnSaveConfirmation'), how will it recognize the element to add class to?

So your approach should be something like this--

$(".btnSaveConfirmation").addClass('NewClass');
$('.NewClass').removeClass(".btnSaveConfirmation").addClass("btn btn-borders btn-success btn-lg").attr("disabled", false);

edited Feb 24 '17 at 09:49

Oded

489,969
99
883
1,009

answered Feb 24 '17 at 09:33

Vishal Kumar Sahu

1,232
3
15
27

1

Thanks, you gave me a new thing to know... :D – Vishal Kumar Sahu Feb 24 '17 at 09:45

score 1 · Answer 3 · answered Feb 24 '17 at 09:35

You're removing your button class, with removeClass (btnSaveConfirmation), you should use specific classes in remove, like $('...').removeClass('btn btn-lg btn-disabled disabled ...');

So that means, you are triggering addClass removeClass once, and then it can't find the button.

Best way to solve this, is to use id for recognization, instead of class, then you can simply remove all classess from your button and it will work.

$("#patient_code").keyup(function() {
   console.log("I do trigger on keyup!");
   
   if ( $(".btnSaveConfirmation")[0]) $(".btnSaveConfirmation").removeClass().addClass("btn btn-borders btn-danger btn-lg disabled").attr("disabled", true);
   else console.log("There's no button with class: btnSaveConfirmation");
});

#patient_code { width: 200px; border-radius: 4px; border: 1px solid #444; padding: 0px 5px; height: 25px; line-height: 25px; outline: none; }

.btn {
 border: 1px solid green;
}
.btn-danger { background: red; }
.btn-lg { height: 200px; }
.disabled { opacity: 0.5; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="patient_code" value="" placeholder="Type in something" />

<button class="btnSaveConfirmation">Button class changes</button>

jQuery addClass and removeClass not working in keyup ajax call

3 Answers3