1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

hide/show script

Works in regular HTML but not in PHP

         

haywars

9:57 pm on Jun 16, 2010 (gmt 0)

10+ Year Member



I am terrible when it comes to single and double quoting so i know theres something off but cant tell where. I would like my Div to hide and display upon pressing a button. 


<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script src="ac_quicktime.js" language="JavaScript" type="text/javascript"></script>
</head>
<body>

<script language="JavaScript">
  function toggle(id) {
    var state = document.getElementById(id).style.display;
      if (state == 'block') {
        document.getElementById(id).style.display = 'none';
      } else {
        document.getElementById(id).style.display = 'block';
      }
    }
</script>


<?php
 mysql_connect("localhost", "root", "") or die(mysql_error());
 mysql_select_db("music") or die(mysql_error());
 $query = "SELECT * FROM tracks";
 $result = mysql_query($query) or die(mysql_error());

$cue_id = $_GET['cue'];

while($line = mysql_fetch_array($result))
{
if($cue_id == $line[1])
  {  
   $audioURL = $line[10];
   }
else
 {
 }
}
?>

<div id="hidden">
<OBJECT CLASSID='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' WIDTH='290' HEIGHT='20'
CODEBASE='http://www.apple.com/qtactivex/qtplugin.cab'>
<PARAM name='AUTOPLAY' VALUE='true'>
<PARAM name='CONTROLLER' VALUE='true'>
<EMBED src="<?php print $audioURL; ?>" WIDTH='290' HEIGHT='20'
AUTOPLAY='false' CONTROLLER='true'
PLUGINSPAGE='http://www.apple.com/quicktime/download/'>
</EMBED>
</OBJECT>
</div>



<table border="1" width="75%" cellpadding="2" cellspacing="2"> 
<tr> 
<td align="center">Cue Code</td> 
<td align="center">Cue Title</td> 
<td align="center">Cue Description</td> 
<td align="center">Time</td>
<td align="center"></td>
</tr> 
<br />

<?php
 mysql_connect("localhost", "root", "") or die(mysql_error());
 mysql_select_db("music") or die(mysql_error());
 $query = "SELECT * FROM tracks";
 $result = mysql_query($query) or die(mysql_error());

$cue_id = $_GET['cue'];

while($line = mysql_fetch_array($result))
{
echo "<td align='center'>".$line['cue_code']."</td>"; 
echo "<td align='center'>".$line['cue_title']."</td>"; 
echo "<td align='center'>".$line['cue_description']."</td>"; 
echo "<td align='center'>".$line['time']."</td>";
echo "<td align='center'><a href="."?cue=".$line ['cue_code']." onclick='toggle('hidden');'><img src='speaker_dark.gif' border=0></a>";
echo "</tr>";

 if($cue_id == $line[1])
  {  
   $audioURL = $line[10];
   }
else
 {
 }


}
?>
</table>

  

</body>
</html>

rocknbil

3:10 am on Jun 17, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It'd most likely because Javascript isn't "aware" of the display state of the div "hidden" at run time. It doesn't know what styles are set in style sheets, only what's inline in the document, **or** you have to explicitly set it via javascript.

A simple fix,

<div id="hidden" style="display:none">

Although I would use something else, like hidden-div, hidden is an input type and may conflict (or not . . just good practice not to.)

Speaking of which, use

<script type="text/javascript">

not

<script language="javascript">

One previous discussion [webmasterworld.com]

haywars

3:46 am on Jun 17, 2010 (gmt 0)

10+ Year Member



Hmm thanks for the reply I made some changes and took some additions from the linked forum but still not unhiding. I even took off display:none from my CSS. 

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script src="ac_quicktime.js" language="JavaScript" type="text/javascript"></script>
</head>
<body>

<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display: block; } 
</style> 

<script type="text/javascript"> 
window.onload=function(mydiv) { 
 if (document.getElementById('mydiv')) { 
 document.onclick=function() { unhide('mydiv'); }; 
 document.getElementById('mydiv').className=='unhidden'; 
 } 
}; 
function unhide(mydiv) { 
 if (document.getElementById('mydiv')) { 
 var item = document.getElementById('mydiv'); 
 item.className=(item.className=='hidden')?'unhidden':'hidden'; 
 } 
} 
</script> 


<?php
 mysql_connect("localhost", "root", "") or die(mysql_error());
 mysql_select_db("music") or die(mysql_error());
 $query = "SELECT * FROM tracks";
 $result = mysql_query($query) or die(mysql_error());

$cue_id = $_GET['cue'];

while($line = mysql_fetch_array($result))
{
if($cue_id == $line[1])
 { 
  $audioURL = $line[10];
  }
else
 {
 }
}
?>

