how to display a loading bar image on text change event in right side of textbox in asp.net using javascript or jquery without the page post back or page reloading i.e. with asynchronous postback
You can dynamically create a loading image after each textbox using this :
<script type='text/javascript'>
$(document).ready(function(){
//Creates a new image after each input after any input element is changed
$("input").change(function(){
$(this).after("<img src='http://www.designbash.com/wp-content/uploads/2010/01/animated-loading-bar.gif' />");
});
});
</script>
As elaborated in your example the loading bar image is shown continuously and it was very nice..... but i want to show it during that time only till the processing goes on the server side on all asp textbox's changed event...so what will be the code for
it
the code should not include any time delay event, it would only show waiting image excatly during the time for processing the code under textbox's changed event...
If this is the case, then you would likely want to post the value of your textbox server-side (to check it's validity for example) after it changes using jQuery's $.post or $.ajax methods.
I'll demonstrate a very rough example here using a POST to a WebMethod within your page.
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$('input').change(function () {
//Append loading here
$(this).after("<img src='http://www.designbash.com/wp-content/uploads/2010/01/animated-loading-bar.gif' />");
//Stores your loading image
var $yourLoadingImage = $(this).next();
//Perform your asyncronous call (in this case to a web method)
$.post("WebForm1.aspx/YourWebMethod", { "test": $(this).val() }, function () {
//Hides the loading after the post was successful!
$yourLoadingImage.hide();
});
});
});
</script>
using the following example web method within your WebForm1 (your WebForm) :
[WebMethod]
//This Method will be hit asynchronously from your Page and will pass in the value of the Textbox
//as your parameter
public static string YourWebMethod(string yourTextboxValue)
{
//Your logic here
return yourTextboxValue;
}
i want to display the image only if the textbox's autopostback property is true then what will be the above jquery code..is there any function to check the autopostback property of textboxes or input in jquery
This is a bit tricky, as the AutoPostBack property is a completely server-side mechanism and doesn't create a property that you can check with Javascript.
If you are going to be performing a PostBack then you wouldn't need to handle this through Javascript or jQuery, as you could perform your append using server-side code. (This was the reason that to use asyncronous calls to WebMethods rather than just
posting back)
shiv27
Member
10 Points
32 Posts
loading bar image on text change event
Feb 09, 2013 12:43 PM|LINK
how to display a loading bar image on text change event in right side of textbox in asp.net using javascript or jquery without the page post back or page reloading i.e. with asynchronous postback
Rion William...
All-Star
27454 Points
4542 Posts
Re: loading bar image on text change event
Feb 09, 2013 01:43 PM|LINK
jQuery Method
You could use something like this in jQuery :
<!-- jQuery Reference --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ //When your specific field changes (your textbox) $("#yourtextfield").change(function(){ //Display your loading animation $("#loading").show(); }); }); </script>Sample Markup
Example
Pure Javascript Method
You can also accomplish this through pure Javascript by adding a function to be called in the onchange event of your textbox :
with this script :
<script type='text/javascript'> function showloading(){ //Displays your loading animation document.getElementById('loading').style.display = "inline"; } </script>Javascript Example
shiv27
Member
10 Points
32 Posts
Re: loading bar image on text change event
Feb 09, 2013 02:45 PM|LINK
But if i want to display this image to all the textbox's text change event then what will be the jquery code
Rion William...
All-Star
27454 Points
4542 Posts
Re: loading bar image on text change event
Feb 09, 2013 02:51 PM|LINK
You can dynamically create a loading image after each textbox using this :
<script type='text/javascript'> $(document).ready(function(){ //Creates a new image after each input after any input element is changed $("input").change(function(){ $(this).after("<img src='http://www.designbash.com/wp-content/uploads/2010/01/animated-loading-bar.gif' />"); }); }); </script>Example
shiv27
Member
10 Points
32 Posts
Re: loading bar image on text change event
Feb 10, 2013 11:19 AM|LINK
As elaborated in your example the loading bar image is shown continuously and it was very nice..... but i want to show it during that time only till the processing goes on the server side on all asp textbox's changed event...so what will be the code for it
the code should not include any time delay event, it would only show waiting image excatly during the time for processing the code under textbox's changed event...
Rion William...
All-Star
27454 Points
4542 Posts
Re: loading bar image on text change event
Feb 10, 2013 01:21 PM|LINK
If this is the case, then you would likely want to post the value of your textbox server-side (to check it's validity for example) after it changes using jQuery's $.post or $.ajax methods.
I'll demonstrate a very rough example here using a POST to a WebMethod within your page.
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function () { $('input').change(function () { //Append loading here $(this).after("<img src='http://www.designbash.com/wp-content/uploads/2010/01/animated-loading-bar.gif' />"); //Stores your loading image var $yourLoadingImage = $(this).next(); //Perform your asyncronous call (in this case to a web method) $.post("WebForm1.aspx/YourWebMethod", { "test": $(this).val() }, function () { //Hides the loading after the post was successful! $yourLoadingImage.hide(); }); }); }); </script>using the following example web method within your WebForm1 (your WebForm) :
[WebMethod] //This Method will be hit asynchronously from your Page and will pass in the value of the Textbox //as your parameter public static string YourWebMethod(string yourTextboxValue) { //Your logic here return yourTextboxValue; }shiv27
Member
10 Points
32 Posts
Re: loading bar image on text change event
Feb 11, 2013 06:16 AM|LINK
<script type='text/javascript'>
$(document).ready(function(){
$("input").change(function(){
$(this).after("<img src='images/loader.gif' />");
});
});
</script>
i want to display the image only if the textbox's autopostback property is true then what will be the above jquery code..is there any function to check the autopostback property of textboxes or input in jquery
Rion William...
All-Star
27454 Points
4542 Posts
Re: loading bar image on text change event
Feb 11, 2013 12:02 PM|LINK
This is a bit tricky, as the AutoPostBack property is a completely server-side mechanism and doesn't create a property that you can check with Javascript.
If you are going to be performing a PostBack then you wouldn't need to handle this through Javascript or jQuery, as you could perform your append using server-side code. (This was the reason that to use asyncronous calls to WebMethods rather than just posting back)