CodeCharge Studio
search Register Login  

Visual Web Reporting

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> ASP

 Dynamically show or hide page components

Print topic Send  topic

Author Message
micjon

Posts: 8
Posted: 03/15/2007, 2:33 AM

:-/

hi. I know this can be done - I see it in other applications, but i'm having trouble figuring out how to do it with Code Charge.

I have a code charge page developed using ASP/VBScript. It is a record. There are a couple of data components in the Record that I only want to show if a user selects a specific value for a related Radio Button grouping - ie, certain types require additional information and I only want to show a text field for data entry if one of those certain types is selected. I am unable to dynamically show/hide my components and need some help with the javascript to do this. am i able to use javascript in the OnChange event to hide/show a code charge panel component? Or am I way off base here? Should the components not be in a panel and if not, how do i show/hide them dynamically on the client side?


if someone can help me or point me to a help document that describes how to do this i would greatly appreciate it!

thanks!
mj
View profile  Send private message
mhope

Posts: 37
Posted: 03/15/2007, 2:06 PM

<script type="text/javascript">
function showMenu(c) {
if(c=="Yes") {
document.getElementById("Menu").style.display="block";
}
else {
document.getElementById("Menu").style.display="none";
}
}
</script>
just place this in a select list: onchange="showMenu(this.value)" and place <div id="Menu">the div you want to show/hide</div>

Make sure the value of the select is "Yes" (without the quotes in the value) when you want to show div
View profile  Send private message
micjon

Posts: 8
Posted: 03/16/2007, 8:01 AM

Thank you. Once I got the <div> tag in the correct spot, it worked like a charm!!

Your help is greatly appreciated!

Thanks!
mj
View profile  Send private message
micjon

Posts: 8
Posted: 03/16/2007, 11:15 AM

Correctly doing the suggestion above, I am able to get the effect I want once the record is in play, but I am having a couple of weird issues yet that are driving me nuts.

When a "new" record opens, I always want the dynamic values hidden, but currently I can't get that to happen, they always show up for new records. Any suggestions for this?

Also, When a record is retrieved, the dynamic fields always appear until I click on or change (I added logic to onChange and OnClick) the radio grouping. How can I get the javascript method to fire correctly in the PageBeforeShow event so the dynamic fields only display if they meet the Show requirement?

Thanks!
mj
View profile  Send private message
mhope

Posts: 37
Posted: 03/17/2007, 12:59 PM

Just change the <div> to:
<div id="Menu" style="display: block">

Let me know what requirement you need to meet and Ill re-work the code for you.
View profile  Send private message
mljonzs

Posts: 124
Posted: 03/22/2007, 12:50 PM

Thanks, that did the trick. Actually I created an HTML Template variable that I manipulate in the BeforeShow event for the page and it worked like I wanted it to work.


Thanks again!
mj
_________________
What does not begin WITH God, will end in failure!
View profile  Send private message
mljonzs

Posts: 124
Posted: 02/20/2008, 10:19 AM

Okay, I need to re-address this topic. The javascript ideas listed above do work but I'm facing one more issue with this whole mess.

The top of the web page contains a radioButton grouping. The value selected in that group determines what displays and what gets hidden on the rest of the page. I use logic mentioned above to show or hide components as needed but when I have to hide an entire row, the <th> and <td> components all get hidden from view but I still have a narrow row space left on the page. Not a big deal for one or two rows, but in a couple of places I am hiding 4-5 consecutive rows and this is leaving a large empty spot on my page that looks bad. I've tried several things to correct the problem but cannot figure out what else to try to completely hide the entire row and not just it's components. I could do this on the server via ASP, but this should be doable on the client with simple scripting, shouldn't it?

any ideas?

Thanks!
Michelle
_________________
What does not begin WITH God, will end in failure!
View profile  Send private message
cwm

Posts: 1
Posted: 03/25/2008, 10:54 AM

style.display = "inline-block"
View profile  Send private message
mljonzs

Posts: 124
Posted: 06/12/2008, 7:32 AM

I have finally gotten around to trying the latest suggestion for my problem posted on 2/20/2008

I used
Quote :
style.display = "inline-block"
rahther than just
style.display = "block"
but it made no difference?? Am I not doing it in the right place?

Thanks!
mlj
_________________
What does not begin WITH God, will end in failure!
View profile  Send private message
marcwolf


Posts: 361
Posted: 06/12/2008, 3:19 PM

Hi.
Q. Are you putting the <DIV> within the table structure or putting the entire table within the <DIV>.

Sometime a small rethink is required because Tables are not always the best thing to use for form layouts.

Also - When a page is loaded into the browser the browser interprets it from first line to last.

So any post formatting i.e. hiding sections, assigning values etc can be done after the </body> tag in a script block.

On many of my pages I has a HTML lable in s script block at the bottom of the page just for that purpose. That was I can add any dynamic JS code at the end.

Take Care

Dave

_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
View profile  Send private message
mljonzs

Posts: 124
Posted: 06/16/2008, 9:59 AM

The <div> tags are inside the table inside the rows; around the <th>/<td> tags. This was the only way I was able to get things to work when I first deployed this stuff....

Are you suggesting that I modify the HTML file to have a function invocation after the </body> tag?


Currently, I set values in two ways, I use an HTMLTemplate variables to set visibility in the CCS BeforeShow event. I also use custom javascript when user changes a radio group selection to change what gets displayed or hidden.

As mentioned above, I can successfully show or hide the column components of the table, but when hiding things, although all the columns in a row are hidden, the row does not appear to completely "hide" so I am trying to figure out where to put code to do this. Using the style.display = "inline-block" did not look any different than the style.display = "block".....


_________________
What does not begin WITH God, will end in failure!
View profile  Send private message
marcwolf


Posts: 361
Posted: 06/16/2008, 2:58 PM

Hi Again.
Ok - HTML can be a real nasty thing whe you are trying to hide rows.

Sometime you are successful, other times you may need to split the original table into several smaller tables and hide each table individually as necessary.

If you do need to use smaller tables you can create a CSS style that fixes the table width so that everythings fits evenly

Hope this helps

Dave


_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

Internet Database

Visually create Web enabled database applications in minutes.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright © 2003-2004 by UltraApps.com  and YesSoftware, Inc.