Question

I have a .load() function that I need to convert to .ajax(). I initially used .load() because of its ease of use but now I see that in order to achieve my desired result, I must use .ajax().
Here is my .load() function:

$("#rightframe").click(function(){
    $("#screen").load("form.html #contact");
  });

I want to convert that to .ajax() and add the following piece of code to set a minimum time an .ajax() call would take (this is because I have a loading GIF that looks weird if it doesn’t run long enough)

So I found this piece of code when trying to figure out how I can set a minimum length of time the loading GIF would take.

var counter = 2;
function decrement() {
  if (--counter == 0) {
    $('#loader').hide();
  }
}
setTimeout(decrement, 1000);
$.ajax(..., complete: decrement);

Does anyone know how to alter the .load() function to .ajax() and add the decrement function to the .ajax() function?

Thank you,

Katie

Answer 1

I think you’d want something like this:

$("#rightframe").click(function () {
    $("#loader").show();
    setTimeout(function () {
        $.ajax({
            url: "form.html",
            complete: function () {
                $("#loader").hide();
            },
            success: function (data) {
                $("#screen").empty().append($(data).find("#contact"));
            },
            error: function () {
                // Handle an error occurring
            }
        });
    }, 2000);
});

I’m not sure why you are using/need the decrement function, but something like this code should take care of the loading image being shown long enough.