APEX-AT-WORK no image

Hide/Show APEX items and labels with jQuery

Von Tobias Arnhold 2.02.2011
To hide or show items and labels with jQuery use this syntax:

$('#P1_NAME').hide();
$('#P1_NAME').parent().hide();
$('#P1_COMPANY').show();
$('#P1_COMPANY').parent().show();

Update 06.02.2011:
Peter mentioned right that this example only works when your item label is set to above!

Short way:

$('#P1_NAME').hide().parent().hide();
$('#P1_COMPANY').show().parent().show();

@Jaydip
"I want to remove those hidden item space. Is it possible by using your method?" - No
I guess you would need to move these hidden items to another place and move them back when they are not hidden. With jQuery you could use appendTo(). I don't know if it works or not? But you would need ID's for your regions.

Post Tags:

5 Comments " Hide/Show APEX items and labels with jQuery "

Peter Raganitsch 02 February, 2011 23:50

Hi Tobias,

this depends where your label is located ;-)

And you could/should chain your commands: $('#P1_NAME').hide().parent().hide();

Anonymous

Hi Tobias,

I am using APEX 4.0, i have just used dynamic actions to hide/show the items.

I have around total 30 items on the single page and at a time among that it shows 3-4 items at a time depends upon selection from the drop down box.

everything is working fine as so far.

the problem is with the hidden items, it takes some space into that region so what happens is my shown item has some space between my drop down box and other dynamically shown items.

I want to remove those hidden item space. Is it possible by using your method?

I hope you understand my issue.

Thanks,
Jaydip

Anonymous

If you want to hide an item with a label to the left, you can hide it with jQuery by using : $('#P1_NAME').parents('tr').hide();

Vlad

Thobias,

I'm very new to Apex and trying to access regions via whatever CSS/Javascript I know. I am not a developer and quite new to APEX.

When I look at the page code, I see the region has a generated ID like R79109283901. I can then add CSS to the page to target that ID.

That, I suspect, is a bad idea, so I'd like to assign that region a static ID. When I put "Region1" into "Static ID" field on the region, I can't seem to access it with CSS (e.g., #Region1 border: 0px;) And if I look at the page code, the Static ID is not even included in the page. I don't know why they would make it such a hassle.

What is the absolute simplest possible way to access a region with CSS/JavaScript by ID?

Thanks in advance!

Anonymous

1. Enter an id into the "Static ID" field for the region (e.g., hello)
2. Go to the template being used for the region and insert "#REGION_STATIC_ID#" into the main tag like so:



This is called a substitution string. If the substitution string has to be added to the template for it to become included in the final rendered page.

3. Now, when the page renders, the substitution string is replaced by ... id="hello" and you can access the id using css and javascript as you do normally