Swap out AJAX following a successful retrieval and when managing errors

Question

Swap out AJAX following a successful retrieval and when managing errors

I currently have a basic AJAX load function set up to load a specific URL:

<div id="load">
<h1 id="status">Loading...</h1>
</div>

<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache: false});
var url = "http://www.example.com/get.php?id=12345";          
$('#load').replaceWith($('<div>').load(url));
});
});
</script>

Currently, I am not seeing the Loading... text while the content is being loaded via AJAX. Shouldn't the replacement only happen after the new content has been successfully loaded? Additionally, if the AJAX load fails, how can I update the status to display Failed?

javascript ajax

Answer 1

Answer №1

When you insert the page into a $('<div>'), you can utilize the .load callback function to carry out the replacement of the status element. Here's an example:

<div id="load">
<h1 id="status">Loading...</h1>
</div>


<script type="text/javascript">
  $(document).ready(function(){
    $.ajaxSetup({cache: false});
    var url = "http://www.example.com/get.php?id=12345";          
    $('<div>').load(url, function() {
      $('status').replaceWith(this);
    });
  });
</script>

Answer 2

When you insert the page into a $('<div>'), you can utilize the .load callback function to carry out the replacement of the status element. Here's an example:

<div id="load">
<h1 id="status">Loading...</h1>
</div>


<script type="text/javascript">
  $(document).ready(function(){
    $.ajaxSetup({cache: false});
    var url = "http://www.example.com/get.php?id=12345";          
    $('<div>').load(url, function() {
      $('status').replaceWith(this);
    });
  });
</script>

Swap out AJAX following a successful retrieval and when managing errors

Answer №1

Similar questions

Is it appropriate to use localStorage in the createSlice "reducers" parameter of React Redux Toolkit?

How to customize the hover background color for multicolored series in Highcharts?

Diving into Discord.JS - Is there a way to check if a specific message content exists within an array?

The issue with mediaDevices.getUserMedia not functioning properly in Safari 11 on iOS 11 persists, as the video output appears as a

Ajax - Is utilizing API Endpoints the correct approach?

Is there a way to extract the content length from the raw DraftJS data?

How can I arrange the ng-class based on the clicked item's order?

Utilize Node.js and an API to generate a new problem in GitHub, but encountering an issue where the response

How to activate select only when specific options are chosen using jQuery

The Ajax function is not defined and results in a runtime error being thrown

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

What purpose does Webpack serve in injecting React?

Discrepancy in post results

Modifying the data of an HTML form using Javascript, encrypting the information, and transferring it to PHP

Is it possible to dynamically check for the existence of an email in an SQL database when a

What is the mechanism by which a custom hook, functioning as a trigger, initiates the re-rendering of a separate function component?

The THREE.LineSegments - geometry.updateNeeded isn't refreshing

Static response is the way to go! Asynchronous responses just don't cut it

Array of notifications in Vue framework

ngDraggable does not function properly when the dropzone is larger and includes a scrollbar on the body