Making a ul work on server side code as well as client side code.

The user selects a value from the drop down and then, adds li elements to the ulSelectedusrs by calling a javascript. I also need to be able to add some users on page_load on the server side code. So when I add the runat="server" tag, the li elements are not added when the image is clicked. How can I make it work such that on page load I can add elements server side as well as when the image button is clicked I can add it client side. please help . Thanks
<asp:ImageButton runat="server" ID="imbBtnAdd" ImageUrl="~/images/plus_add_green.png" ImageAlign="AbsMiddle" OnClientClick="return addUser();" />
                            <ul id="ulSelectedUsers" class="selectedUsers" runat="server">

I have added my javascript code :
var selectedUsers = [];

    function adduserToList(userId, userName) {
        selectedUsers.push(userId);
       
        var li = $("<li></li>").text(userName).addClass("username");
        $(li).attr("id", userId);

        var deleteCtl = $("<a>").text("x");
        $(deleteCtl).attr({
            href: "#",
            class: "removelink"
        });

        $(deleteCtl).attr("onclick", "return removeuser(" + userId + ")");
        $(li).append(deleteCtl);

        $("#ulSelectedUsers").append(li);
    }
   
   function addUser() {
        userId = parseInt($('#<%= ddlistUser.ClientID %>').val());
        debug("userId = " + userId);
        if (userId == -1) {
            alert('Please select a audtior.');
            return false;
        }

        if (selectedUsers.exists(userId)) {
            alert('Auditor is already selected.');
            return false;
        }

        userName = $("#<%= ddlistUser.ClientID%> :selected").text();
        adduserToList(userId, userName);

        return false;
    }
TrialUserAsked:
Who is Participating?
 
Dale BurrellConnect With a Mentor DirectorCommented:
When you add runat="server" to a tag you are making it a server side control and if you then look at the HTML you will find that the id is not longer "ulSelectedUsers" instead it is an ID which represents its entire namespace.

So you need to create a variable in your javascript like this:

var MyUlId="<%=ulSelectedUsers.ClientID%>";

and then access it as follows:

$("#" + MyUlId)

Then if you want to add new li elements server side you just do:

HtmlGenericControl NewLi = new HtmlGenericControl("li");
NewLi.InnerText = "Whatever";
ulSelectedUsers.Controls.Add(NewLi);
0
 
TrialUserAuthor Commented:
works perfectky thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.