Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem hiding dynamically named DIVs

    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...
    Code:
    <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:
    Code:
    <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:
    Code:
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
    The form buttons:
    Code:
    <input type="radio" name="entry" value="$entryid" onclick="setVisibility('$entryid', 'inline');setVisibility('??????','none');"> $entryname <br>
    The DIV Creation:
    Code:
    <div id="$entryid">
    Any ideas? Thank You!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by jayshadow View Post
    Code:
    <div id="$entryid">
    change it as
    Code:
    <div id="<? print $entryid; ?>">
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    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;
    }
    Code:
    <input type="radio" name="entry" value="$entryid" onclick="setVisibility(this.value, 'block');" /> $entryname

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Post the related code.

  • #7
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    </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>";
    }

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Post the generated code not the server-side code.

  • #9
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Duh! Ok, after looking at the generated code I figured out the problem... thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •