Solved

Problem with Ajaxcontrol

Posted on 2008-10-27
3
277 Views
Last Modified: 2013-11-07
I'm trying to create a collapse panel following the tutorial on Asp.net : "http://www.asp.net/learn/ajax-control-toolkit/tutorial-18-vb.aspx"
If I create it on a normal page without a Masterpage it works fine. The moment I use a Masterpage and try to use the collapse panel in a Contentpage I get a script error: 'null' is null or not an object.
I researched the web for about 1 hour to find a solution without success.

Any help is appreciated.
Thanks
Thomas
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title> 
 
    <style type="text/css">
    .panelClass {background-color: lime; width: 300px;}
  </style>
 
  <script type="text/javascript">
        function doOpen() {
            $find("cpe")._doOpen();
        }
        function doClose() {            
            $find("cpe")._doClose();
        }
        function doToggle() {
            var cpe = $find("cpe");
            //cpe._toggle();
            if (cpe.get_Collapsed()) {
                cpe._doOpen();
            } else {
                cpe._doClose();
            }           
        }      
  </script>  
    
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div id="MasterHeadMainBox">
	<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
	</div>
    </form>
</body>
</html>
 
//==========================================================
//This is the code for content page
//==========================================================
 
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="testpage.aspx.vb" Inherits="testpage" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">	
	
    <div id="BodyMainBox">
        <div id="PageMainBox">
            <input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
            <input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
            <input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />
            <asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
                This is a test! This is a test! This is a test! This is a test!<br />
                This is a test! This is a test! This is a test!
            </asp:Panel>
            <cc1:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="Panel1" />            
        </div>
    </div>               
</asp:Content>

Open in new window

0
Comment
Question by:tak78
  • 2
3 Comments
 
LVL 32

Accepted Solution

by:
Daniel Wilson earned 125 total points
ID: 22815317
I'm pretty sure your javascript is not navigating down to the content page.  Perhaps something like:

function doOpen() {
            $find("ContentPlaceHolder1").$find("cpe")._doOpen();
        }


I'm seeing discussion of it several places, but not exactly a java-side solution:
0
 

Author Closing Comment

by:tak78
ID: 31510441
Thanks a lot for the hint.
0
 

Author Comment

by:tak78
ID: 22815895
Thanks Daniel. I reviewed some of the links you provided and found that the issue is that when a content page is used the names get "ctl00_ContentPlaceHolder1_" added to the original ID. So that's why it wouldn't find the object.
Well for now I used this for the fix and go tit to work:
<script type="text/javascript">

        function doOpen() {
           $find("ctl00_ContentPlaceHolder1_cpe")._doOpen();
            //$find("cpe")._doOpen();
        }
        function doClose() {
            $find("ctl00_ContentPlaceHolder1_cpe")._doClose();
            //$find("cpe")._doClose();
        }
        function doToggle() {
            var cpe = $find("ctl00_ContentPlaceHolder1_cpe")
            //var cpe = $find("cpe");
            //cpe._toggle();
            if (cpe.get_Collapsed()) {
                cpe._doOpen();
            } else {
                cpe._doClose();
            }          
        }
     
  </script>

Thanks a lot for your help and advice!!!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JSON  parse help 7 40
jQuery Dialog Autoresize Bug 2 24
abstract class C# 1 30
asp.net open new page without popup blocker 8 18
Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question