Firing OnClick on TextBox using JQuery_问答_开发者

I have a textbox in which anytime user clicks on it a function in the code behind needs to get fired. Here is the JQuery:

    <script type="text/javascript">

      $("#txtName").click(function(){<%TextChanged();%>});

    </script>

And here is the Textbox UI:

<asp:T开发者_运维问答extBox ID="txtName" runat="server"></asp:TextBox>

And here is the code behind of TextChanged() function in which I am running some query:

protected void TextChanged()
    {
        //Writing my query here!!!
    }

Now this function is firing up in the Page_Load() not in txtName.Click. Why? I want to fire this TextChanged() function from JQ whenever user is clicking on the txtName!

You asked a very similar question to this not too long ago. The problem is that without some fairly gnarly jury-rigging, this isn't going to work well. Running server-side code every time there is text changed in that textbox is going to provide for a poor user experience, as the page will postback every time text gets changed. So every time a users hits a key, boom, the page disappears, reappears, and then they have to find the textbox again if you do not set focus.

You really need to handle whatever it is that you are doing on the clientside through JavaScript/jQuery. What is your end goal? What are you wanting to happen when text gets changed?

If you want to handle the click event on the client side you should implement code in the JQuery function not on the server side

First of all, it doesn't quite work like that -- you can't fire a server event from the front-end without either doing a post-back or using AJAX. Second of all, .NET assigns it's own, server-generated ID's to WebForms elements, so you're not selecting the txtName element at all. Try using the CssClass property and using something like $(".myElement").click(function() { });

If you want to be able to fire off a server event using a front-end instantiated event asynchronously, your best bet is to use an AJAX call. Otherwise, just do a post-back.

I am not an expert on asp but this kind of services works similar. When get a request for your page the server process it and construct a result html from your asp file. This html is processed by the browser. So when you put <%TextChanged();%> on your asp file your server executed and send the corresponding result. Actually your jquery script looks like this on the browser

$("#txtName").click(function(){});

For this to work you need to send a new request to the server to execute your TextChanged method on server and returns a valid response (xml for example) so the browser or in this case your jquery script can handle it and show the info you want.

Server side code <%TextChanged();%> gets executed when the page is pulled the first time. The onclick function triggers on the client side and cannot do anything on the server side. You need to use postback somehow. Use AJAX via jQuery or ASP.NET's AJAX using page methods, web services etc.

Here is a short demonstration to explain what goes on. Create an aspx page and have this in it

<html>
    <body>

        <script language="javascript">
        function ShowTime()
        {
            alert('<%= DateTime.Now.ToString() %>');
        }
        </script>

        <form runat="server">

            <asp:TextBox runat="server" onclick="ShowTime();" Text="Click Me"></asp:TextBox>

        </form>

    </body>
</html>

Then pull it in the browser and click the textbox a few times. You should see the same alert everytime. Check the rendered HTML (view source)

<html>
    <body>

        <script language="javascript">
        function ShowTime()
        {
            alert('4/20/2011 12:06:09 PM');
        }
        </script>

        <form method="post" action="Test1.aspx" id="ctl00">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJLTU2Mzk2MTc5ZGTwB2Ph3lGOb1/uUI+lbZ5QtQQT2kk+dPbtprtjMpSZBg==" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgK946tbAqLAiY0L0tc9fkAJ/FKqRuxYl8nrpx8irMZ96Kzc8GjJhrrhP9A=" />

</div>

            <input name="ctl01" type="text" value="Click Me" onclick="ShowTime();" />

        </form>

    </body>
</html>

As you can see the server side code DateTime.Now.ToString() has already executed and it has sent the time at the moment of execute to the client browser. Now no matter how many times the client side function is executed, the same time would be alerted as there is no communication going on between client and server.

Why don't you use the AutoPostBack feature?

<asp:TextBox ID="txtName" 
             runat="server" 
             AutoPostBack="true" 
             OnTextChanged="TextChanged" />

Firing OnClick on TextBox using JQuery

精彩评论

关注公众号

热门标签

图文推荐

Firing OnClick on TextBox using JQuery

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：