When trying to revert back to the original content after using AJAX to display new HTML data, the .html() function

Question

When trying to revert back to the original content after using AJAX to display new HTML data, the .html() function

Here is the JavaScript I am using 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 ...');
    });
  });
});

Issue with restoring content:

When I try to restore the original content after displaying a success message, the content appears to display, fade out, then replace the original content. The success message displays correctly without trying to restore the content.

What's causing this behavior?

Console log for the data returned from ajax:

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

The data returned remains consistent regardless of attempting to restore content or not.

Console log for the original_content_qty shows:

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

Could there be an error in how I'm trying to restore the content?

javascript ajax jquery-ajaxq

Answer 1

Answer №1

I put something together, you'll need to connect 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>

Answer 2

I put something together, you'll need to connect 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>

When trying to revert back to the original content after using AJAX to display new HTML data, the .html() function

Answer №1

Similar questions

Learn how to seamlessly connect lists in Vue with these foolproof steps

Trouble with Angular: Passing output between child components is not working

What steps can be taken to delete a cookie when the server cannot be accessed?

Is it possible to utilize href alongside the urlRouterProvider?

Encountering a parsing issue: an unexpected token was found, expecting "," instead

Displaying extra dropdown menus when a specific option is chosen within a pop-up using JQM

Finding the index of a chosen option in Angular

It appears that the Next.js environment variables are not defined

Searching for a point within a specified range using Sequelize

tips for transferring a javascript function value to a label within a webform

Using Alpine JS to rotate through images at regular intervals using the window.setInterval() method

Why is it necessary to define a property outside the constructor in Typescript, when in Javascript I wouldn't have to do that?

Using JQuery to Update Text, Link, and Icon in a Bootstrap Button Group

Developing an interactive website utilizing AngularJS, WCF Service, and SQL Server

Tips on inserting javascript to modify the CSS class of a table data cell in a Flask WTF jinja2 table based on the cell's value

Replacing the tbody element in React with centered text using inline styles ---If you want

Improve code efficiency by streamlining a function and using more effective syntax techniques

Employees are unable to operate within an HTML page embedded in a WPF project

Issue with AngularJS ngGrid rendering incorrect page size and malfunctioning pagination

How come my form isn't functioning properly on mobile devices?