<div id="mydiv" style="display:none">
<OBJECT CLASSID='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' WIDTH='290' HEIGHT='20'
CODEBASE='http://www.apple.com/qtactivex/qtplugin.cab'>
<PARAM name='AUTOPLAY' VALUE='true'>
<PARAM name='CONTROLLER' VALUE='true'>
<EMBED src="<?php print $audioURL; ?>" WIDTH='290' HEIGHT='20'
AUTOPLAY='false' CONTROLLER='true'
PLUGINSPAGE='http://www.apple.com/quicktime/download/'>
</EMBED>
</OBJECT>
</div>



<table border="1" width="100%" cellpadding="2" cellspacing="2"> 
<tr> 
<td align="left">Cue Code</td> 
<td align="left">Cue Title</td> 
<td align="left">Cue Description</td> 
<td align="left">Time</td>
<td align="left">>0<</td>
</tr> 
<br />

<?php
 mysql_connect("localhost", "root", "") or die(mysql_error());
 mysql_select_db("music") or die(mysql_error());
 $query = "SELECT * FROM tracks";
 $result = mysql_query($query) or die(mysql_error());

$cue_id = $_GET['cue'];

while($line = mysql_fetch_array($result))
{
echo "<td align='left'>".$line['cue_code']."</td>"; 
echo "<td align='left'>".$line['cue_title']."</td>"; 
echo "<td align='left'>".$line['cue_description']."</td>"; 
echo "<td align='left'>".$line['time']."</td>";
echo "<td align='left'><a href="."?cue=".$line ['cue_code']." onclick='toggle('mydiv');'><img src='speaker_dark.gif' border=0></a></td>";
echo "</tr>";

 if($cue_id == $line[1])
 { 
  $audioURL = $line[10];
  }
else
 {
 }


}
?>
</table>

 

</body>
</html>

haywars

3:46 am on Jun 17, 2010 (gmt 0)

10+ Year Member



Hmm thanks for the reply I made some changes and took some additions from the linked forum but still not unhiding. I even took off display:none from my CSS. 

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script src="ac_quicktime.js" language="JavaScript" type="text/javascript"></script>
</head>
<body>

<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display: block; } 
</style> 

<script type="text/javascript"> 
window.onload=function(mydiv) { 
 if (document.getElementById('mydiv')) { 
 document.onclick=function() { unhide('mydiv'); }; 
 document.getElementById('mydiv').className=='unhidden'; 
 } 
}; 
function unhide(mydiv) { 
 if (document.getElementById('mydiv')) { 
 var item = document.getElementById('mydiv'); 
 item.className=(item.className=='hidden')?'unhidden':'hidden'; 
 } 
} 
</script> 


<?php
 mysql_connect("localhost", "root", "") or die(mysql_error());
 mysql_select_db("music") or die(mysql_error());
 $query = "SELECT * FROM tracks";
 $result = mysql_query($query) or die(mysql_error());

$cue_id = $_GET['cue'];

while($line = mysql_fetch_array($result))
{
if($cue_id == $line[1])
 { 
  $audioURL = $line[10];
  }
else
 {
 }
}
?>

<div id="mydiv" style="display:none">
<OBJECT CLASSID='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' WIDTH='290' HEIGHT='20'
CODEBASE='http://www.apple.com/qtactivex/qtplugin.cab'>
<PARAM name='AUTOPLAY' VALUE='true'>
<PARAM name='CONTROLLER' VALUE='true'>
<EMBED src="<?php print $audioURL; ?>" WIDTH='290' HEIGHT='20'
AUTOPLAY='false' CONTROLLER='true'
PLUGINSPAGE='http://www.apple.com/quicktime/download/'>
</EMBED>
</OBJECT>
</div>



<table border="1" width="100%" cellpadding="2" cellspacing="2"> 
<tr> 
<td align="left">Cue Code</td> 
<td align="left">Cue Title</td> 
<td align="left">Cue Description</td> 
<td align="left">Time</td>
<td align="left">>0<</td>
</tr> 
<br />

<?php
 mysql_connect("localhost", "root", "") or die(mysql_error());
 mysql_select_db("music") or die(mysql_error());
 $query = "SELECT * FROM tracks";
 $result = mysql_query($query) or die(mysql_error());

$cue_id = $_GET['cue'];

while($line = mysql_fetch_array($result))
{
echo "<td align='left'>".$line['cue_code']."</td>"; 
echo "<td align='left'>".$line['cue_title']."</td>"; 
echo "<td align='left'>".$line['cue_description']."</td>"; 
echo "<td align='left'>".$line['time']."</td>";
echo "<td align='left'><a href="."?cue=".$line ['cue_code']." onclick='toggle('mydiv');'><img src='speaker_dark.gif' border=0></a></td>";
echo "</tr>";

 if($cue_id == $line[1])
 { 
  $audioURL = $line[10];
  }
else
 {
 }


}
?>
</table>

 

