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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dale BurrellDirectorCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TrialUserAuthor Commented:
works perfectky thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.