title: Javascript AJAX request - check for success action
body: <p>I have a Javascript that is called from a button which makes an HTTP GET request. At the moment when it encounters an error it shows a hidden div with the request error, which is all working well. Here's the script:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#callContact1").click(function() {
    console.log('starting event');
    $.ajax({
        url: "&lt;?php echo $eventURL ;?&gt;" + eventID + "&lt;?php echo $eventURL ;?&gt;",
        data: {},
        type: "GET"
      })
      .then(function(data, status, xhr) {
        $('#ajaxResponse1').html(data).show();
        var httpStatus = status;
        var httpResponseCode = (xhr.status);
        console.log('httpStatus: ' + httpStatus);
        console.log('httpResponseCode: ' + httpResponseCode);
      })
      .fail(function(xhr) {
        var httpStatus = (xhr.status);
        var httpResponseCode = (xhr.getAllResponseHeaders);
        var ajaxError = 'There was an requesting the event. HTTP Status: ' + httpStatus;
        console.log('httpStatus: ' + httpStatus);
        console.log('httpResponseCode: ' + httpResponseCode);
        //make alert visible 
        $('#ajaxResponse1').html(ajaxError).show();
      })
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>I now need to extend this slightly to, when it is successful, show a different hidden div with a success message, e.g.:</p>
  
  <pre><code>$('#ajaxResponseSuccess1').html('Event Update in Progress').show();
  </code></pre>
  
  <p>I'm just not sure how to extend this script - fairly new to JS and jQuery at this point.</p>