Как запустить скрипт после вызова ajax

Question

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

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

Стандартная кнопка

<input type="button" name="next" class="next action-button" value="Next"/>

И сценарий, который она использует,

<script id="rendered-js">
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function () {
  if (animating) return false;
  animating = true;

  current_fs = $(this).parent();
  next_fs = $(this).parent().next();

  //activate next step on progressbar using the index of next_fs
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  //show the next fieldset
  next_fs.show();
  //hide the current fieldset with style
  current_fs.animate({ opacity: 0 }, {
    step: function (now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale current_fs down to 80%
      scale = 1 - (1 - now) * 0.2;
      //2. bring next_fs from the right(50%)
      left = now * 50 + "%";
      //3. increase opacity of next_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({
        'transform': 'scale(' + scale + ')',
        'position': 'absolute' });

      next_fs.css({ 'left': left, 'opacity': opacity });
    },
    duration: 800,
    complete: function () {
      current_fs.hide();
      animating = false;
    },
    //this comes from the custom easing plugin
    easing: 'easeInOutBack' });

});

$(".previous").click(function () {
  if (animating) return false;
  animating = true;

  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();

  //de-activate current step on progressbar
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

  //show the previous fieldset
  previous_fs.show();
  //hide the current fieldset with style
  current_fs.animate({ opacity: 0 }, {
    step: function (now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale previous_fs from 80% to 100%
      scale = 0.8 + (1 - now) * 0.2;
      //2. take current_fs to the right(50%) - from 0%
      left = (1 - now) * 50 + "%";
      //3. increase opacity of previous_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({ 'left': left });
      previous_fs.css({ 'transform': 'scale(' + scale + ')', 'opacity': opacity });
    },
    duration: 800,
    complete: function () {
      current_fs.hide();
      animating = false;
    },
    //this comes from the custom easing plugin
    easing: 'easeInOutBack' });

});

$(".submit").click(function () {
  return false;
});

Я изменил кнопку, чтобы вызвать ajax запрос, который работает нормально

<input type="button" name="companyNameSearchButtonForm" id="companyNameSearchButtonForm"  class="next action-button" value="Search" onclick="companyNameSearch()"/>

Но как мне заставить его вызывать нажатие следующей кнопки после вызова ajax закончил? Я пытался смоделировать щелчок и т. Д. c, но, похоже, ничего не работает.

Answer 1

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

// form steps module
var formSteps = (function() {

  var current_fs, next_fs, previous_fs; //fieldsets
  var left, opacity, scale; //fieldset properties which we will animate
  var animating; //flag to prevent quick multi-click glitches

  var next = function() {
    if (animating) return false;
    animating = true;

    //...snip
  }

  var previous = function() {
    if (animating) return false;
    animating = true;

    //...snip
  }

  return {
    next,
    previous
  }
})()

$(".next").click(formSteps.next);

$(".previous").click(formSteps.previous);

$(".submit").click(function() {
  return false;
});

Затем в вашей функции companyNameSearch вы можно позвонить formSteps.next() после вашего ajax звонка.