Possible to have a client side event trigger an update panel?

Is it possible to have a client side event trigger an UpdatePanel to postback?  What i am trying to do is type text into a text box and use that text to filter some results.  

As i understand it the server side TextChanged event can only happen when the server checks the textbox to see if it's contents are different, and this only happens every 15 seconds or so from what i've seen so far.  I can also get it to fire if i click out of the text box i'm in, but that isn't really acceptable.  If i could somehow use the client side event as the trigger then it should be near instant (shouldn't it?).

Any help would be appreciated and feel free to correct any confusion you see on my part.
TravidiaAsked:
Who is Participating?
 
TravidiaConnect With a Mentor Author Commented:
For those of you that are interested i found a solution for this on my own.  By setting autopostback to true for my text box and then having the following javascript code executed on the onkeyup event i was able to get the results that i wanted.

    <script language="javascript" >
        function BounceFocus()
        {
            var filter = document.getElementById('TextBoxName');
            filter.blur();
            filter.focus();
        }
    </script>

Since .net controls with autopostback set to true post back to the server when you press enter, press tab, or the textbox looses focus you can get immidiate results by removing focus from the textbox and them immidiately giving it back.
0
 
QPRCommented:
What about the onkeyup event of the text box?
0
 
TravidiaAuthor Commented:
Right, that's what i want to trigger the code i have in my .cs file.  When i try to add triggers to the UpdatePanel it only allows you to choose server side events, not onkeyup which is a client side event.  My question is how do i use a client side event as a trigger.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
QPRCommented:
Should you not be adding the trigger (event) to the textbox?
0
 
TravidiaAuthor Commented:
Which event are you talking about?  Do you understand what i am saying about server side vs. client side events?

Let me try to clarify.

I am currently using .net's OnTextChanged event.  This is a server side event.  An AJAX UpdatePanel can listen for such an event, execute code, and update my page without posting the entire page back to the server.  This would be fine if it wasn't for the way that .net listens for this event.  As I understand it the server checks the control (in this case my text box)  at a specified time interval or after certain actions, and acts accordingly.  Unfortunately this time interval is every 15 seconds or so, which is too long for my users to wait.
Here is a line from the MSDN documentation page (http://msdn2.microsoft.com/en-us/library/system.web.ui.mobilecontrols.textbox.textchanged.aspx) that might help explain my OnTextChanged event time delay problem:
"When the user changes the text of a TextBox, this event is not raised immediately. The form must contain a Command to initiate a postback event that raises the TextChanged event."

Now javascript's onkeyup/onkeydown events, which are client side events,  should happen nearly instantly but i don't have a way to tell my AJAX updatePanel to trigger the code i have in the codeBehind based on this event.

What i am trying to find out is if there is a way for me to trigger based on the CLIENT SIDE EVENT, and if not is there a way to cause the SERVER SIDE EVENT to be raised immidiately.

Hope this helps clarify my qestion.
0
 
QPRCommented:
Ahhh I see - apologies, I read textchanged event and assumed you were refering to client side text box (input) especially as you mentioned client side events.
Nearest I've come to seeing this in action is a sample I downloaded where a user typed into a textbox and javascript (via a web service) refreshed the text box with autocomplete suggestions (similar to predictive text).

Sorry this isn't helping. I can paste the code here. It may offer up some hints as to the client/servers working together with javascript as the medium
0
 
TravidiaAuthor Commented:
Couldn't hurt.  Post away...
0
 
QPRCommented:
Hmmm I can't attach a zip file here.
It consists of an aspx page, 2 cs pages and an asmx page so pasting end to end will be messy.
Got an email address I can send it to?

here's the aspx
the onkeyup event of the text box calls a webservice and returns data. Let me know if you want all the files sent.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

<script language="javascript" type="text/javascript">
<!--
var strOldText;

function getNextWord()
{
    var txtSearch;
    var intKeyCode;

    intKeyCode = event.keyCode;

    // See if a valid key key is pressed such as 0-9, A-Z, a-z, Hyphen, Underscore
    if  (((intKeyCode >= 48) && (intKeyCode <= 57)) || // Numbers 0-9
        ((intKeyCode >= 65) && (intKeyCode <= 90)) || // Upper case A-Z
        ((intKeyCode >= 97) && (intKeyCode <= 122)) ||  // Lower case a-z
        (intKeyCode == 189)) // Hyphen
    {
        txtSearch = document.getElementById('txtSearch').value;
        strOldText = txtSearch;
        ret = myServices.WhatIsNext(txtSearch, OnComplete, OnError, OnTimeOut);
        return (true);
    }
    else // return false.
        return (false);
}

function OnComplete(arg)
{
    document.getElementById('txtSearch').value = arg;
    // Select the text inside the textbox (except the prefix)
    SelectText (strOldText.length, arg.length);
}

function OnTimeOut(arg)
{
    alert("TimeOut encountered when calling Say Hello.");
}

function OnError(arg)
{
    alert("Error : " + arg);
}

function SelectText (intStart, intLength)
{
    var myElement = document.getElementById('txtSearch'); // get reference to the Textbox
    if (myElement.createTextRange) // If IE
    {
        var myRange = myElement.createTextRange();
        myRange.moveStart("character", intStart);
        myRange.moveEnd("character", intLength - myElement.value.length);
        myRange.select();
    }
    else if (myElement.setSelectionRange) // if FireFox
    {
        myElement.setSelectionRange (intStart, intLength);
    }
   
    myElement.focus();
}
-->
</script>
</head>
<body>
<%

    int x;
    x = 1 & 1;
    Response.Write("x = " + System.Convert.ToString(x));
%>

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="myServices.asmx" />
        </Services>
        </asp:ScriptManager>
        <div>
            <input id="txtSearch" name="txtSearch" type="text" onkeyup="return getNextWord()" />
        </div>
        <asp:Button ID="btnTest" runat="server" OnClick="TestWS" Text="Test" />
    </form>
</body>
</html>

 
0
 
QPRCommented:
*cough*
"What about the onkeyup event of the text box?"

;-)
0
 
TravidiaAuthor Commented:
Heh, as i said from the begining that was one way i was trying to do it.  
"Is it possible to have a client side event trigger an UpdatePanel to postback?"
The question wasn't about which event to use, it was about how to use that event to get the desired effect.  If you had suggested the bouncing focus method in conjuction with autopostback which ended up using i would be singing your praises.  As it is... A+ for effort :)
0
 
QPRCommented:
No problem here
0
 
modus_operandiCommented:
Closed, 500 points refunded.
modus_operandi
EE Moderator
0
All Courses

From novice to tech pro — start learning today.