views:

17

answers:

2

Hi All,

This is my master page code

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteMaster.master.cs"
    Inherits="ChildPage_Call_Js_in_MasterPage.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:PlaceHolder ID="phMenu" runat="server"></asp:PlaceHolder>
        <asp:ContentPlaceHolder ID="ContentPlaceHolderBody" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <script type="text/javascript" language="javascript">
        function showHideMasterPageContent() {
            debugger;
            var phMenu = document.getElementById("<%=phMenu.ClientID%>");
//            phMenu.style.display = 'none';

        }
    </script>
</body>
</html>

And this is my Childpage code :

<%@ Page Title="" Language="C#" MasterPageFile="~/SiteMaster.master" AutoEventWireup="true"
    CodeBehind="ChildPage1.aspx.cs" Inherits="ChildPage_Call_Js_in_MasterPage.ChildPage1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="server">
   <script type="text/javascript" language="javascript">
       $(document).ready(function () {

           debugger;
           showHideMasterPageContent();
       });


    </script>
</asp:Content>

Now what I want to do is, using JavaScript, hide the "phMenu" contents in the childpage. For this, I have written a function called " showHideMasterPageContent " in the masterpage which I am calling in the child page.

My trouble is that, I get a null reference since obviously, when I looked at the source, I see that only the contents of phMenu are rendered and not the phMenu control itself. Now how to refer to phMenu in JS ?

A: 

You are correct. A PlaceHolder control is just that. It only renders the contents, and there are no tags rendered for itself.

If you want to do this, then you should surround the placeholder with a div (or an asp panel, if you prefer).

        <div id="phMenuContainer">
            <asp:PlaceHolder ID="phMenu" runat="server"></asp:PlaceHolder>
        </div>

or

        <asp:Panel ID="phMenuContainer" runat="server">
            <asp:PlaceHolder ID="phMenu" runat="server"></asp:PlaceHolder>
        </asp:Panel>

Here, you can hide the phMenuContainer div instead of the phMenu placeholder. Remember, though, that if you choose to use the Panel, then you will have to refer to the control by its ClientID.

<%=phMenuContainer.ClientID %>
Gabriel McAdams
A: 

In ASP.NET 4.0 you can set the ClientIDMode attribute. It doesn't work for Placeholders but it works for panels. This will give you a reliable client ID that you can manage through Javascript.

http://www.west-wind.com/weblog/posts/54760.aspx

nopuck4you
Hey guys thanks for the answers. I forgot to add that, this Masterpage was developed around 4 months ago by my team and they are using "document.getElementById("....")" in many places on other pages which inherit this master page in order to refer to the contents of this phMenu.In addition to this, we use Telerik RadControls on these child pages which are also using some javascripts referring to the controls inside the phMenu.
Sandeep
The framework is 3.5SP1 so no ClientID mode attirbute :( Now if I add a div or another panel around my placeholder, it is likely that the ASP.NET naming hierarchy will kick in and change the client Ids of all the contents ...which can then break a lot of JS code that has been added over the last few months..Is there any safe way to do this without causing regression issues ?
Sandeep
If you ad a DIV that has an ID in it ASP.NET should not change the ID unless you add runat="server" to it.
nopuck4you