html tags and javascript

[mike55]

Hi all

 

I am creating an anchor tag on my page, and I am placing a div tag inside that. Inside the div tag I am placing various asp.net controls. When the page loads the visible property of the anchor tag should be false.

 

<a id="dControls" runat="server" visible="false" >
 <div runat="server" style="width: 301px; height: 64px" id="test">
   <asp:CheckBox ID="CheckBox1" runat="server" />
   <input id="Button1" title="Close" type="button" value="Close" onclick="Hide();" />
 </div>
</a>

 

I have a html button outside of the anchor tag that should set the visibilty of the anchor tag to true using javascript. I also have another html button inside the div tag that calls javascipt to set the visibility of the anchor tag to false.

 

<input id="Button2" title="Advanced" type="button" value="Advanced" onclick="Show();" />

 

Here is the javascript code:

<script language="jscript" type="text/jscript">
       function Show()
       {
           document.getElementById("dControls").visible = true;
      }
       
       function Hide()
       {
           document.getElementById("dControls").visible = false;
       }
   </script>

 

When I click the button to change the visibilty of the anchor tag to true, I get the following error:

Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

 

The javascript code cannot seem to find the anchor tag. Any suggestions on how to overcome this problem. I am using javascript and html buttons in an attempt to reduce post back. I am also going to have a look at ajax now to see if that can help.

 

Mike55.

[tfowler]

I think you'll end up using AJAX. It is very simple to use in this type of situation. I place the controls I want to show/hide in a Panel control and change the visiblity of it.

 

Todd

[mike55]

Hi tfowler

 

I have added my Ajax.dll to my bin, and added the following to the web.config file:

<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />

 

I have added the following command to the page load of my page:

Ajax.Utility.RegisterTypeForAjax(GetType(SendMessage))

 

I have added the panel to my page, and placed the controls that I want inside the panel. I have also added the html button, and have set up the javascript. My method for hiding or viewing the panel is as follows:

   <Ajax.AjaxMethod()> _
   Public Sub ShowPanel()
       Dim setValue As Boolean
       Try
           Select Case pnlAdvanced.Visible
               Case True
                   setValue = False
               Case False
                   setValue = True
           End Select
       Catch ex As Exception
           Stop
       End Try

       pnlAdvanced.Visible = setValue
       
   End Sub

 

I am however getting the following error when I use the ajax code:

Object reference not set to an instance of an object.

This error relates to the panel. Any suggestions on how to overcome this problem?

 

Mike55.

[tfowler]

I'm not sure where you got the instructions to enable AJAX in your application, but you seem to be missing a lot in your web.config file. Check out this video tutorial:

 

http://www.asp.net/learn/videos/view.aspx?tabid=63&id=81

 

He goes through the entire process of adding AJAX capability to an existing site.

 

Once the AJAX web.config information is added, you need to add a ScriptManager control to the page. Then add an UpdatePanel control (and ContentTemplate) that surrounds the Panel control, along with the Button control you will use to control the Panel visibility.

 

Let me know if you need more details,

 

Todd

[mike55]

tFowler

 

Many thanks for the link to the video, I had been using this ajax wrapper provided by a third party on the net. I followed the video and have the ajax working now. I am also in the process of downloading the other ajax related videos on the site, and will start going throught them.

 

Again, many thanks for the help.

Mike55.

[mike55]

Ok,

 

I have used the AJAX web toolkit to do what I want. I am using the collapseable panel extender. I have followed all the steps outlined in the video: http://www.asp.net/learn/videos/view.aspx?tabid=63&id=89.

 

Here is the the html code that I am using:

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" 
                                                                   TargetControlID="pnlAdvanced"
                                                                   ExpandControlId="pnlHeader" 
                                                                   CollapseControlID="pnlHeader" 
                                                                   Collapsed="true"
                                                                   TextLabelID = "Label1" 
                                                                   ExpandedText="Advanced Options" CollapsedText="Advanced Options" 
                                                                   ImageControlID ="Image1" 
                                                                   CollapsedImage="~/Suretxt_Images/collapse.jpg" 
                                                                   ExpandedImage="~/Suretxt_Images/expand.jpg"
                                                                   SuppressPostBack="true" >
                                                           </cc1:CollapsiblePanelExtender>
                                                           <asp:Panel ID="pnlHeader" runat="server" BackColor="#336699" Font-Names="Tahoma"
                                                               Font-Size="XX-Small" ForeColor="White" Height="19px" Width="243px" Font-Bold="True" HorizontalAlign="Left">
                                                                  <asp:Image ID="Image1" runat="server" ImageUrl="~/Suretxt_Images/expand.jpg" />
                                                                  
                                                                
                                                               <asp:Label ID="Label1" runat="server"></asp:Label></asp:Panel>
                                                                       <asp:Panel ID="pnlAdvanced" runat="server" CssClass="collapsePanel">
                                                                           <asp:CheckBox ID="chkDelivery" runat="server" Width="125px" Text="Delivery Report." /><br />
                                                                           <input id="chkSponsor" name="chkSponsor" title="chkSponsor" type="checkbox" runat="server" onclick="SponsorStatus();" value=""  />Sponsors Message.<br />
                                                                           <asp:CheckBox ID="chkName" runat="server" EnableTheming="True" Text="Replace mobile number with: " Width="163px" />
                                                                           <asp:TextBox ID="txtSenderId" runat="server" Height="14px" Width="68px" MaxLength="8" Font-Names="Tahoma" Font-Size="XX-Small"></asp:TextBox></asp:Panel>

 

Here is the entry for my css file:

.collapsePanel
{
   width:243px;
   height:0px;
   background-color:White;
   overflow:hidden;
}

 

The problem's that I am having are as follows:

1. The css file is not being used correct.

2. The panel is showing at the beginning, and the collapsing, according to the video tutorial by setting the height of the collapsing panel to 0 and the overflow to hidden, this problem would not occur. This problem I believe is due to the first problem.

 

Any suggestions?

 

Mike55.

[mike55]

Problem solved, wrong css file name supplied.

 

mike55.