CODEWITHSUNDEEP
javascriptc#asp.net
Fred
Fred

Reputation: 5808

Javascript Updating ASP:Label Not Updating Text

I have a user registration page where I want to check the username entered is not already in user without postback.

ASPX Page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="Scripts/Registration.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

   <table class="contenttable">
        <tr>
            <td class="RegTableLabelCol">
                <asp:Label ID="Label1" runat="server" Text="User Name"></asp:Label>
            </td>
            <td class="RegTableDataCol">
                <asp:TextBox ID="txtUserName" runat="server" ></asp:TextBox>
            </td>
            <td class="RegTableMessageCol">
                <asp:Label ID="lblUserName" runat="server" CssClass="ErrorLabel" Text="Test "></asp:Label>
            </td>
        </tr>
    </table>
 </form>
  </body>
</html>

JavaScript:

function UserChecker(username) {

lbl = document.getElementById('<%=lblUserName.ClientID%>');

if (username != '') {
    PageMethods.UserNameChecker(username, OnUserSucceeded);
}
else {
    lbl.innerHTML = 'Please enter a username';
}
}

function OnUserSucceeded(result, userContext, methodName) {

lbl = document.getElementById('<%=lblUserName.ClientID%>');

if (methodName == "UserNameChecker") {

    if (result == true) {
        lbl.innerHTML = 'User name not available';
    }

    else {
        lbl.innerHTML = 'User name is available ';
    }


}

Code Behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            txtUserName.Attributes.Add("onblur", "UserChecker(this.value)");
        }
    }
    [WebMethod]
    public static bool UserNameChecker(string UserName)
    {
        string UserNameDb = null;
        SQLMethods sqlm = new SQLMethods();

        DataSet dataSet1 = sqlm.IsUserNameExist(UserName);

        foreach (DataRow row in dataSet1.Tables["UserName"].Rows)
        {
            UserNameDb = string.Format("{0}", row["UserName"]);
        }

        if (UserNameDb != null)
        {
            return true;
        }
        else
        {
            return false;
        }

    }

I have put alerts in the javascript and the functions seem to be fired. The trouble is the label is not being set for either case (No username, username taken or username ok). Where am I going wrong?

UPDATE

The JavaScript is in a .js file, if I put it in the aspx page it picks up the label and works.

Upvotes: 0

Views: 969

Answers (1)

Stilgar
Stilgar

Reputation: 23551

lbl = document.getElementById('<%=lblUserName.ClientID%>');

in a JS file will not work. The <%= %> indicates server code part of aspx page. If you put it in a JS file it is just a string.

You may leave this part in the page and declare lbl as a global variable which functions in the JS file reference.

Alternatively you can switch the ClientIDMode of the control to static and then use the ID of the control in the JS file

Upvotes: 1

Related Questions