How to trigger an UpdatePanel by a TextBox control?

Question

Consider the following code:

<label>Search:</label><asp:TextBox runat="server" ID="search" ClientIDMode="Static" OnKeyUp="$('#searchButton').click();" /><asp:Button runat="server" ID="searchButton" ClientIDMode="Static" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView runat="server" DataSourceID="EntityDataSource1" 
            AllowPaging="True" AllowSorting="True" AutoGenerateColumns="true" PageSize="20"
            Width="400" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="searchButton" />
    </Triggers>
</asp:UpdatePanel>

The button will trigger an update of the panel. I wanted to trigger an update by a keydown of the search field, so I'm 'faking' it with a jQuery statement that clicks the button. I'm wondering... there must be a better way... right!?

May be this would help you http://stackoverflow.com/questions/1009086/how-to-make-an-asp-net-textbox-fire-its-ontextchanged-event-fire-in-an-ajax-upd — coder, Nov 23 '11 at 21:53
@Kiran the search field is outside the update panel, which makes it a tat differenct that question 1009086, because if I use an auto submit the page will be submitted. Maybe Remy is right and should I write my own control for it... — Kees C. Bakker, Nov 23 '11 at 21:56
Yes I too agree.As I am also right now working on the same thing may be he his right. — coder, Nov 23 '11 at 22:00
@KeesC.Bakker, as such I don't see any issue in faking click on the trigger. The UpdatePanel model works by capturing form submit - the element that has caused submit is checked against the map maintained of valid submit triggers. Unless you want to rely on internal workings of UpdatePanel, IMO, faking trigger click seems to be a nice non-intrusive solution. — VinayC, Nov 24 '11 at 05:07

score 3 · Accepted Answer · edited Dec 12 '11 at 10:06

3

You can do this to refresh your updatepanel without the button:

<script type="text/javascript">

    function refreshPanel() {
        __doPostBack('<%= updatePanel.UniqueID %>', '');
    }

</script>
<label>Search:</label>
<asp:TextBox runat="server" ID="search"  
                ClientIDMode="Static" OnKeyUp="refreshPanel();" />
<asp:UpdatePanel runat="server" ID="updatePanel">

You just need to give your updatepanel an ID (updatePanel here)

Execute that code on a keyup or whenever you are ready for it.

edited Dec 12 '11 at 10:06

Kees C. Bakker

32,294
27
115
203

answered Dec 09 '11 at 14:03

Erik Dekker

2,395
5
33
55

It submits the page. I would like to do a AJAX post back that causes no page refresh. – Kees C. Bakker Dec 09 '11 at 15:38
Turns out the <% %> can't be set to the OnKeyUp property :( – Kees C. Bakker Dec 09 '11 at 16:16
@KeesC.Bakker: Just put the code in a seperate function and call that function in your keyup. – Erik Dekker Dec 12 '11 at 08:07

score 1 · Answer 2 · answered Nov 23 '11 at 21:49

1

The link is a bit outdates, but should pretty much do what you want:
http://remy.supertext.ch/2007/06/see-search-results-as-you-type-an-aspnet-ajax-control/

answered Nov 23 '11 at 21:49

Remy

12,555
14
64
104

Not that I know, but my code does pretty much what you need, no? – Remy Nov 24 '11 at 20:19
Yeah. I would like to merge the DelayedSubmitExtender and the TextBox into one of control, so it can work together as a trigger-option. – Kees C. Bakker Nov 25 '11 at 09:11

How to trigger an UpdatePanel by a TextBox control?

2 Answers2

Linked