Skip to main content
September 13, 2007
Answered

Show Hide Inside a Repeat Region

  • September 13, 2007
  • 25 replies
  • 2043 views
I'm trying to apply a show-hide to a DIV that is inside a repeat region.

The problem is that only the first record of the repeat region seams to work properly, on all others theres no such think as hide show. Why?

here is the link:
http://www.cantinho.org/admin/cantinho/find_search_result.php

Hope someone can help me out here.


Thanks,


This topic has been closed for replies.
Correct answer
In the sound of Doors music: "The End".

Let's make a resume of all this:

OBJECTIVE OF THIS "BIG" POST:
Make a show/hide details button inside a repeat region, so when user click on that button the details of that specific record inside the repeat region appear and disapear. (toggle).

WHAT WAS NOT WORKING?


1)
PROBLEM:
The effect (in the effects menu of dreamweaver) despite the fact that we click on toggle option, he DON'T toggle at all.

SOLUTION:
There is know bug in Spry effects.js file. We need to update the .js file so the .js can toggle.
Get it here: http://www.cristic.ro/samples/SpryEffects.js
Thanks Marin.

2)
PROBLEM:
The effect only happens on the first record, nothing happens on the other!
SOLUTION:
Sugestion from Joris:
Apply a php counter.



3)PROBLEM:
The initial state of the "details div" is SHOW but we need them to be HIDE. (so the details show, only when user whats to see them).
SOLUTION MISSED:
Apply a CSS like this:
<style type="text/css">
<!--
#div_name<?php echo $counter; ?> { display: none; }
-->
</style>

Why? (don't know, maybe because we can't apply a dynamic div name inside a CSS or maybe because I don't know how to do it)

SOLUTION THAT WORK:
Suggested by Joris again:
Apply to eatch particular div that you want to hide (since we have a repeat region it will be only one)
and apply at that div the style="display:none" property.



THANKS A LOT!!!!! JORIS!!! REALLY!!!!
Thanks for your time, your patience and, your lessons. :)

25 replies

Correct answer
September 15, 2007
In the sound of Doors music: "The End".

Let's make a resume of all this:

OBJECTIVE OF THIS "BIG" POST:
Make a show/hide details button inside a repeat region, so when user click on that button the details of that specific record inside the repeat region appear and disapear. (toggle).

WHAT WAS NOT WORKING?


1)
PROBLEM:
The effect (in the effects menu of dreamweaver) despite the fact that we click on toggle option, he DON'T toggle at all.

SOLUTION:
There is know bug in Spry effects.js file. We need to update the .js file so the .js can toggle.
Get it here: http://www.cristic.ro/samples/SpryEffects.js
Thanks Marin.

2)
PROBLEM:
The effect only happens on the first record, nothing happens on the other!
SOLUTION:
Sugestion from Joris:
Apply a php counter.



3)PROBLEM:
The initial state of the "details div" is SHOW but we need them to be HIDE. (so the details show, only when user whats to see them).
SOLUTION MISSED:
Apply a CSS like this:
<style type="text/css">
<!--
#div_name<?php echo $counter; ?> { display: none; }
-->
</style>

Why? (don't know, maybe because we can't apply a dynamic div name inside a CSS or maybe because I don't know how to do it)

SOLUTION THAT WORK:
Suggested by Joris again:
Apply to eatch particular div that you want to hide (since we have a repeat region it will be only one)
and apply at that div the style="display:none" property.



THANKS A LOT!!!!! JORIS!!! REALLY!!!!
Thanks for your time, your patience and, your lessons. :)
September 15, 2007
The problem is exactly the "..."
What to put there? What div should he hide?


<div id="...." style="display:none;"></div>


I have tried this, and it haven't work:
<style type="text/css">
<!--
#'div_name<?php echo $counter; ?>' { display: none; }
-->
</style>


Here is the link


Thanks...


Inspiring
September 14, 2007
"oicram" <webforumsuser@macromedia.com> wrote in message
news:fcecqd$4i7$1@forums.macromedia.com...
> Ok. I have put the counter back to 0.
> And he starts hidding, but he only hides the first record.
> I think its normal because I said:
> <body onload="hidediv('div_name1');">
> I have tried this code hoping that he will do this for all divs:
> <body onload="hidediv('div_name<?php echo $counter; ?>');">
> But he does not do for any of them.
> How can we solve this?
> "And ... the first time the page is loaded (before submitting the form)
> there's no div's at all... "
>
> Yes they are, but are hidden. This means that they aren't ?
> If thats the case, how can we avoid the initial error?
>
> Thanks