</body>
</html>

daveVk

4:30 am on Jun 17, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Think style and script should be in head section ?

haywars

4:45 am on Jun 17, 2010 (gmt 0)

10+ Year Member



Sorry for double posting...moved it to head still nothing...i think this "."?cue=".$line ['cue_code']." is messing with it...

rocknbil

7:28 pm on Jun 17, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think you're moving awy from the solution, not toward it. You still have the action as "toggle()" but have removed the toggle function; you have defined classes, but have not applied the class to the target (and don't need to do this anyway,) your new functions operate on className and there's no className in the element. With your latest code posted, follow the below STEP BY STEP and see what happens.

First, you want to return false for the link so clicking the link doesn't cause the browser to navigate. Change the following line like so. You can copy and paste.

echo '<td align="center"><a href="."?cue=' . $line['cue_code'] . ' onclick="return toggle(\'mydiv\');"><img src="speaker_dark.gif" border="0"></a></td>';

I've changed the quoting "a little bit" but it will work.

Now **REMOVE** the CSS here.
<style type="text/css">
.hidden { display: none; }
.unhidden { display: block; }
</style>

Take that out completely. Now change your Javascript like so. Just replace the entire javascript block in your latest post. 


<script type="text/javascript"> 
function toggle(id) { 
 if (document.getElementById(id)) { 
 var obj = document.getElementById(id); 
 obj.style.display=(obj.style.display == 'block')?'none':'block'; 
 } 
 else { alert('object not found'); } 
 return false; 
} 
</script>


Leave mydiv alone. Don't change it, leave it as it is:

<div id="mydiv" style="display:none">

Test it, there's no way this can't work. :-) If it doesn't open the Error Console in FireFox, tell us what the error is, I am notorious for typos.

To explain what's going on: when you call toggle,

onclick="return toggle('mydiv');"

you are passing a string "mydiv" to the function.

(USE THE CODE POSTED with the escapes, onclick="return toggle(\'mydiv\');", for your PHP or the PHP will error. Your OUTPUT from the PHP script will look like the preceding line.)

The function accepts the string as the variable "id."

function toggle(id) {

We check to make sure the object exists in the document.

if (document.getElementById(id)) {

Store a reference to the object in the variable obj so our code is shorter.

obj = document.getElementById(id);

Set the style with the next line. This is called a short circuit evaluation and is the same thing as an "if/else" on one line. If the condition inside () is true, do what's before the colon, otherwise, do what's after the colon.

obj.style.display=(obj.style.display == 'block')?'none':'block';

If the object doesn't exist in the document, we throw an alert.

else { alert('object not found'); }

When it's working, you can remove that entire "else" line.

Since we have left the div "mydiv" alone and it's set inline to display:none, JS will recognize it's display state and set it to block. Then the function

return false;

returns false to the browser so it doesn't navigate.

This has to work. I can't see any way it won't. :-P

haywars

2:10 am on Jun 18, 2010 (gmt 0)

10+ Year Member



Great it works but screws up the PHP that selects certain tracks...hmmm this is difficult

rocknbil

5:38 pm on Jun 18, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The PHP or the output from PHP? Does it cause a PHP error or is the page just messed up?

If it's the latter, view source of the page, select all and copy it, paste it in a blank file, test.html. validate test.html [validator.w3.org]. I don't see any immediate problems, but that doesn't mean there aren't any.

haywars

1:34 am on Jun 19, 2010 (gmt 0)

10+ Year Member



Sorry I wasnt more specific. I have a selector that checks the database for the name of the track and selects the audiolocation according to the name. The Javascript line stops the "."?cue=".$line ['cue_code']." from selecting the name of the track.

Usually when you select a speaker a sample would pop up to play the track but now the audio player pops up but cant find the track

[edited by: tedster at 4:00 am (utc) on Jun 24, 2010]
[edit reason] no personal links, please [/edit]

rocknbil

10:13 pm on Jun 19, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ahh . . . OK, well when I had you add return false, this stops the action of the anchor. It's a weird way to work because href="." or href="#" won't go anywhere, but may scroll to the top of the page. The best way might be to move any cue=$val into the toggle function, but a quick fix: remove return false. Like this.


echo '<td align="center"><a href="."?cue=' . $line['cue_code'] . ' onclick="toggle(\'mydiv\');"><img src="speaker_dark.gif" border="0"></a></td>';

and comment out return false in the function. Like this.

// return false;

haywars

11:45 pm on Jun 19, 2010 (gmt 0)

10+ Year Member



Okay I made the edits and now upon clicking it kicks back to the index page.

[edited by: tedster at 4:02 am (utc) on Jun 24, 2010]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026