Search while typing - asp.net

I have a textbox and a listbox. The listbox is filled by a sqldatasource and I want to be able to filter out the listbox based on what's typed in the textbox. The filtering/searching works but ONLY once the textbox loses focus.
What I need is the listbox to filter/search WHILE I am typing and not require the textbox to lost focus.

If you are doing this yourself, i.e. no third party tools, you need to catch the textchanged event and update the source yourself based on what's typed. It's probably better if you use 3rd party tool or do this via javascript or at least ajax call to have better user experience.

I hope you have focus at the end of the character because abstractly speaking, there is no way to find out automatically when user will stop typing, so everything goes during typing.
Are trying to do this this with Jquery? or Ajax?

Related

I have to do two seemingly mutually exclusive things on leaving an asp:textbox. Please help me get some clairity

This project has gone from being a simple '99 Ford F-150 to the Homer.
I've got controls with a gridview with textboxes for data entry.
All the user controls on the pages are in AJAX updatepanels.
User types in a database column or budget entity or some other financial thing they want to include in the report.
The textboxes in the gridview have autopostback = true set.
overly long background info
When the user leaves the textbox, during the postback (triggered by onTextChanged) I do some validation back on the server on their entry - regexs, do they have rights to that column, is that column locked, etc. If it fails, I put a error message next to the textbox. If it passes, I wipe out any title or error that used to be next to the code.
Focus is getting lost from the postback if they're tabbing out of the box, rather than going to the next textbox in the gridview.
So to fix that I need, if their leaving the tb via the tab key, to also figure out what textbox or gridviewrow they're on, if they're not on the last row, and after the validation and labeling, put the focus on the textbox in the next row.
I can't figure out how, in ontextchanged, to find what caused me to leave the textbox, so I'm thinking use javascript onkeyup to test the key pressed and then find the next box etc, but the ontextchanged fires first and then the js never does, and also, since the control is all AJAXed, the javascript can't find the textboxes because when you enter the page everything is collapsed (the requirements people loooove to collapse and expand things), and so when it's expanded, all the 'new' textboxes are up in the viewstate stuff in the page source, and not down where javascript can see them.
The questions
So I'm wondering if I can have an onblur in the javascript that can trigger a postback where I can do my validation and such, and either 1) include the keypressed or pick it out of sender in the event or 2) followup the onblur with onkeyup and somehow figure out what textbox is next on the grid and throw focus there.
Or, is there another .NET based approach that could work for this? In terms of tearing the whole thing down and starting from scratch, I couldn't sell that to the bosses, I'm past the point of no return as far as that goes.
Does changing the one textbox value change anything else on the screen besides the error message/title associated with the textbox?
If not, my first thought would be to stop using the AutoPostBack and change to a Page Method hooked up to the onblur event. This should fix your tab issue and also reduce the back and forth between client and server.
Here's a blog post that talks about update panels and also Page Methods; The blog also includes a lot of useful posts about using javascript with .net, ajax, etc.

Modifying GridView data using Jquery doesn't persist back to Server events

So i have an ASP.NET GridView control in which each column is a 'BoundField'. I did not create a TemplateField(ItemTemplate/EditItemTemplate), because i was planning on using JQuery to convert the BoundField row to a 'Edit' field by just converting the text in each cell to a textbox or textarea when that row was clicked. This is done all client side.
So far all the client side stuff works great. But I have a 'Save' button on each row of the grid that triggers an eventhandler on the server side. In that server side method, i try to grab values of that current row, but they are all the OLD cell values before I modified the fields/data using jquery/javascript.
When i iterate through each cell of the row, it's the same state as it was when it was rendered.
So what i'm trying to understand is. Why do all of this fancy javascript/jquery stuff when the state of the Grid stays exactly as it was when it was rendered when posting back to the server ?
someone please shed some light on this!!!
Thanks!
The GridView controls uses ViewState to persist its state between postbacks. When you do a postback it loads its previous state from the ViewState. Changes that you do via client-side Javascript are ignored. This is simply how the control works.
If you want to keep using the GridView control with inline editing, the easiest option would be to move to edit mode via a postback.
Another option is to have the fields in each row to begin with, only hidden. Then, you could show them via Javascript. You'll be able to access the values on the server.
Yet another option is not use a postback but an Ajax call, so that the grid is not re-rendered when you click the button. But that means you would have to manually collect the values from the grid via client-side code and pass it to the server.

How can I trigger a server-side event from a client-side event?

Short version
All I need is that, in a ModalPopUp, when the DoubleClick event of a ListItem fires, the click event of my OK button should be executed.
Detail
I have a ModalPopUpExtender, which hosts a user control. The user control has an OK and a Cancel button. Along with that, it has a dynamic ListBox added to it. So far, I've considered the following possible solutions:
Use Ajax.Net. But, I cannot afford to have a WebMethod.
Use a ClientScriptCallBack. This will need a lot of JavaScript, since I have made almost every control dynamic.
Is there any other way apart from using an UpdatePanel?
Have a look at this way using __doPostback
calling a VB.net function from javascript

ASP.net form Double Entry

I have a form that I need the user to be able to type something in a textbox, after they tab out have them enter the same value in another textbox in proximity to it to assure they entered it incorrectly. After that, the second textbox is to disappear and they will continue to the next field without ever having a postback.
Does anyone have any recommendations on how to do this most efficiently? Is there a control that will facilitate this for me?
You can do it by javascript easily. on the onblur or onchange clientside events you should check two textbox's values.
An alternative option : maybe you want to use CompareValidator to compare values of your form elements. Don't forget to set EnableClientScript=true and use ValidationSummary control.

ASP.NET user control - can't get client-side (JavaScript) altered value back into control

Ok guys and gals, here is my problem:
I've built a custom control that uses a textbox to present data to the user.
When the user interacts with the control the value of that textbox is altered with client side javascript.
I also have a button on my page. When the user clicks the button I want to take the value from the custom control (aka. the textbox) and use it elsewhere.
So, in the onClick event for the button I do something like this:
this.myLabel.Text = this.customControl.Value;
The problem is that the custom control does not have the new textbox value available. In the custom control the textbox is empty. However, I can see the correct value in the Request.Form collection.
Am I doing something wrong here? Or should I be reading from Request.Form?!
Interesting, I didn't realize readonly TextBox doesn't get updated from viewstate.
When I pull stunts like that in my web sites, I usually setup asp:HiddenFields that I dump data into with javascript (gotta love jQuery), and that I read values from on postbacks.
Keeps things cleaner I find.
Ah ha! I've solved my own problem!
Because I had set Readonly="True" on the textbox control ASP.NET was not picking up it's value from the postback.
Instead I should have manually added the readonly attribute to the textbox during my user control construction.
eg.
this.textBox.Attributes.Add("readonly", "readonly");
Strange that you answered yourself!
In fact, I've faced this nuisance before, and cost me some time until I found a note in the visual studio documentation describing the cause, you can read it here http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.readonly.aspx in the "important note" section.

Resources