Click here to Skip to main content
15,891,951 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I have this TextBox where users will type things before performing a search. As they type, the program compares them with some values fetched from the database.
So I was trying to use the TextChanged event handler with UpdatePanel and AutoPostBack turned to true.

But it doesn't work unless you actually perform a postback like click a button.
Any idea how I can achieve this?
Thanks.
Posted

Just found this[^], so, yeah, it only fires when you tab out.

As for formatting (styling) the textbox with CSS, here's a couple of samples[^], with source, and an online editor.

If you're not opposed to the jQuery approach, I have a ton of samples on my blog (click sig).

Cheers.
 
Share this answer
 
v2
Comments
Ekjon 21-Sep-10 16:20pm    
jQuery is perfectly fine with me. I'll keep trying and let you know the outcome. Thanks again.
Ekjon 21-Sep-10 18:27pm    
Reason for my vote of 5
Automatic vote of 5 for accepting answer.
I know I'm not answering your question per se, but this might still solve the problem.

Is there any reason you can't use the Autocomplete[^] control?

It's free, and the scripts are on the MS CDN.

Cheers.
 
Share this answer
 
Comments
Ekjon 21-Sep-10 11:40am    
I am not sure if that would be appropriate. I don't want to display any popup here. But I just want to highlight or change the text color of the text they are typing in the text box. Do you think I can do that with AutoComplete extender?
TheyCallMeMrJames 21-Sep-10 11:44am    
No, I don't think that's the right fit then. But on to the problem at hand...let's double check a couple of things here. Is the textbox in the updatepanel? Do you have a server-side event ready-and-waiting? Have you set a breakpoint to see if the postback is happening, but you're hitting an error in the Ajax call? Maybe update your question with some of those responses and we'll see where we get to. Cheers!
Ekjon 21-Sep-10 13:14pm    
Yes, it is in an UpdatePanel. Server-side event ready and waiting? My test-code is in the server-side event handler like:
protected void txtCreateEventByDesc_Changed(object sender, EventArgs e)
{......}. So I think it should be ready and waiting for the event to occur.
I set a breakpoint on the event handler and found the postback is not happening, but didnot find any error. If I hit a button - then the code in the TextChanged executes. If I hit it the second time - I get an error message saying an unknown error occurred and the status code returned is 500.
I also have a silly question. I need to change color only for part of the text that matches the keywords. But the TextBox's Text property doesn't work like a Label's Text. If I add css with a Label's Text like "" + lblMsg.Text + ""; it works but it doesn't for the TextBox's Text.
How can I make that work? Thanks.
TheyCallMeMrJames 21-Sep-10 13:51pm    
If I recall correctly, the TextBox won't fire it's event until the user leaves the control. There may be a way to get that firing otherwise. Can you tab out and see if that does it? I'll see if I have a solution in my archive somewhere...I'm using jQuery and jQuery UI with ASP.NET MVC now, so I'm not running into this.
Ekjon 21-Sep-10 14:51pm    
I am using jQuery too for the first time. Would there be a simpler jQuery solution? If not, then I'd go for something you get in your Archive.
Thanks so much Mr. James.
hey buddy , i m attaching code please refer to it which will help you.
i have called server side method on textbox1 text change jquery.
and it gets response from server side method and updates ui accordingly.
i hope you will get hint . ;)
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script src="jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">

$(document).ready(function() {
 
        $("#TextBox1").keyup(function() {

            var email = $("#TextBox1").val();
            
            $.ajax({

                type: "POST",
                url: "Default.aspx/Check",
                data: "{'value1': '" + email +"'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success: function(response) {
                            $('#myDiv').text(response.d); 
                },
            error: function() {
            alert("Error");

}

});

    //Call the PageMethods
    $.ajax(options);

 

});

 

 

});

</script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="myDiv"></div>
    <div>
        <asp:label id="lbl1" runat="server" text="Label1" xmlns:asp="#unknown"></asp:label>
        <asp:textbox id="TextBox1" runat="server" xmlns:asp="#unknown"></asp:textbox>
        <asp:label id="Label1" runat="server" text="Label2" xmlns:asp="#unknown"></asp:label>
        <asp:textbox id="TextBox2" runat="server" xmlns:asp="#unknown"></asp:textbox>
    </div>
    </form>
</body>
</html>



public partial class _Default : System.Web.UI.Page
  {
      protected void Page_Load(object sender, EventArgs e)
      {

      }

      [WebMethod]
      public static string Check(string value1)
      {
          return "DateTime : "+ DateTime.Now.TimeOfDay.ToString()  + " Hello " + value1;
      }
  }
 
Share this answer
 
Comments
Ekjon 21-Sep-10 16:21pm    
Thanks kaushal.
Inside the form tag, the tag for the "myDiv" is missing. Is it just a div tag? like
?
I get error when I type

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900