How to disable link before ajax call and enable link after response in jQuery

Question

I want to disable the link before ajax call and enable the link right after the response of the ajax. This is what I am trying, but it is not working:

jQuery(this).prop('disabled', false);

This is my link click event in jQuery:

jQuery("#save").click(function (e) {

    e.preventDefault();
    var pcid = jQuery(this).data('pcid');
    var id = jQuery(this).data('id');
    jQuery(this).prop('disabled', true);

    var state = jQuery('.state').html();

    jQuery.post(ajaxurl, data, function (response) {
        console.log(response.status);
        jQuery(this).prop('disabled', false);

    });
});

Everything is working correctly but the link is not been disabled and enabled after link clicked and ajax response.

This is the HTML of the tag:

<a id="save" href="#">SAVE</a>

https://stackoverflow.com/questions/10276133/how-to-disable-html-links — epascarello, Mar 01 '19 at 18:46
`jQuery(this).prop('disabled', false);` The `this` is not what you think it is there. `console.log(this);` — epascarello, Mar 01 '19 at 18:47
as @epascarello pointed out. You are inside the completion handler for the AJAX post call. Therefore "this" is not referring to the anchor. Try using the element ID to select the anchor again -> $('#save').prop('disabled', false') — daddygames, Mar 01 '19 at 18:51

score 1 · Accepted Answer · answered Mar 01 '19 at 20:27

at the moment the button clicks, you can try to disable it.

$("#save").click(function(e) {
  $(this).attr('disabled','disabled');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="save">SAVE</button>

When you get positive or negative results, you should use the selector instead of "this".

$("#save").removeAttr('disabled');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="save">SAVE</button>

How to disable link before ajax call and enable link after response in jQuery

1 Answers1