access controls in form tag of master page in javascript

Question

0.00/5 (No votes)

See more:

hi..........

I am trying to access menu control in the master page which in placed in table tag which nested in form tag using javascript.but i am not able get my menu control. my code is given as:

master.Master

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>
<script type="text/javascript" src="Scripts/PageHeader.js" ></script>
</head>
<body>
    <form id="form1" runat="server">
    <table width="100%" id="headertable" >
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

    </tr>

    <tr >
        <td width="15%">
            <img src="Images/PageHeaderImage.jpg" width="100%" height="100%"/></td>
            <td width="85%" style="font-family: 'Comic Sans MS'; background-color: #C0C0C0;" colspan="3"><h1 align="center"  >PageHeader Control</h1></td>
    </tr>
    <tr  bgcolor="#999999">
       <td id="menuTd" runat="server"  align="left" width="50%" colspan="2">
           <asp:Menu ID="MenuCntrl" runat="server" Orientation="Horizontal" colspan="2" RenderingMode="Default" ForeColor="Black" StaticMenuItemStyle-BackColor="#993399" BackColor="#CC3300" ClientIDMode="Static">
           </asp:Menu>
       </td>
       <td id="modeTd" runat="server" align="right" width="50%"></td>

    </tr>

</table>

       <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

    <input id="hdnMode" type="hidden" name="hdnMode" runat="server" clientidmode="Static" />
    </form>

</body>
</html>

javascript code:

document.getElementById('MenuCntrl').disabled = true;

C#

for (var i = 0; i < document.forms(0).elements.length; i++) {
        alert(document.forms(0).elements(i).id);


    }

i am not able to find this "

MenuCntrl

" in javascript which i want to disabled on particular condition.
provide soln
thanx

Posted 4-Jun-12 2:34am

Vijay Walunj,Navi mumbai

Add a Solution

Comments

[no name] 4-Jun-12 12:03pm

Start the website and open the source of the html in your web browser. Probably the id has a prefix (based on the usercontrol), something like ctl00_MenuCntrl.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ruard · Answer 1 · 2012-06-05T11:11:00

The solution of thatraja actually works (the element is found and is disabled), but you didn't get the desired result. An ASP:Menu control is not really one control. Take a look at this generated HTML, a menu with three items:

<table id="ctl00_MenuCntrl" class="ctl00_MenuCntrl_2" colspan="2" renderingmode="Default" clientidmode="Static" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MenuCntrln0">
      <table class="ctl00_MenuCntrl_4" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;">
            <a class="ctl00_MenuCntrl_1 ctl00_MenuCntrl_3" href="javascript:__doPostBack('ctl00$MenuCntrl','New Item1')">New Item1</a>
          </td>
        </tr>
      </table>
    </td>
    <td style="width:3px;"></td><td id="ctl00_MenuCntrln1">
      <table class="ctl00_MenuCntrl_4" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;">
            <a class="ctl00_MenuCntrl_1 ctl00_MenuCntrl_3" disabled="true">New Item2</a>
          </td>
        </tr>
      </table>
    </td>
    <td style="width:3px;">
    </td>
    <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MenuCntrln2">
      <table class="ctl00_MenuCntrl_4" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;">
            <a class="ctl00_MenuCntrl_1 ctl00_MenuCntrl_3" href="javascript:__doPostBack('ctl00$MenuCntrl','New Item3')">New Item3</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

It is actually a table, with a single row and three cells. And in each cell there is another table with one row and one cell. To disable the menu you need to disable a lot of elements. You also may have to remove the events like onmouseover and onmouseout and the javascript_postback.

Now take a look at the code that is generated when you set the menu as disabled in the control (enabled=false). Some elements are disabled and there are no events and no javascript_postback.

<table id="ctl00_MenuCntrl" disabled="disabled" class="ctl00_MenuCntrl_2" colspan="2" renderingmode="Default" clientidmode="Static" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td id="ctl00_MenuCntrln0">
      <table class="ctl00_MenuCntrl_4" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;">
            <a class="ctl00_MenuCntrl_1 ctl00_MenuCntrl_3" disabled="true">New Item1</a>
          </td>
        </tr>
      </table>
    </td>
    <td style="width:3px;"></td><td id="ctl00_MenuCntrln1">
      <table class="ctl00_MenuCntrl_4" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;">
            <a class="ctl00_MenuCntrl_1 ctl00_MenuCntrl_3" disabled="true">New Item2</a>
          </td>
        </tr>
      </table>
    </td>
    <td style="width:3px;"></td>
    <td id="ctl00_MenuCntrln2">
      <table class="ctl00_MenuCntrl_4" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;">
            <a class="ctl00_MenuCntrl_1 ctl00_MenuCntrl_3" disabled="true">New Item3</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

How to disable the menu? You can write a lot of javascript and disable the right elements. But keep in mind that browsers are different. The javascript solution may not work for every browser.

I would go for this solution: add two divs, one visible at a time, containing an enabled and a disabled menu. Toggle between those to enable / disable the menu.

thatraja · Answer 2 · 2012-06-04T09:00:00

Solution 1

Try

JavaScript

document.getElementById('<%=MenuCntrl.ClientID %>').disabled = true;

Check this Tip/Trick

ASP.NET MasterPage getElementById[^]

Posted 4-Jun-12 9:00am

thatraja

Comments

Vijay Walunj,Navi mumbai 5-Jun-12 1:20am

thanx bro but still it not working.if you have other soln provide me.