troubleshooting problems with jquery loading animations

My goal is to hide the menu, display an animated gif, hide the gif, and then show the updated menu. However, even though the menu disappears and reappears, the animated gif refuses to be shown.

Where could I be making a mistake?

$(document).ready(function () {

    $("#menu").wijmenu({
        orientation: 'vertical'
    });

    $("#TDButtons a").click(function () {
        var href = $(this).attr("href");
        $('#menuAjax').hide(0, LoadAjaxContent(href));
        return false;
    });

    function LoadAjaxContent(href) {

        $.ajax({
                url: href,
                success: function (data) {
                    $("#menuAjax").html(data)
                        .addClass("loading")
                        .delay(5000)
                        .removeClass("loading")
                        .fadeIn('slow');

                    $("#menu").wijmenu({
                        orientation: 'vertical'
                    });
                }
            });
    }

If more information is needed, feel free to ask. Thank you!

cssjquery

Answer №1

The reason why it's not showing up is because you are delaying something that is not a queueable animation:

.addClass("loading")
.delay(5000)
.removeClass("loading")
.fadeIn('slow');

This code is being interpreted as:

.addClass("loading")
.removeClass("loading")
.delay(5000)
.fadeIn('slow');

To fix this, you can try the following approach:

function LoadData(url) {
    $.ajax({
          url: url,
          success: function (response) {
              $("#menuContent").html(response).removeClass("loading").fadeIn('slow');
              $("#menu").wijmenu({ orientation: 'vertical' });
          }
    });
}

$("#buttonsContainer a").click(function (event) {
    event.preventDefault();
    var url = this.href;
    $('#menuContent').addClass("loading").hide();
    LoadData(url);
});

Answer №2

Implementing ajaxStart and ajaxStop functions allows for the seamless addition and removal of the loading class to an element during data processing. This approach ensures that the loading class is added before sending the request and removed once the ajax operation is complete.

$(document).ready(function () {

    $("#menu").wijmenu({
        orientation: 'vertical'
    });

    $("#TDButtons a").click(function () {
        var href = $(this).attr("href");
        $('#menuAjax').hide(0, LoadAjaxContent(href));
        return false;
    });


    $.ajaxStart(function(){
         $("#menuAjax").addClass("loading");
    });
    $.ajaxStop(function(){
         $("#menuAjax").removeClass("loading");
    });
    function LoadAjaxContent(href) {

        $.ajax({
                url: href,
                success: function (data) {
                    $("#menuAjax").html(data)
                        .delay(5000)
                        .fadeIn('slow');

                    $("#menu").wijmenu({
                        orientation: 'vertical'
                    });
                }
            });
    }

Answer №3

Your loading sequence needs adjusting

To ensure your loading class is displayed correctly, it should be added before the request is made and then removed afterwards. Currently, you are adding it and immediately removing it without allowing it time to appear.

Consider implementing the following approach instead:

$(document).ready(function () {
$("#menu").wijmenu({
    orientation: 'vertical'
});

$("#TDButtons a").click(function () {
    var href = $(this).attr("href");
    $('#menuAjax').hide(0, LoadAjaxContent(href));
    return false;
});

function LoadAjaxContent(href) {
    $("#menuAjax").addClass("loading")
    $.ajax({
            url: href,
            success: function (data) {
                $("#menuAjax").html(data)
                    //.delay(5000) Not needed!
                    .removeClass("loading")
                    .fadeIn('slow');

                $("#menu").wijmenu({
                    orientation: 'vertical'
                });
            }
        });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to receive an image from a servlet using ajax?

I want to encode a string in a qr image and display the image on the same page. <form action="qrservlet" method="get"> <p>Create QR Code</p> <input type="text" name="qrtext" /> <input type="submit" value ...

jqueryajaxservlets

Errored Out: No content found in file_get_contents('php://input') following an ajax post

I've run into a dilemma and am seeking help. I recently encountered an issue where data sent to a PHP file through an AJAX function seemed to vanish when attempting to retrieve it in the PHP file. Strangely enough, a similar function I implemented yes ...

javascriptphpjqueryangularjsajax

Turn off autocomplete feature for forms using React and Material UI

I've been diving into React and Material UI to enhance my web development skills. While working on a web form, I encountered an issue where Chrome autofills the text fields with previous data and changes the background color to yellow upon page load. ...

javascriptcssreactjsmaterial-designmaterial-ui

Auto play feature malfunctioning in Onsen-UI Carousel attribute settings

When utilizing onsen UI in my mobile web application, I encountered an issue with the autoplay property not functioning properly within the carousel. <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button on ...

javascripthtmlcssonsen-ui

Transmitting a file using Ajax and submitting an input with jQuery

I have a form for uploading a file along with an input field. <form id="uploadForm"> <input type="text" id="name"> <input type="file" id="uploadFile"> </form> Here is the Aj ...

jqueryajaxupload

Adding Javascript and CSS files to the document dynamically

I've created a custom jQuery plugin, but I need it to verify if jQuery is already loaded. If not, I want the plugin to load jQuery along with a few other necessary JavaScript files. Additionally, I want it to check if a specific CSS file has been load ...

javascriptjquery

Achieving the Perfect Alignment: Displaying Text and Progress Bar Side by Side using Bootstrap 5

How can I align the text and progress bar on the same line using Bootstrap 5? <nav class="navbar bg-light fixed-bottom"> <div class="row m-0"> <div class="col-12 countdown"> <p class=&q ...

htmlcsstwitter-bootstrapbootstrap-5

Internet Explorer 11 is not interested in giving attention to a disabled element

I'm trying to limit text input to only one of two fields. My approach involves checking the value of a field when it loses focus, and then disabling the other field if the initial one is not empty. Below is an example: HTML: <div class="contain ...

javascriptjqueryhtmlinternet-explorer-11

where should the arguments for the postMessage command be directed within the YouTube iframe?

Apologies if it seems like I'm reposting a similar issue, but this is actually a different problem with a unique approach. Currently, I have an iframe element: <iframe id="video1" width="970" height="546" src="https://youtube.com/embed/9IYRC7g2IC ...

jqueryiframeyoutubeyoutube-apipostmessage

Using an Ember color picker to dynamically change SCSS variables

Is there a way to allow an admin to change the skin of one of my websites by selecting a color from a palette that will update a universal SASS variable? I am aware of methods to dynamically change CSS using jQuery, but I specifically want to modify the S ...

javascriptjqueryhtmlcssember.js

Looking to verify characters, numbers, and special characters with jQuery's regular expression feature?

Currently, I am facing a challenge in validating the password field to allow characters, numbers, and special characters. It is essential that the password consists of exactly 8 characters. Despite searching online for a solution, I have been unsuccessful ...

javascriptjqueryregex

The elements on the webpage are spilling over with content

I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result: https://i.stack.imgur.com/5qHJY.jpg Be ...

htmlcssangularflexbox

A simple way to position a button separate from a form

I have a form with an action like the following: <form action="edit.php" method="post"> . . <button class="btn btn-success" name="submit_mult" type="submit">Edit</button> </form> Initially, I used this form for the first button, ...

phpjqueryformsbutton

Calling a JavaScript function from server-side code (without using startup scripts)

In essence, my objective is as follows: Initiate deletion of a record upon button click. Delete the record only if a specific column (Location) is null (working perfectly). If the specific column is not null, prompt the user for confirmation before proce ...

javascriptc#jqueryajaxasp.net-mvc

Clear Input Field upon Selection in JQuery Autocomplete

I've been experimenting with the Azure Maps API to add autosuggestions for addresses in an input field. https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/REST%20Services/Fill%20Address%20Form%20with%20Autosuggest. ...

javascriptjqueryautocompleteazure-maps

Leverage jQuery to retrieve information and fill in an HTML form

Seeking assistance with retrieving data based on a dropdown selection change. Specifically, choosing an Item ID from the dropdown and then populating textboxes and other dropdowns with values from the database. The other dropdowns already have assignment o ...

phpjqueryhtmlsqldrop-down-menu

Multiple columns contained within a span

I'm trying to create a panel that displays a list of values with corresponding labels. The requirement is for each label to be positioned above its respective value and aligned to the left. The layout should resemble the following: Label 1 Lab ...

htmlcss

Tips for converting text from an HTML input field to a JSON file

After designing a form with four text fields and a submit button, my goal is to save the data into a JSON file upon submission. Additionally, I am looking for a way to display all of the JSON data on my webpage. ...

javascripthtmlcssjsonajax

The HTML dropdown menu is malfunctioning

I've been struggling to create a website with a dropdown menu. Despite following various guides and searching for solutions, the menu is behaving strangely. I've tried numerous tactics, so some lines of code may be unnecessary. The submenu is ap ...

htmlcss

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

javascripthtmlcssreactjsmaterial-ui