Search code examples
javascriptjqueryajaxbootstrap-modalajaxform

How to call a javascript function inside ajax success?


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");
       }
   })   
}
); 

Solution

  • 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");
           }
       })   
    }
    );