Click here to Skip to main content
15,884,836 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
Hi, I want to show loading image while the button click funtionality is executed.
The following is the code I have implemented. This is in MVC3 razor engine.


on .cshtml page :
HTML
@using (Html.BeginForm())
{ 
  <div id="activity_pane">      
  <input id="search" type="image" src="../../Content/images/search.png"                onmouseout="this.src='../../Content/images/search.png'"                       önmouseover="this.src='../../Content/images/search_onhover.png'" />
                    
  <input id="reset" type="image" src="../../Content/images/reset.png" onmouseout="this.src='../../Content/images/reset.png'"                         önmouseover="this.src='../../Content/images/reset_onhover.png'" />
   <div id="divMsg" style="display: none;">
     <img src="../../Content/images/loading.gif" alt="Please wait.." />
   </div>
  </div>


On this search button I have written a jquery which is as below :

JavaScript
$(document).ready(function () {
    $("#search").click(function (e) {
        
        jQuery('#activity_pane').showLoading();
        // complete functionality
        // Here I have made ajax call to the action method 
        // and executed the required functionality successfully 

        jQuery('#activity_pane').hideLoading();
    }); 

});   



I have used jquery.showLoading.js and jquery-1.5.1.min.js file from jquery plugin.
I'm not able to show the loading image ... This doesn't work for me :( The above code does not show the loading image. Even I have inserted a delay but of no use.
Please help.
If any one can provide with any other method to show loading image while the functionality is getting executed that approach is also most welcomed ...
Posted
Updated 4-Jun-16 20:25pm
v6
Comments
bbirajdar 20-Dec-12 7:48am    
And the question is ?
sagar wasule 20-Dec-12 8:12am    
question updated
rahkan 20-Dec-12 9:34am    
if you remove the hideLoading does it show the loading?
sagar wasule 21-Dec-12 2:36am    
ok so I have now removed hideloading(); now this shows the loading image continuously ....
rahkan 21-Dec-12 7:40am    
I'm not sure how you're doing the ajax call but there is usually a way to specify a callback once the request is complete/successful. I'd put the hideloading at the end of that callback function.

You are better off handling the mouse-overs using CSS, and the image loading can be done using the 'CSS' attribute in JQuery.

Try:

CSS
<style type="text/css">

	.search
	{
		width:150px;
		height:150px;
		background:url('search.png') no-repeat center 50%;		
		margin:10px;
		border:1px solid #000000;
		float:left;
	}

	.search:hover
	{
		width:150px;
		height:150px;
		background:url('search_onhover.png') no-repeat center 50%;
		cursor:pointer;		
		margin:10px;
		border:1px solid #000000;
		float:left;
	}

	.loading
	{
		width:150px;
		height:150px;
		margin:10px;
		border:1px solid #000000;
		float:left;
	}

</style>


JavaScript
$(document).ready(function () {
        $(".search").click(function (e) {
        $(".loading").css("background-image","url('loading.gif')");
        });
});


HTML
<div class="search"></div>

<div class="loading"></div>



EDIT: A more complete solution - if you want the loading box to cover the screen while loading and the AJAX function to hide it again once complete, then try the following:

CSS
<style type="text/css">

	.search
	{
		width:150px;
		height:150px;
		background:url('search.png') no-repeat center 50;		
		margin:10px;
		border:1px solid #000000;
		float:left;
	}

	.search:hover
	{
		width:150px;
		height:150px;
		background:url('search_onhover.png') no-repeat center 50%;
		cursor:pointer;		
		margin:10px;
		border:1px solid #000000;
		float:left;
	}

	.transparentCover
	{
		display:none;
		position:absolute;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		background:#000000;
		opacity:0.4;
		filter:alpha(opacity=40);
		-moz-opacity:0.4;
		-khtml-opacity:0.4;
		z-index:100;
	}

	.loading
	{
		display:none;
		position: fixed;
  		left: 50%;
   		top: 50%;
    		background-color: white;
    		height: 400px;
    		margin-top: -200px;
    		width: 600px;
    		margin-left: -300px;
		text-align:center;
		background:url('loading.gif') no-repeat center 50%;
		z-index:101;
	}

</style>


JavaScript
$(document).ready(function () {
    $(".search").click(function (e) {

        // show the loading box and cover
        $(".transparentCover").show();

        $(".loading").show();

        // call your loading code here
        doLoad();

    });
});

function doLoad() {

    var myParam = 'somevalue';

        $.ajax({
            url: "/AJAX/myFunc.asmx/loadData",
            type: "POST",
            dataType: "json",
            data: "{param1:" + myParam + "}",
            contentType: "application/json; charset=utf-8",
            success: function (msg) {

            // AJAX returned successfully, so hide loading box
            $(".transparentCover").hide();

            $(".loading").hide();

            }
        });
}


HTML
<div class="search"></div>

<div class="transparentCover"></div>

<div class="loading"></div>
 
Share this answer
 
v4
Comments
sagar wasule 21-Dec-12 2:53am    
Hi Thanks for ur input .....This is good , but now how to stop this loading after the button click functionality is complete ?
Even this shows the loading image below the search block I want to mask on all over the page
Nick Fisher (Consultant) 22-Dec-12 8:06am    
Hi, posted a better solution now.
sagar wasule 26-Dec-12 1:30am    
Thanks Nick
I got some problems with the code.

1. I guess you have not include the css file showLoading.css with the page.
Just include that like below.
XML
<link href="showLoading/css/showLoading.css" rel="stylesheet" media="screen" />

2. Loading image will show in div divMsg, but not in div activity_pane.
So, jQuery code will look like below.
XML
<script type="text/javascript">
$(document).ready(function () {
    $("#search").click(function (e) {

        jQuery('#divMsg').showLoading();
        // complete functionality
        // Here I have made ajax call to the action method
        // and executed the required functionality successfully

        jQuery('#divMsg').hideLoading();
    });

});
</script>

3. There should be no display none to the div divMsg and it should be blank i.e no loading image should be there, as it is done in the css file showLoading.css on css class .loading-indicator.
So, the div will look like.
XML
<div id="divMsg">
</div>


Downloads

1. My Project:- jQuery Loading image[^]
Please download and see how I did it.
You will find two html files one is loading.html and another is which is the reference one from where I referred i.e. jquery.showLoading.example.html.

2. Reference Project:- jQuery showLoading plugin[^].
You will find the reference project to Download as .zip.

Thanks...
 
Share this answer
 
Comments
sagar wasule 26-Dec-12 1:52am    
Thanks :)
Hi @sagar wasule,

Please accept this answer, if it has helped you in any way.
This will help others to find the answer in one go and you will also be awarded with some points for this action...

Thanks,
Tadit
Thanks for accepting the answer @sagar wasule.
Hello, yes you can upload in JavaScript. The step is first convert the image in base64, then link the image url with this.

Please, follow this code:

XML
<form id="form1" runat="server">
    <div>
        <asp:Image ID="imgEmployee"  runat="server" ImageUrl="" Width="100px"
                    Height="120px" />

        <script type="text/javascript">
            function handleFileSelect(evt) {

                var fileUpload = document.getElementById('<%=photoUpload.ClientID%>');
                var imgEmployee = document.getElementById('<%=imgEmployee.ClientID%>');

                var files = evt.target.files; // FileList object
                // Loop through the FileList and render image files as thumbnails.
                for (var i = 0, f; f = files[i]; i++) {

                    // Only process image files.
                    if (!f.type.match('image.*')) {
                        continue;
                    }
                    var reader = new FileReader();
                    var base64Data;

                    reader.onload = (function (theFile) {
                        return function (e) {
                            // Render thumbnail.
                            var span = document.createElement('span');

                            base64Data = e.target.result;
                            var fileSize = base64Data.length;
                            var IndexData = base64Data.indexOf('base64,');
                            var fileName = escape(theFile.name);
                            imgEmployee.src = base64Data;


                        };
                    })(f);
                    // Read in the image file as a data URL.
                    reader.readAsDataURL(f);
                }
            }





        </script>
        <div>

<asp:FileUpload runat="server" ID="photoUpload" TabIndex="7"  onchange="handleFileSelect(event)"   />


        </div>

    </div>
    </form>
 
Share this answer
 
Comments
sagar wasule 20-Dec-12 10:12am    
Hey thanku for ur reply but I want display loading on the screen and not upload an image
sagar wasule 20-Dec-12 10:12am    
So this doesn't helped much

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900