Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript C#4.0 jQuery , +
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 :
@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 :
 
$(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 Frown | :( 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 20-Dec-12 2:34am
Edited 20-Dec-12 4:01am
v6
Comments
aspnet_regiis -i at 20-Dec-12 7:48am
   
And the question is ?
sagar wasule at 20-Dec-12 8:12am
   
question updated
rahkan at 20-Dec-12 9:34am
   
if you remove the hideLoading does it show the loading?
sagar wasule at 21-Dec-12 2:36am
   
ok so I have now removed hideloading(); now this shows the loading image continuously ....
rahkan at 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.
rahkan at 20-Dec-12 14:21pm
   
everything seems to look right as far as syntax goes, are you getting any javascript errors?
sagar wasule at 20-Dec-12 23:56pm
   
No javascript error , checked for that too :(
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

You are better off handling the mouse-overs using CSS, and the image loading can be done using the 'CSS' attribute in JQuery.
 
Try:
 
	
<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>
 
	$(document).ready(function () {
    		$(".search").click(function (e) {
			$(".loading").css("background-image","url('loading.gif')");
    		}); 
	});  
 
 
	<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:
 
<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>
 
	$(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();
 
        		}
    		});
	}
 
	<div class="search"></div>
 
	<div class="transparentCover"></div>
 
	<div class="loading"></div>
  Permalink  
v4
Comments
sagar wasule at 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) at 22-Dec-12 8:06am
   
Hi, posted a better solution now.
sagar wasule at 26-Dec-12 1:30am
   
Thanks Nick
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

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.
<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.
<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.
<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...
Comments
sagar wasule at 26-Dec-12 1:52am
   
Thanks :)
Tadit Dash at 2-Jan-13 2:40am
   
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
Tadit Dash at 2-Jan-13 7:59am
   
Thanks for accepting the answer @sagar wasule.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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:
 
<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>
  Permalink  
Comments
sagar wasule at 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 at 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)

  Print Answers RSS
0 OriginalGriff 319
1 Maciej Los 295
2 Sergey Alexandrovich Kryukov 230
3 CPallini 205
4 Sinisa Hajnal 166
0 OriginalGriff 7,760
1 Sergey Alexandrovich Kryukov 7,072
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,785


Advertise | Privacy | Mobile
Web01 | 2.8.1411023.1 | Last Updated 22 Dec 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100