在 Ajax 成功后运行 JavaScript function

Question

I have two functions that I want to run after the Ajax call succeeds but only one work.

The Javascript code is working if I put it outside the Ajax call and it worked as an onclik. Basically, I click an element and fill the value of the input of this element in another. But now I want to fill the value only after the call succeeds.

The original code:

$('*[id^="newbudbtn-"]').on('click', showMessage); //This is the line I want to be executed after the Ajax call

function showMessage(event) {
    var elem = $(event.target);
    var id = elem.attr('id').replace('newbudbtn-', '');

    var source = $('#newbud-' + id)
    var target = $('#bud-' + id);

    if (source.length && target.length) {
      target.text('$' + source.val());
    }
}

This is the Ajax call. "myAlertTop();" is working, but I can't get "showMessage()" to do the same.

$("a.bgbtb").click(function(){
  var btnid = $(this).attr("id").split('newbudbtn-')[1];
  var newbudget = $("INPUT[id=newbud-"+btnid+"]").val();
  var platform = $("span#"+btnid).text(); 
  $.ajax({
    url:"campbdgtedit.php",
    method:"POST",  
    data:{platform:platform, btnid:btnid, newbudget:newbudget}, 
    success:function(data){
        myAlertTop();
        $('*[id^="newbudbtn-"]').on('click', showMessage);

    }
  });
});

I understand that the onlick won't work, so I tried desperately onload and also calling the function directly, but nothing seems to work. I also tried echoing the JS inside campbdgtedit.php, but it didn't work too.

The major issue is that there are many clickable elements, one on each row of a table, and only the element on the same row should be changed.

Do you have a solution to this problem?

Answer 1

You should try using fetch and then. As soon as the request is received and the response is given, it executes the 'then(callback)'. That way you could call your function and pass the received data.

fetch(url, {request config}).then((response) => {

 /*write code and use the data */ 
});

Answer 2

From what I understand you can update your showMessage() to accept the element itself instead of an event.

updated showMessage

function showMessage(elem) {   
    var id = elem.getAttribute('id').replace('newbudbtn-', '');

    var source = '#newbud-' + id;
    var target = '#bud-' + id;

    console.log(source);
    console.log(target);
}

And now you can call this method directly after ajax success, so your ajax success method will look something like

$("a.bgbtb").click(function(){
  const _btn = this;
  var btnid = $(this).attr("id").split('newbudbtn-')[1];
  var newbudget = $("INPUT[id=newbud-"+btnid+"]").val();
  var platform = $("span#"+btnid).text(); 
  $.ajax({
    url:"campbdgtedit.php",
    method:"POST",  
    data:{platform:platform, btnid:btnid, newbudget:newbudget}, 
    success:function(data){
        myAlertTop();
        showMessage(_btn);
    }
  });
});

jsfiddle link for reference https://jsfiddle.net/4ahef7mt/2/ hope this helps.