CODEWITHSUNDEEP
c#javascriptasp.netasp.net-ajax
west
west

Reputation: 11

Problem with javascript getelementbyid

well I have 3 LinkButton

<asp:LinkButton ID="lnkEdit" runat="server" Text="Edit Record" OnClientClick='ControlVisible();'/>
<asp:LinkButton ID="lnkSave" runat="server" Text="Save" Visible="false" />
<asp:LinkButton ID="lnkCancel" runat="server" Text="Cancel" Visible="false"  />

when I'll click to lnkEdit button lnkSave and lnkCancel buttons must unvisible

 <script language="javascript" type="text/javascript">

    function ControlVisible() {


        var Edit = document.getElementById("lnkEdit"); 
        var Save = document.getElementById("lnkSave");
        var Cancel = document.getElementById("lnkCancel");

        Edit.visible = false;
        Save.visible = true;
        Cancel.visible = true;

    }

</script>

But when I'll cLick Edit LinkButton : var Edit = document.getElementById("lnkEdit"); here comes Null, can not retrive Control's ID

what the proble?

Upvotes: 0

Views: 9529

Answers (6)

omartell
omartell

Reputation: 91

ASP .NET automatically includes the IDs of the parent elements when generating an ID for an element. The generated HTML will have IDs following this kind of format: ctl00$MainContent$txtSymbol. So, the default DOM function getElementById won't find an element if you only use the last ID.

Source Element:

<asp:TextBox runat="server" ID="txtSymbol">

HTML generated:

<input type="text" id="ctl00_MainContent_txtSymbol" name="ctl00$MainContent$txtSymbol">

You can create a helper jQuery function which takes care of this. The next function created by Rick Strahl does the job:

function $$(id, context) {  
    var el = $("#" + id, context);  
    if (el.length < 1) {  
        el = $("[id$=_" + id + "]", context);
    }
    return el;  
}

You can use it like this to find your element:

$$("txtSymbol")

Upvotes: 2

Brian Mains
Brian Mains

Reputation: 50728

You have to use another alternative:

var Edit = document.getElementById("<%= lnkEdit.ClientID %>"); 
var Save = document.getElementById("<%= lnkSave.ClientID %>");
var Cancel = document.getElementById("<%= lnkCancel.ClientID %>");

You can also use the ASP.NET AJAX $get method, which is a shortcut for document.getElementById.

Upvotes: 5

Shadow Wizard
Shadow Wizard

Reputation: 66389

When you set Visible false on web control, it means that it never reach the browser. As far as the browser knows, those controls don't exist.

So first make them hidden using CSS instead by changing Visible="false" to style="display: none;" - the effect will be the same.

Next, change the code to this, as others also suggested:

var oEdit = document.getElementById("<%=lnkEdit.ClientId%>"); 
var oSave = document.getElementById("<%=lnkSave.ClientId%>");
var oCancel = document.getElementById("<%=lnkCancel.ClientId%>");
oEdit.style.display = "";
oSave.style.display = "";
oCancel.style.display = "";

Upvotes: 3

Guffa
Guffa

Reputation: 700212

If the controls are inside a container, the id of the container will be prepended to the if of the conbtrol to create a client id that is unique.

You can use the ClientID property to find out the generated id:

var Edit = document.getElementById("<%=lnkEdit.ClientId%>"); 
var Save = document.getElementById("<%=lnkSave.ClientId%>");
var Cancel = document.getElementById("<%=lnkCancel.ClientId%>");

Upvotes: 1

Piotr Salaciak
Piotr Salaciak

Reputation: 1663

Are You sure it's about his line:

var Edit = document.getElementById("lnkEdit");

and not about this one:

Edit.visible = false;

Not sure which browser accepts visible property directly on HTML element, but try to use this instead:

Edit.style.visibility = 'hidden';

or

Edit.style.display = 'none';

Upvotes: 1

Philippe Leybaert
Philippe Leybaert

Reputation: 171744

ASP.NET will generate its own HTML ids. If you want to force your own custom IDs to be generated, you can specify the ID using the "clientID" attribute:

<asp:LinkButton ID="lnkEdit" clientID="lnkEdit" runat="server" Text="Edit Record" OnClientClick='ControlVisible();'/>

Upvotes: 2

Related Questions