Выполнить JavaScript функцию после Ajax успеха

Question

У меня есть две функции, которые я хочу запустить после успешного вызова Ajax, но только одна работа.

Код Javascript работает, если я поместил его вне вызова Ajax, и он работал как щелчок. По сути, я щелкаю элемент и заполняю значение ввода этого элемента другим. Но теперь я хочу заполнить значение только после успешного вызова.

Оригинальный код:

$('*[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());
    }
}

Это вызов Ajax. "MyAlertTop ();" работает, но я не могу заставить "showMessage ()" сделать то же самое.

$("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);

    }
  });
});

Я понимаю, что onlick не будет работать, поэтому я отчаянно пытался загрузить, а также вызвать функцию напрямую, но ничего не работает. Я также попытался повторить JS внутри campbdgtedit. php, но это тоже не сработало.

Основная проблема заключается в том, что существует много интерактивных элементов, по одному в каждой строке таблицы, и только элемент в той же строке должен быть изменен.

У вас есть решение этой проблемы?

Answer 1

Насколько я понимаю, вы можете обновить showMessage(), чтобы принять сам элемент вместо события.

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

И теперь вы можете вызывать этот метод сразу после ajax success, поэтому ваш ajax success метод будет выглядеть примерно так:

$("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 для справки https://jsfiddle.net/4ahef7mt/2/ надеюсь, это поможет.

Answer 2

Вы должны попробовать использовать fetch, а затем. Как только запрос получен и дан ответ, он выполняет «then (callback)». Таким образом, вы можете вызвать свою функцию и передать полученные данные.

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

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