Once the ajax jQuery is triggered, I hope to see an image loading for a brief moment of just 1

Question

Once the ajax jQuery is triggered, I hope to see an image loading for a brief moment of just 1

Can someone assist me with the following code snippet?

<script type="text/javascript">
    $(function () {
        $(".a").live("click", function () {
            var $this = $(this),
        ProductImageId = $this.data('ProductImageId');
            $.ajax({
                url: '/Home/AddToCart',
                type: "post",
                cache: false,
                data: { ProductImageId: ProductImageId },
                success: function (data) {
                    data = eval(data);
                    $this.addClass('productSelected');
                },
                error: function (result) {
                    $(".validation-summary-errors").append("<li>Error connecting to server.</li>");
                }

            });
        });

I would like to display an image for about 1 second every time the button is clicked to indicate that the action has taken place.

Any assistance would be greatly appreciated.

javascript jquery html css ajax

Answer 1

Answer №1

For example:

var $spinner = $('<img src="spinner.gif">').appendTo(document.body);

Then in the success callback:

success: function (response) {
    setTimeout(function() {
        $spinner.remove();
        response = eval(response);
        $this.addClass('itemSelected');
    }, 1000);
}

The spinner will be displayed for 1 second plus the ajax loading time. However, as a user of your website, I would likely prefer to eliminate the 1-second delay altogether...

Answer 2

For example:

var $spinner = $('<img src="spinner.gif">').appendTo(document.body);

Then in the success callback:

success: function (response) {
    setTimeout(function() {
        $spinner.remove();
        response = eval(response);
        $this.addClass('itemSelected');
    }, 1000);
}

The spinner will be displayed for 1 second plus the ajax loading time. However, as a user of your website, I would likely prefer to eliminate the 1-second delay altogether...

Answer 3

Answer №2

To enhance the functionality, consider adding the following code snippet before sending:

beforeSend: function(){
    $("specific element").append("<img src='url' id='one_sec_img' />");
    SetTimeout(1000, function(){
         $("#one_sec_img").hide();

     })
 }

However, it seems like your requirement is quite standard:
In this scenario, the image will be loaded immediately upon clicking the button that triggers the ajax request, and upon success, the image will be hidden. Usually, this process does not necessitate the use of setTimeout. If your specific need is to display the image for only one second, then the set timeout can be included. Otherwise, the following code should suffice.

beforeSend: function(){
    $("specific element").append("<img src='url' id='one_sec_img' />");

 },
success: function(res){
$("#one_sec_img").hide();

}

Answer 4

To enhance the functionality, consider adding the following code snippet before sending:

beforeSend: function(){
    $("specific element").append("<img src='url' id='one_sec_img' />");
    SetTimeout(1000, function(){
         $("#one_sec_img").hide();

     })
 }

However, it seems like your requirement is quite standard:
In this scenario, the image will be loaded immediately upon clicking the button that triggers the ajax request, and upon success, the image will be hidden. Usually, this process does not necessitate the use of setTimeout. If your specific need is to display the image for only one second, then the set timeout can be included. Otherwise, the following code should suffice.

beforeSend: function(){
    $("specific element").append("<img src='url' id='one_sec_img' />");

 },
success: function(res){
$("#one_sec_img").hide();

}

Answer 5

Answer №3

<script type="text/javascript>
    $(function () {
        $(".b").on("click", function () {
            var content=$(this).html();
            $(this).html('fetching');//<img src="" /> 
            var $this = $(this),

        ImageId = $this.data('ImageId');
            $.ajax({
                url: '/Gallery/AddToGallery',
                type: "post",
                cache: false,
                data: { ImageId: ImageId },
                success: function (response) {
                     $(".b").html(content);
                    response = JSON.parse(response);
                    $this.addClass('imageSelected');
                },
                error: function (result) {
                    $(".error-messages").append("<li>Error while fetching data.</li>");
                }

            });
        });

give it a shot.

Answer 6

<script type="text/javascript>
    $(function () {
        $(".b").on("click", function () {
            var content=$(this).html();
            $(this).html('fetching');//<img src="" /> 
            var $this = $(this),

        ImageId = $this.data('ImageId');
            $.ajax({
                url: '/Gallery/AddToGallery',
                type: "post",
                cache: false,
                data: { ImageId: ImageId },
                success: function (response) {
                     $(".b").html(content);
                    response = JSON.parse(response);
                    $this.addClass('imageSelected');
                },
                error: function (result) {
                    $(".error-messages").append("<li>Error while fetching data.</li>");
                }

            });
        });

give it a shot.

Answer 7

Answer №4

Consider implementing the jQuery BlockUI Plugin to display the image, as this could potentially resolve your issue.

Answer 8

Consider implementing the jQuery BlockUI Plugin to display the image, as this could potentially resolve your issue.

Answer 9

Answer №5

Give this a shot:

$(".clickable").click( function( ) {
    $("#imageID").show().delay( 500 ).hide();
    // make an API call
});

If you prefer the image to only vanish after the API call:

$(".clickable").click( function( ) {

        $("#imageID").show();

        $.ajax({
            // options
        }).done( function( ) {

            $("#imageID").hide( );
        });
});

Answer 10

Give this a shot:

$(".clickable").click( function( ) {
    $("#imageID").show().delay( 500 ).hide();
    // make an API call
});

If you prefer the image to only vanish after the API call:

$(".clickable").click( function( ) {

        $("#imageID").show();

        $.ajax({
            // options
        }).done( function( ) {

            $("#imageID").hide( );
        });
});

Once the ajax jQuery is triggered, I hope to see an image loading for a brief moment of just 1

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Vue.js component function "not instantiated within the object"

Encountering an AJAX issue while attempting to retrieve data

Trouble displaying data in Jquery JSON

Using ES6 to generate objects within other objects

Struggling to add a border to an HTML div element

Guide to ensuring every request in an Express.js application contains a cookie

Tips for accessing private variables

What is the reason behind Bootstrap's varying column spacing based on the number of columns?

Make a quick call to the next function within the error handling module for a

Deliver compressed data in gzip format from a Node.js server to the client using socket.io

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

Is there a way to prompt the native browser message for HTML5 form validation on a custom element?

Streamline a javascript code with numerous elements

There was an error during compilation: Module not detected - Unable to locate './xxxx'

Acquire a variable using jQuery from a partial class selector

Tips for eliminating unnecessary module js calls in Angular 9

Refreshing the three.js scene seamlessly within a single-page web application

Running a Python script using Node.js

I'm wondering if you have any insights on how to retrieve objects using Mono WebAssembly

Instructions for including packages in .vue files