Showing a loading image when making an AJAX request, and replace HTML document with new HTML document in the response body

Question

I have the following code to show a loading image whenever an AJAX request is being made.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script>
    $body = $("body");

    $(document).ajaxStart(function(){
        $body.addClass("loading");
    }).ajaxStop(func(){
        $body.removeClass("loading");
    });

    $.get(`example.com`,
    func(html){
        $("html").html(html);
        alert("Load was performed.");
    });
</script>

The code should show a gif whenever an AJAX request is made, and then hide the gif when all ajax requests complete so that only the new HTML document from the response is shown. However, the webpage stays blank, and the browser console shows the error:

Uncaught SyntaxError: missing ) after argument list

The CSS used here is from the answers to the question How can I create a "Please Wait, Loading..." animation using jQuery?

I don't see how that error could result from that code. Maybe post the rest of the page? — Kinglish, May 18 '21 at 22:18
@Kinglish putting that code in http://jsfiddle.net/ causes the same error. — bit, May 18 '21 at 22:35
You got too `func`-ee with your function calls. Replace `func() `with `function()`. Python background? — Kinglish, May 18 '21 at 22:42
@Kinglish good catch. I've fixed that typo. It is still not working. Here it is: https://jsfiddle.net/jscode1/L7y0mew5/ — bit, May 25 '21 at 19:30

Showing a loading image when making an AJAX request, and replace HTML document with new HTML document in the response body

0 Answers0