Chris__T
Posts: 339
|
| Posted: 10/29/2008, 2:11 PM |
|
I'd like to hide/unhide a panel based off a checkbox on the form. This checkbox isn't related to any table fields, it's just a plain old checkbox. Is there a way to have it so when I click/unclick this checkbox, it hides/unhides a panel?
|
 |
 |
melvyn
Posts: 333
|
| Posted: 10/29/2008, 5:41 PM |
|
Yes.
1) By Javascript: The form is loaded and hide/show is simple javascript, instant when onclick. Try JQuery or plain javascript. There are some related stuff here, I've posted in the last week, search the forum.
2) By Ajax call: Click on the panel, go down in the properties, and set features (click on the ...) and will show you several possible actions, including hide/show panel. (Features ->Ajax HideShow -> set events to fire).
The choice between 1 and 2 depends from application requirements, security, and others factors, including your personal taste.
_________________
Melvyn Perez
Puro Codigo
http://purocodigo.com |
|
|
|
Chris__T
Posts: 339
|
| Posted: 10/30/2008, 1:00 PM |
|
I tried Ajax first, but nothing seemed to work. On beforeshow event for the panel, I have it initially set to visible = false so it is hidden when the page loads. Doing the Ajax hide/show stuff doesn't seem to work. I was using a checkbox control (onclick, onfocus, ondblclick) for the hide/show stuff but nothing seemed to work.
Then I saw one of your responses over in the PHP section, but couldn't figure out how to implement the javascript to make it work. I tried in the checkbox html stuff: onclick="showpanel2()" then for the function was
function showfield2() { document.forms["Permit"].Panel1.visible = true; }
and
function showfield2() {
document.forms["Permit"].Panel1.style.display = " ";
}
I'm probably doing something wrong, of course.
|
|
|
|
melvyn
Posts: 333
|
| Posted: 10/30/2008, 2:05 PM |
|
those functions are javascript, and (as you copied it) works for elements inside a form.
I guess your panel is outside the the form. The checkbox is inside the form.
You posted above 2 functions, In the first one you use some ccs/php syntax and will never work. In the second will work for a component named Panel1 inside the form Permit.
Try the JQuery examples for different components.
Also read this tutorial about javascript:
http://www.howtocreate.co.uk/tutorials/javascript/dhtml
Let me know, I can check it later, I'm going out of the office now (5:00pm).
_________________
Melvyn Perez
Puro Codigo
http://purocodigo.com |
|
|
|
Chris__T
Posts: 339
|
| Posted: 10/30/2008, 2:42 PM |
|
The panel is inside the form. The checkbox is also inside the form, but outside the panel.
I'll look up the jquery examples and read the tutorial. I'll be out for 3 days, but will check back in monday and let you know. Thanks for your help.
|
|
|
|
Chris__T
Posts: 339
|
| Posted: 11/05/2008, 1:39 PM |
|
Been trying a few things, but nothing is working. First is for a test, doing an onclick in a separate (not in panel) textbox, that would enter a word in the text box.
HTML section for textbox control:
onclick = "myinsertest();"
javascript:
function myinserttest() {
document.Permit.Inspector2.value = "test";
}
and that works
then trying to hide the panel first (because I thought hiding the panel initially through the server side CCS code would override any javascript unhiding i'm trying to do)
I used the same onclick and function above, just adding code for the panel:
document.Permit.getElementById("Panel1").style.visibility = 'hidden';
doesn't do anything. Tried this:
document.Permit.getElementById("Panel1").style.display = "none";
Nothing. I've also tried by removing the "Permit" info from the lines of code...nothing. I'm still trying to figure this out.
|
|
|
|
Chris__T
Posts: 339
|
| Posted: 11/12/2008, 9:29 AM |
|
Ok, figured it out. Here's my solution so if anyone has similar problem hopefully this will help.
The code below will be used with the checkbox onclick. This will toggle the panel hidden/unhidden:
function AlterPanel(thePanel)
{
var panel = document.getElementById(thePanel);
if(panel.style.display == 'none')
{
panel.style.display = 'block';
}
else
{
panel.style.display = 'none';
}
}
Here's my panel code:
<asp:panel id="Panel1" runat="server"> panel stuff </asp:panel>
Here's the code for the checkbox:
<input onclick="AlterPanel('Panel1');" type="checkbox" name="Checkbox2">
Here's code if you want to have the panels hidden by default when the page loads. This would go in the forms->Events->Client->On Load->Custom Code
var panel = document.getElementById('Panel1');
panel.style.display = 'none';
|
|
|
|
Chris__T
Posts: 339
|
| Posted: 11/12/2008, 12:06 PM |
|
Sort of resolved. It doesn't seem to work in Internet Explorer. I'm using IE 7. Anyone know why this would be?
|
|
|
|
Chris__T
Posts: 339
|
| Posted: 11/12/2008, 1:54 PM |
|
Found it. I was using <asp:panel> </asp:panel> tags which seem to be for c#? or asp.net? I switched out and used <div> tags
|
|
|
|
|
