14

I want to set text to label with jQuery after clicking on button. I wrote code and it works, but after I set text in my label, label return his old state. Here is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DynamicWebApplication.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">
        <title></title>

        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function f() 
            {
                $('#<%=Label1.ClientID%>').html("hello");  
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <p></p>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="f();"/>
            </div>
        </form>
    </body>

</html>

5 Answers 5

30

If your button is causing a postback then the changes will be lost after the page has reloaded. Try this -

function f() 
        {
            $('#<%=Label1.ClientID%>').html("hello"); 
            return false;  
        }
5
  • What behaviour do you see? Does the label change then the page refreshes and the change has gone?
    – ipr101
    Commented Aug 8, 2011 at 18:23
  • Label changes and the change has gone without page refresh.
    – Rougher
    Commented Aug 8, 2011 at 18:25
  • Sorry, you are right. the label change then the page refreshes and the change has gone
    – Rougher
    Commented Aug 8, 2011 at 18:28
  • 1
    If you change 'OnClientClick="f();"' to be 'OnClientClick="f();return false;"' does that make any difference? Do you have any other jQuery functions linked to the page?
    – ipr101
    Commented Aug 8, 2011 at 18:33
  • Yes - it stops the page posting back. Your jQuery code was updating the label but clicking the button caused the page to post the form data back to itself so your jQuery change was lost.
    – ipr101
    Commented Aug 8, 2011 at 19:25
2

Labels do not maintain viewstate. The server will not post that information back to the server. You can try explicitly enabling the ViewState on your Label, but if that doesn't work, you will have to store that value in a hidden field.

<asp:Label ID="Label1" runat="server" EnableViewState="true"></asp:Label>
2
  • Not clear, what is it to store that value in a hidden field. Can you write code?
    – Rougher
    Commented Aug 8, 2011 at 18:16
  • I have already found solution. 'OnClientClick="f();"' to be 'OnClientClick="f();return false;
    – Rougher
    Commented Aug 8, 2011 at 18:42
2

You can use text method to set the text

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="return f();"/>

function f() 
    {
        $('#<%=Label1.ClientID%>').html("hello"); 
        return false;  
    }
3
  • Is your page posting to the server on button click? Commented Aug 8, 2011 at 18:11
  • In that case you should return false from the function to stop the page to submit. Commented Aug 8, 2011 at 18:11
  • No, You can see all my code. I didn't write nothing in file .css
    – Rougher
    Commented Aug 8, 2011 at 18:13
2

I would use this,

$('#<%=Label1.ClientID%>').text("hello");
1
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return f();"/>

function f() 
{
    $('#<%=Label1.ClientID%>').html("hello"); 
    return false;  
}

OR

 <asp:Button ID="Button1" runat="server" Text="Button" />

$(document).ready(function(){
  $('#<%=Button1.ClientID%>').click(function(){
    $('#<%=Label1.ClientID%>').html("hello");
    return false; 
   });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.