Can't you just hide all your divs via CSS by default?
<div id="...." style="display:none;"></div>

September 14, 2007
Ok. I have put the counter back to 0.
And he starts hidding, but he only hides the first record.
I think its normal because I said:
<body onload="hidediv('div_name1');">

I have tried this code hoping that he will do this for all divs:
<body onload="hidediv('div_name<?php echo $counter; ?>');">

But he does not do for any of them.

How can we solve this?




"And ... the first time the page is loaded (before submitting the form)
there's no div's at all... "

Yes they are, but are hidden. This means that they aren't ?
If thats the case, how can we avoid the initial error?

Thanks
Inspiring
September 14, 2007
"oicram" <webforumsuser@macromedia.com> wrote in message
news:fceac5$1s8$1@forums.macromedia.com...
>I have done what you said but now he returns a error saying:
> Object Required in Line 11.
> And in line 11 I have this:
> document.getElementById(div_name).style.display="none";
>
> (no quotes like you said).


There is no div_name1 it starts at div_name2, I think you misinterpreted
Mick's reply to set the counter to 1 initially, however, you increment it by
1 BEFORE you reference it in the id atribute, so it starts at 2, move the
incrementation code to just before the end of the repeat region, or start at
0

And ... the first time the page is loaded (before submitting the form)
there's no div's at all...

September 14, 2007
I have done what you said but now he returns a error saying:
Object Required in Line 11.
And in line 11 I have this:
document.getElementById(div_name).style.display="none";

(no quotes like you said).
Inspiring
September 14, 2007


"oicram" <webforumsuser@macromedia.com> wrote in message
news:fce657$qdf$1@forums.macromedia.com...
> Joris:
> I'm working on:
> http://www.cantinho.org/admin/cantinho/find_search_result_v3.php
>
> and this page have no quotes has you have told be in later posts. ;)
>
> But the onload event don't trigger I don't know why.
>
> Mick
> Thanks for your commentaries
> I have made the $counter start at 1 but it does not work either.
>
>
> Thanks to both of you.


You need to enclose the name of the div in quotes when you call the function

onLoad="hidediv('div_name1');"

September 14, 2007
Joris:
I'm working on:
http://www.cantinho.org/admin/cantinho/find_search_result_v3.php

and this page have no quotes has you have told me in later posts. ;)

But the onload event don't trigger I don't know why.

Mick
Thanks for your commentaries
I have made the $counter start at 1 but it does not work either.


Thanks to both of you.
Inspiring
September 14, 2007
oicram wrote:

> I have tried hide the layers onload but I have a problem.
>
> If I do like this:
> <body onload='hidediv(div_name)'>
> or
> <body onload="hidediv(div_name)">
>
> The browser returns: "object div_name" indefined.
> I think he is right because I have no div called div_name because in my name
> of the div I have: div_name<?php echo $counter; ?>
>
> But if I do:
> <body onload="hidediv('div_name<?php echo $counter; ?>')">
> or
> <body onload="hidediv(div_name<?php echo $counter; ?>)">
>
> The browser returns:
> div_name0 undefined. And its also true, because on load I have no div_name
> called div_name0. And the first div_name that I will have after doing the
> submit will be div_name1, and more, that will be not "onload".
>
> How can we properly call the function on load?
>
>
> Thanks once and once and once again. If you are tired of my questions I must
> understand.
> When I first ask you this, I think for myself it should be something easy
> because is dreamweaver repeat regions with dreamweaver show/hide behaviors. But
> noooo... :S Hope you can have patience to all my questions.
>
>
>
>
Start $counter at 1
Mick
Inspiring
September 14, 2007
Joris van Lier wrote:


>>
>> Last question (I have two buttons to show and hide, how can I trogle
>> with only
>> one?)
>
>
> You'll have to test the objects current style and change it accordingly,
>
> <script type="text/javascript">
> <!--
> function toggleDiv(id) {
> var el = document.getElementById(id);
> //this if/else may look weird to you, google for "ternary operation"
> el.style.display=(el.style.display=="block") ? "none" : "block";
> }
> //-->
> </script>

<script type="text/javascript">
function toggleDiv(id) {
var el = document.getElementById(id);
//this if/else may look weird to you, google for "ternary operation"
el.style.display=(el.style.display=="block") ? "none" : "";
}
</script>
Settting display to "" makes the function available to all "id'd" elements.
And comments (<!-- //-->) within function definitions are not
recommended. It hides the definition from browsers that use the XHTML DTD

Mick