title: How to trigger script after ajax call
body: <p>I am using a form that that I think is using a event listener to know when a button is being clicked and then changes the form to the next fieldset.</p>
  
  <p>I need to make an ajax call and then once complete to trigger this call but I can't work out how to do it.</p>
  
  <p>The standard button is </p>
  
  <pre><code>&lt;input type="button" name="next" class="next action-button" value="Next"/&gt;
  </code></pre>
  
  <p>And the script it is using is</p>
  
  <pre><code>&lt;script id="rendered-js"&gt;
  //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;
  });
  </code></pre>
  
  <p>I have changed the button to call an ajax query which is working fine</p>
  
  <pre><code>&lt;input type="button" name="companyNameSearchButtonForm" id="companyNameSearchButtonForm"  class="next action-button" value="Search" onclick="companyNameSearch()"/&gt;
  </code></pre>
  
  <p>But how can I get it to trigger then clicking of a next button after the ajax call has completed? I have tried to simulate the click etc but nothing seems to work.</p>