Question

I’m new to jquery, and sorry if this question is asked before (could find exactly what I was looking for)

I would like to implement the following convetion: If I create a error label with the name ‘_lblError’ like this:

<div>
   <asp:label ID="_lblError" text="this is a error msg"/>
</div>

classA or classB would be applied to it depending on a empty string or not in the ‘text’ parameter of the label.

I also would like to place this code in a external js file that would be used throughout the app.

Thanks for any help!

Answer 1

To start with, you probably need to give the label a css class that can be used for selection:

<asp:Label Id="_lblError" Text="This is the error message"
    CssClass="ThisIsWhatWeWillllWorkWith" />

This will probably output something like

<span id="ct100__lblError" class="ThisIsWhatWeWillWorkWith">
    This is the error message.
</span>

You can now select the label in jQuery using the class as selector, and add class A or B depending on whether the .text() property is empty or not.

$(function() {
    $('.ThisIsWhatWeWillWorkWith').each(function() {
        if($(this).text() == '') { $(this).addClass('ClassA'); }
        else { $(this).addClass('ClassB'); }
    });
});

All code is provided as is, with no guarantees of working without modification. But you get the general idea of how to solve the problem…

EDIT: In response to your comment, here’s a way to do it without adding a css class to the label. Instead of using an <asp:Label> tag for the error message, wrap a literal in a tag you hard-code on your page:

<span class="ThisIsWhatWeWillWorkWith"><asp:Literal ID="__ltlError" Text="This is the error message.</asp:Literal></span>

Another, perhaps more elegant way, would be to create your own custom label, and use that instead.

public class ErrorLabel : System.Web.UI.WebControls.Label
{
    public ErrorLabel() {
        this.CssClass = "ThisIsWhatWeWillWorkWith";
    }
}

You then put the error message on your page with the following line:

<asp:ErrorLabel ID="__lblError" Text="This is the error message" />

Again, not sure if the above code will work as is. But again, you get the idea of what to do…