Solved

Javascript to show/hide panel but panel may not be visible on page load

Posted on 2008-10-10
4
922 Views
Last Modified: 2012-06-22
Hi
I have a user control, say called
MyUserControl

MyUserControl has a panel on it, panel1, and a combobox, NumberUnits

Depending on the value of "NumberUnits" (0-5) , Panel1 must be shown/hidden.


If numberUnits = 0, Panel1 should be hidden
else   panel1 should be shown


On page_load, the "NumberUnits" combobox is set to a value in session, say Session("NumberUnits")

On a page using master page I have two instances of these.  MyUserControl1 & MyUserControl2

On page_load of the MyUserControl I add javascript to the NumberUnits combobox like so. This means on changing the combobox, the panel is shown/hidden.
               js.Append("showHidePanel(")
                js.Append(Panel1.ClientID)
                js.Append(",")
                js.Append(NumberUnits.ClientID)
                js.Append(")")
                Me.NumberUnits.Attributes.Add("onchange", js.ToString)

HOWEVER there is a problem.

IF Panel1 is set to be hidden on loading, it is not rendered and so where the onchange event takes place nothing happens.

How do I get over this?
There are two things:
1) Panel1 must be able to be shown/hidden on changing NumberUnits combobox
2) Panel1 must be able to be shown/hidden on page load  [so it needs to be rendered even if not visible on page load]

Hope this makes sense.

Thansk in advance for assisting with code....hopefully I'm not way off with what I've done so far...
function showHidePanel(panel, unitsChosen)
    {
        // show the panel
        if (unitsChosen.value>0)
        {
            alert(unitsChosen.value);
            panel.style.visibility = "visible";
            
        }
        else
        {
            // hide the panel
            alert(unitsChosen.value);
            panel.style.display = "none"; //to hide it
        }    
    }

Open in new window

0
Comment
Question by:rwallacej
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 8

Accepted Solution

by:
tiagosalgado earned 500 total points
ID: 22687678
Instead of yourpanel.Visible = false, try to use yourpanel.Style.Add("visible","hidden")
0
 

Author Comment

by:rwallacej
ID: 22688092
thank you very much, for the benefit of others this works:

in .ascx.vb
                If NumberUnits.SelectedIndex = 0 Then
                    Panel1.Style.Add("visibility", "hidden")
                End If
 
in .ascx javascript
    function showHidePanel(panel, unitsChosen, model, iso, isoAmbient)
    {
        // show the panel
        if (unitsChosen.value>0)
        {
            panel.style.visibility = "visible";
        }
        else
        {
            // hide the panel
            panel.style.visibility = "hidden";
        }    
    }

Open in new window

0
 
LVL 8

Expert Comment

by:tiagosalgado
ID: 22688171
glad to help! Accept the solution pls.
0
 

Author Closing Comment

by:rwallacej
ID: 31505049
thanks - I got interrupted and forgot to accept solution
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 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