CODEWITHSUNDEEP
javascriptasp.net
jayeshkv
jayeshkv

Reputation: 2208

Access an id from usercontrol in aspx page

So i have the usercontrol named footer which contains the navigation to the website, I'm trying to append the active css class to the div in usercontrol so that the user

This is my footer.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Footer.ascx.cs" Inherits="UserControls_Footer" %>
<div id="bottom">
    <div class="Footer navbar-fixed-bottom">
        <div class="container">
          <div class="row"> 
            <button id="ImgOption1Guru" class="btn btn-large btn-block btn-primary" runat="server" type="button" onclick="location.href='Option1.aspx';">Option 1</button>
            <button id="ImgCmnyInfo" class="btn btn-large btn-block btn-primary" onclick="location.href='CompanyInfo.aspx';" runat="server" type="button">Info</button>
            <button id="ImgInteract" class="btn btn-large btn-block btn-primary" onclick="location.href='Interact.aspx';" runat="server" type="button">Interact</button>
            <button id="ImgActions" class="btn btn-large btn-block btn-primary" onclick="location.href='Actions.aspx';" runat="server" type="button"> Actions</button>
            <button id="ImgStatus" class="btn btn-large btn-block btn-primary" onclick="location.href='Status.aspx';" runat="server" type="button">Status</button>            
          </div>

        </div>

    </div>
</div>

I've used this footer in my aspx page via

<div id="footer"><ucl:Footer ID="foot" runat="server" /></div>

Now i want to add the css class active to the button id on their respective pages . So far i've tried adding the code down to the respective pages and it doesn't seem to work

<script type="text/javascript">
    var x = document.getElementById("ImgActions");
    x.classname += " " + active;
</script>

what should i do to access the id of tag in the usercontrol in my aspx page.

Upvotes: 1

Views: 3552

Answers (1)

Adil
Adil

Reputation: 148110

You need to use ClientID of the control because the id of control will be changed when html is generated by asp.net as you do not have ClientIDMode not set to static. also classname should be className

var x = document.getElementById("<%= ImgActions.ClientID %>");
x.className += " " + active;

ASP.NET provides multiple algorithms for how to generate the ClientID property value. You select which algorithm to use for a control by setting its ClientIDMode property. The algorithms are identified by the ClientIDMode enumeration, Reference.

You can use ClientIDMode static as you have javascript in different control that does not know ImgActions.

Html

<button id="ImgActions" ClientIDMode="static" class="btn btn-large btn-block btn-primary" onclick="location.href='Actions.aspx';" runat="server" type="button"> Actions</button>

Javascript  

 var x = document.getElementById("ImgActions");
 x.className += " " + active;

Upvotes: 4

Related Questions