CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4
amateur
amateur

Reputation: 44635

replace button with loading icon in mvc

I am working with asp.net MVC4 and doing a significant amount of client to server side interaction via both jquery and asp.net mvc posting.

I have a button on the page that is clicked to trigger this. Is it possible to turn the button easily in to a loading icon when the user clicks on it and returns back to normal state when the server processing is complete?

Upvotes: 1

Views: 1093

Answers (4)

Shyju
Shyju

Reputation: 218852

What you can do is disable the button and show a loading image next to it in a span/div. Then make an ajax call and when you get the response from your action method,( in the ajax callback method) ,check the response and hide the progress image and change the button to enabled.

<input type="button" value="Save" id="btnSave" class="normal" />
<div id="progress" style="display:none;"></div>

Your javascript would be

$(function(){

  $("#btnSave").click(function(e){    
    e.preventDefault();

    var _this=$(this);

    //Let's disable the button to avoid duplicate posting
     _this.attr('disabled', 'disabled');

    //show the loading image
    $("#progress").html("<img src='PathToSomeLoadingImage.gif' />").show();

    //now make your ajax call
    $.post("@Url.Action("Check","User")",function(data){

       //check the response and enable the button
       _this.removeAttr("disabled", "disabled");

       //hide the progress bar div
       $("#progress").hide();

    }); 

  }); 

});

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

Demo Fiddle

That would be very simple to do,

$('#btnSubmit').click(function(){
             $(this).attr('disabled','disabled');
             $('#yourLoadingImage').show();


           $.ajax({
             url: "test.html",
                }).done(function() {
                   $(this).attr('disabled','');
                   $('#yourLoadingImage').hide();
            });

       });

You just need to place your image properly.

Upvotes: 1

Diani
Diani

Reputation: 3

                $.ajax({
        type:'POST',
        url:'',
        data:'variable='+searchword,
                    complete:function(){
                       // here before server procceses
                    }
        success:function(data){
               //when proccesing completed
            }
        }

Upvotes: 0

Ben Barden
Ben Barden

Reputation: 2111

Sure. you have a hidden "load icon" next to the button. You have the onclick function for the button hide the button and reveal the loading icon. You have the callback from the server hide the loading icon and show the button. Too easy.

Upvotes: 0

Related Questions