html tags and javascript

M

mike55

Contributor
Joined
Mar 26, 2004
Messages
727
Location
Ireland
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.

Code: 
<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.

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

Here is the javascript code:
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
Click to expand...

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.
 
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
 
Hi tfowler

I have added my Ajax.dll to my bin, and added the following to the web.config file:
Code: 
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />

I have added the following command to the page load of my page:
Code: 
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:
Code: 
    <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.
Click to expand...
This error relates to the panel. Any suggestions on how to overcome this problem?

Mike55.
 
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
 
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.
 
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:
Code: 
 <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:
Code: 
.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.
 
Back
Top