AJAX .html(data) not displaying if I attempt to restore original content afterwards

Question

I'm using the following js to handle an ajax request

$(document).ready(function() {
  // Variable to hold original content
  var original_content_qty = '';
  $('.product-qty-<?php echo $products->fields['
    products_id ']; ?>').submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: 'submit.php',
      type: 'POST',
      data: $(this).serialize(),
      dataType: 'html'
    }).done(function(data) {
      original_content_qty = $('.qty-update-<?php echo $products->fields['
                               products_id ']; ?>').html();
      console.log(original_content_qty);
      console.log(data);
      $('.qty-update-<?php echo $products->fields['
        products_id ']; ?>').fadeOut('slow', function() {
        $('.qty-update-<?php echo $products->fields['
          products_id ']; ?>').fadeIn('slow').html(data); //display a success message sent back via ajax
        $('.qty-update-<?php echo $products->fields['
          products_id ']; ?>').delay(1200).fadeOut('slow').html(data);
        $('.qty-update-<?php echo $products->fields['
          products_id ']; ?>').html(original_content_qty); // restore original content after success message
      });
    }).fail(function() {
      alert('Ajax Submit Failed ...');
    });
  });
});

If I dont have the line

$('.qty-update-<?php echo $products->fields['products_id']; ?>').html(original_content_qty);

the success message displays correctly, then fades out as required. But as soon as I add the line to restore the original content it appears as though it displays original content, fades out, then replaces original content.

I don't see any reason why my success message isn't displayed just because I added the line to restore content.

Console log for the data from ajax show me

<style>.block .notice.invalid{display:none;}</style>
  <div class="alert alert-info">
  <strong>Stock updated</strong>
</div>

This is the same regardless of whether I attempt to restore content or not.

Console log for original_content_qty is

Stock: <input type="hidden" name="products_id" value="289"><input type="text" name="products-quantity" value="0" size="4" class="product_quantity_input_289">

Have I made an error in the way I'm trying to restore the content?

Answer 1

I fiddled something together, you need to chain the steps into their own callbacks

$(document).ready(function() {
  // Variable to hold original content
  var original_content_qty = '';
  var form = $('.product-qty-42')
  form.submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: 'submit.php',
        type: 'POST',
        data: $(this).serialize(),
        dataType: 'html'
      })
      .done(function(data) {
        var elem = $('.qty-update-42');
        var original_content_qty = elem.html();
        console.log(original_content_qty);
        console.log(data);
        elem.fadeOut('slow', function() {
          elem.html(data).fadeIn('slow', function() {
            elem.delay(1200).fadeOut('slow', function() {
              elem.html(original_content_qty).fadeIn('slow');
            });
          });
        });
      })
      .fail(function() {
        alert('Ajax Submit Failed ...');
      });
  });
});

$.mockjax({
  url: "submit.php",
  responseText: '<p>Worked</p>'
});

<form class="product-qty-42">
  <div class="qty-update-42">
    <input type="hidden" name="products_id" value="289"><input type="text" name="products-quantity" value="0" size="4" class="product_quantity_input_289">
  </div>
  <input type="submit" name="send">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>