How to call a javascript function inside ajax success?

Question

I want to activate the update button once the validate button is clicked and also when the data values are valid. Once the data values are valid the update button functions.

This is the html code for the buttons inside a modal

<div class="modal-footer">
        <button type="button" class="btn btn-primary validatebtn" id="btn_validate" onclick="activateupdate()">Validate</button>
        <button type="button" class="btn btn-primary causeUpdatebtn" id="btn_update" disabled="disabled">Update</button>

Here is the AJAX code. I am extracting the values from the modal. It gives the output as valid but the update button still is not enabled.

What changes should i make so that the activateupdate() function is called

$(document).ready(function () {
   activateupdate();

})

$(document).on('click','.validatebtn', function(){
   let ValidId = $('#span_id').text();
   let ValidDesc = $('#Desc').val();

   let causeObj = new Object();
   causeObj.causeId = ValidId;
   causeObj.causeDescription = ValidDesc;

   let ValidFinalObj = new Object();

   $.ajax({
       type: 'POST',
       url: 'https://.../validate_apicall',  (taking an example)
       contentType: 'application/json',
       data: JSON.stringify(ValidFinalObj),
       success: function (data) {
           if(data.indexOf('Failed') > -1){
               pwIsf.alert({msg:'Not valid',type:'error'});   
           }
           else {
               pwIsf.alert({msg:'Valid',type:'info'}); 

               activateupdate()
               {
                   document.getElementById('btn_update').removeAttribute('disabled')
               } 
           }
       },
       error: function (xhr, status, statusText) {            
           console.log("Failed to Validate");
       }
   })   
}
); 

Answer 1

Why you use a function syntax inside your code?! Just change your code to this

$(document).ready(function () {
   activateupdate();

})

$(document).on('click','.validatebtn', function(){
   let ValidId = $('#span_id').text();
   let ValidDesc = $('#Desc').val();

   let causeObj = new Object();
   causeObj.causeId = ValidId;
   causeObj.causeDescription = ValidDesc;

   let ValidFinalObj = new Object();

   $.ajax({
       type: 'POST',
       url: 'https://.../validate_apicall',  (taking an example)
       contentType: 'application/json',
       data: JSON.stringify(ValidFinalObj),
       success: function (data) {
           if(data.indexOf('Failed') > -1){
               pwIsf.alert({msg:'Not valid',type:'error'});   
           }
           else {
               pwIsf.alert({msg:'Valid',type:'info'}); 

               document.getElementById('btn_update').removeAttribute('disabled') // <- HERE
           }
       },
       error: function (xhr, status, statusText) {            
           console.log("Failed to Validate");
       }
   })   
}
); 

Answer 2

The issue is because you've put the logic which enables the button in a (syntactically incorrect) function which you never call. From the description of what you want to achieve you simply need to remove that block.

Firstly remove the onclick attribute form the HTML. They are bad practice and it's not needed here anyway.

<div class="modal-footer">
  <button type="button" class="btn btn-primary validatebtn" id="btn_validate">Validate</button>
  <button type="button" class="btn btn-primary causeUpdatebtn" id="btn_update" disabled="disabled">Update</button>

Then remove the offending block from your success handler function:

success: function(data) {
  if (data.indexOf('Failed') > -1) {
    pwIsf.alert({
      msg: 'Not valid',
      type: 'error'
    });
  } else {
    pwIsf.alert({
      msg: 'Valid',
      type: 'info'
    });

    $('#btn_update').prop('disabled', false)
  }
},