Cannot disable button in javascript after AJAX call

Question

I have the following js file and I want to disable a button after my AJAX call:

$('document').ready(function() {
  const runField = $('input[id=run]')
  const runButton = $('.btn-run')
  const saveButton = $('.btn-save')

  runButton.on('click', function(event) {
    console.log('run clicked')
    runField.val(1)
    event.preventDefault()
    $('.btn-run').prop('disabled', true)
    console.log($('.btn-run').prop('disabled'))
    runCode()
    $('.btn-run').prop('disabled', false)
  })
})

runCode() is my AJAX function here, but when I used .prop('disabled', true) the button was still not disabled, even though the following logged line returned true in my console. I made sure all the properties like ID's are correct. Any help appreciated!

Answer 1

You need to use a promise or a callback function for $('.btn-run').prop('disabled', false) - sharing your runCode would help if possible.

You AJAX callback should look something like below. URL will be different, but $('.btn-run').prop('disabled', false) is being run on success. This should mean it will take effect.

$.ajax({
    url: "demo_test.txt", 
    success: function(result){
        $('.btn-run').prop('disabled', false)
    }
});