...

View Full Version : Problem hiding dynamically named DIVs



jayshadow
06-14-2007, 04:14 PM
First, here's the lowdown. I'm pulling information from a database and it's creating radio button selections in a form. Also, it's creating hidden divs, naming the div id as the id of the the entry. For example...

<div id="$entryid">

Now when a radio button is selected, it shows the div with expanded information about the entry selected. My problem is, when a new radio button is selected, I can't get it to hide the div thats already being displayed. Here is a snipit of the code I'm using...

The DIV Style:

<style type="text/css">
div {
position:absolute;
left: 506px;
top: 300px;
width: 300px;
overflow:none;
text-align: left;
word-wrap: break-word;
vertical-align: top;
display: none;
}
</style>

The Javascript:

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

The form buttons:

<input type="radio" name="entry" value="$entryid" onclick="setVisibility('$entryid', 'inline');setVisibility('??????','none');"> $entryname <br>


The DIV Creation:

<div id="$entryid">

Any ideas? Thank You!

abduraooft
06-14-2007, 04:18 PM
<div id="$entryid">



change it as

<div id="<? print $entryid; ?>">

jayshadow
06-14-2007, 04:20 PM
Well that is how it is, the id is in there fine, I just edited the code for posting in this forum so it would look cleaner.

glenngv
06-14-2007, 05:07 PM
var prevId;
function setVisibility(id, visibility) {
if (prevId){ //hide previously shown div
document.getElementById(prevId).style.display = "none";
}
document.getElementById(id).style.display = visibility;
prevId = id;
}

<input type="radio" name="entry" value="$entryid" onclick="setVisibility(this.value, 'block');" /> $entryname

jayshadow
06-14-2007, 05:37 PM
Thank you so much Glenn!

I've noticed one other problem, I'm not sure if it's because of the javascript...

Everything works fine in FF, however in IE, the very first radio button, when I select another radio button, never gets deselected, and if I select another button first, and then select the first radio button, that button doesn't cause the other button to deselect. There are a total of 19 buttons and all the rest are working properly and all 19 are created using the same code from above in the while statement.

Any ideas?

glenngv
06-14-2007, 05:58 PM
Post the related code.

jayshadow
06-14-2007, 06:06 PM
</script>

<style type="text/css">
div {
position:absolute;
left: 506px;
top: 300px;
width: 300px;
overflow:none;
text-align: left;
word-wrap: break-word;
vertical-align: top;
display: none;
}
</style>

<script language="JavaScript">
var prevId;
function setVisibility(id, visibility) {
if (prevId){ //hide previously shown div
document.getElementById(prevId).style.display = "none";
}
document.getElementById(id).style.display = visibility;
prevId = id;
}
</script>
</head>

<?


echo "<form name=\"purchase\" onSubmit=\"return checkform()\">";

$sql = "SELECT * FROM ipsr_cars ORDER BY make ASC";
$result = $db->sql_query($sql);

if (!$row = $db->sql_fetchrow($result)) {

echo "No Entried In Database";

}
else {

while ($row = $db->sql_fetchrow($result)) {

$carid = $row['carid'];
$year = $row['year'];
$make = $row['make'];
$model = $row['model'];


echo "<input type=\"radio\" name=\"carselect\" value=\"$carid\" onclick=\"setVisibility(this.value, 'block');\"> $year $make $model <br>";

?>

<div id="<? echo "$carid"; ?>">

<?
echo "</form></div>";
}

glenngv
06-14-2007, 06:45 PM
Post the generated code not the server-side code.

jayshadow
06-14-2007, 06:56 PM
Duh! Ok, after looking at the generated code I figured out the problem... thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum