Loading image in textbox(auto complete extender)
-
Hi, I am implementing auto complete extender in my project. I want a loading image to be displayed in the textbox while the data is being fetched from database and presented to the user.
<asp:TextBox id="TextBox2" Width="216px" runat="server" Text='<%# Bind("c_name") %>' autocomplete="off" ></asp:TextBox> <cc1:AutoCompleteExtender id="AutoCompleteExtender1" runat="server" ServiceMethod="fetch" TargetControlID ="TextBox2" ServicePath="autocom.asmx" CompletionSetCount ="12" EnableCaching ="true" MinimumPrefixLength ="2"> </cc1:AutoCompleteExtender> -
Hi, I am implementing auto complete extender in my project. I want a loading image to be displayed in the textbox while the data is being fetched from database and presented to the user.
<asp:TextBox id="TextBox2" Width="216px" runat="server" Text='<%# Bind("c_name") %>' autocomplete="off" ></asp:TextBox> <cc1:AutoCompleteExtender id="AutoCompleteExtender1" runat="server" ServiceMethod="fetch" TargetControlID ="TextBox2" ServicePath="autocom.asmx" CompletionSetCount ="12" EnableCaching ="true" MinimumPrefixLength ="2"> </cc1:AutoCompleteExtender>You can use AJAX UpdateProgress control to get that functionality. See here UpdateProgress control[^]
"Don't worry if it doesn't work right. If everything did, you'd be out of a job." (Mosher's Law of Software Engineering)
-
Hi, I am implementing auto complete extender in my project. I want a loading image to be displayed in the textbox while the data is being fetched from database and presented to the user.
<asp:TextBox id="TextBox2" Width="216px" runat="server" Text='<%# Bind("c_name") %>' autocomplete="off" ></asp:TextBox> <cc1:AutoCompleteExtender id="AutoCompleteExtender1" runat="server" ServiceMethod="fetch" TargetControlID ="TextBox2" ServicePath="autocom.asmx" CompletionSetCount ="12" EnableCaching ="true" MinimumPrefixLength ="2"> </cc1:AutoCompleteExtender>md_azy wrote:
I want a loading image to be displayed in the textbox while the data is being fetched from database and presented to the user
use AJAX
UpdateProgressControl.cheers, Abhijit CodeProject MVP Web Site:abhijitjana.net
-
Hi, I am implementing auto complete extender in my project. I want a loading image to be displayed in the textbox while the data is being fetched from database and presented to the user.
<asp:TextBox id="TextBox2" Width="216px" runat="server" Text='<%# Bind("c_name") %>' autocomplete="off" ></asp:TextBox> <cc1:AutoCompleteExtender id="AutoCompleteExtender1" runat="server" ServiceMethod="fetch" TargetControlID ="TextBox2" ServicePath="autocom.asmx" CompletionSetCount ="12" EnableCaching ="true" MinimumPrefixLength ="2"> </cc1:AutoCompleteExtender>1st Approach <script type="text/javascript"> function ShowImage() { document.getElementById('txtAutoComplete') .style.backgroundImage = 'url(images/loader.gif)'; document.getElementById('txtAutoComplete') .style.backgroundRepeat= 'no-repeat'; document.getElementById('txtAutoComplete') .style.backgroundPosition = 'right'; } function HideImage() { document.getElementById('txtAutoComplete') .style.backgroundImage = 'none'; } </script> Now write this code in Page_Load event of aspx page protected void Page_Load(object sender, EventArgs e) { this.txtAutoComplete.Attributes.Add ("onkeypress", "ShowImage()"); this.txtAutoComplete.Attributes.Add ("onblur", "HideImage()"); } +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2nd approach This approach works if you are using newer versions of AjaxControlToolkit.dll (Version 1.0.20229.20821 or later) For this write the above mentioned javascript in head section of html markup of page. Now in source of autocomplete extender add OnClientPopulating="ShowImage" and OnClientPopulated="HideImage" <ajaxToolkit:AutoCompleteExtender runat="server" ID="AutoComplete1" BehaviorID="autoComplete" TargetControlID="txtAutoComplete" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" CompletionInterval="10" EnableCaching="true" CompletionSetCount="12" CompletionListCssClass= "autocomplete_completionListElement" CompletionListItemCssClass= "autocomplete_listItem" CompletionListHighlightedItemCssClass= "autocomplete_highlightedListItem" onclientpopulating="ShowImage" onclientpopulated="HideImage"> </ajaxToolkit:AutoCompleteExtender> <script type="text/javascript"> function ShowImage() { document.getElementById('txtAutoComplete') .style.backgroundImage = 'url(images/loader.gif)'; document.getElementById('txtAutoComplete') .style.backgroundRepeat= 'no-repeat'; document.getElementById('txtAutoComplete') .style.backgroun