[SOLVED] need assistance with displaying row of MySQL data with JS

webguync · June 14, 2007

Hello,

I believe my issue here lies within the PHP/MySQL and not the JS. What I need is on this page http://www.carrentalsupport.com/bruce/Query.php#

if you click the more info link in the first row, a second row displays with more info...this is what I want, but it only works for the first row, and I need it to work for all entries.

here is my PHP/MySQL code

<?php
$connection = mysql_connect("localhost","username","password"); 

mysql_select_db ('dbname'); 



$sql = "SELECT f2,f3,phone,f8,f9,f10,f11,f12,f13,f15 FROM station ORDER BY f11 ASC" ;

$sql_resulta = mysql_query($sql,$connection)  or die('Query failed: ' . mysql_error());

//result set
$rs = mysql_query($sql);
$img= "<img src='icons/apo.gif' width='15' height='17' alt='airportindicator'>";
//creating the table w/ headers
     
     echo "<table id='display' cellpadding='0' cellspacing='0' align='center'><tr><td class='header'>Airport Indicator</td><td class='header'>State</td><td class='header'>Airport Code</td><td class='header'>Airport Name</td><td class='header' colspan='2'> </td></tr>";

    

    //row for each record
     while ($row = mysql_fetch_array($rs))
     
      {                 
                 echo"<tr id='trX'><td>
    $img
</td><td> $row[6] </td><td> $row[0]</td><td> $row[1] </td><td id='header'><a href='#' onClick='FuncShowHide()'> More Info.</a></td><td id='header'><a class='WHATSTHIS' onclick='selectLoc([0])' href='javascript:;'>Select this Location</a></td></tr>";
                 echo"<tr id='hideShow' style='display:none'><td><strong>Address:</strong> $row[3] </td><td><strong>Address:</strong>$row[4] </td><td><strong>City:</strong> $row[5] </td><td> $row[6]</td><td>$row[7] </td><td><strong>Phone:</strong> $row[2] </td></tr>";     
     }  

     echo "</table>";
   

//close the db
mysql_close();

      echo  "</body>";
      echo  "</html>";
?>

thanks for any assistance!

Corona4456 · June 14, 2007

Could you show the javascript? Looks like you are using Ajax for this. Thanks.

webguync · June 14, 2007

the JS is this:

function FuncShowHide(){

if (document.getElementById('hideShow').style.display == document.getElementById('trX').style.display){

document.getElementById('hideShow').style.display = "none";

} else {

document.getElementById('hideShow').style.display = document.getElementById('trX').style.display

}

</script>

so I have the id of "hideshow"set to my second row and this only works for the first entry in the table

here http://www.carrentalsupport.com/bruce/Query.php#,and not in the subsequent ones...

Corona4456 · June 14, 2007

Ah I see, document.getElementById returns the first element with the id 'trX'. You'll need to figure out a different method of uniquely identifying each row and passing in the unique id into your FuncShowHide() function.

My suggestion would be to use the row id from the MySQL table to identify each table row.

webguync · June 14, 2007

would you be able to provide a quick example? For instance, on each row in MySQL the column named f2 is a unique value for each row so I could use that.

How would I need to add that to the HTML and JS is what I need an example of...thx!

Corona4456 · June 14, 2007

Change the following line:

<?php
echo"<tr id='trX'><td>
    $img
</td><td> $row[6] </td><td> $row[0]</td><td> $row[1] </td><td id='header'><a href='#' onClick='FuncShowHide()'> More Info.</a></td><td id='header'><a class='WHATSTHIS' onclick='selectLoc([0])' href='javascript:;'>Select this Location</a></td></tr>";
                 echo"<tr id='hideShow' style='display:none'><td><strong>Address:</strong> $row[3] </td><td><strong>Address:</strong>$row[4] </td><td><strong>City:</strong> $row[5] </td><td> $row[6]</td><td>$row[7] </td><td><strong>Phone:</strong> $row[2] </td></tr>";     
     }  
?>

Just an FYI I didn't test this code so there may be some syntax errors or something like that.

to

<?php
echo"<tr id='". $row[0] . "'><td>
    $img
</td><td> $row[6] </td><td> $row[0]</td><td> $row[1] </td><td id='header'><a href='#' onClick='FuncShowHide(" . $row0 . ")'> More Info.</a></td><td id='header'><a class='WHATSTHIS' onclick='selectLoc([0])' href='javascript:;'>Select this Location</a></td></tr>";
                 echo"<tr id='hideShow' style='display:none'><td><strong>Address:</strong> $row[3] </td><td><strong>Address:</strong>$row[4] </td><td><strong>City:</strong> $row[5] </td><td> $row[6]</td><td>$row[7] </td><td><strong>Phone:</strong> $row[2] </td></tr>";     
     }  
?>

Then change your javascript to:

<script language="javascript" type="text/javascript">
   function FuncShowHide(row){
     
      if (document.getElementById('hideShow').style.display == document.getElementById(row).style.display){
         document.getElementById('hideShow').style.display = "none";
      } else {
         document.getElementById('hideShow').style.display = document.getElementById(row).style.display
      }
   }
   
</script>

webguync · June 14, 2007

hmmm., I get a JavaScript error, after trying that (http://www.carrentalsupport.com/bruce/Query.php#)

document.getElementById(row) has no properties

what am I still missing?

here is my current JS:

function FuncShowHide(row){

if (document.getElementById('hideShow').style.display == document.getElementById(row).style.display){

document.getElementById('hideShow').style.display = "none";

} else {

document.getElementById('hideShow').style.display = document.getElementById(row).style.display

}

</script>

and in the php

echo"<tr id='". $row[0] . "'><td>

Corona4456 · June 14, 2007

You never passed in the row[0] into your function... look over the code again and look at the change made to the function call FuncShowHide().

webguync · June 14, 2007

I now have in the PHP

          echo"<tr id='". $row[0] . "'><td>
    $img
</td><td> $row[6] </td><td> $row[0]</td><td> $row[1] </td><td id='header'><a href='#' onClick='FuncShowHide(" . $row0 . ")'> More Info.</a></td><td id='header'><a class='WHATSTHIS' onclick='selectLoc([0])' href='javascript:;'>Select this Location</a></td></tr>";
                 echo"<tr id='hideShow' style='display:none'><td><strong>Address:</strong> $row[3] </td><td><strong>Address:</strong>$row[4] </td><td><strong>City:</strong> $row[5] </td><td> $row[6]</td><td>$row[7] </td><td><strong>Phone:</strong> $row[2] </td></tr>";     
     }  

     echo "</table>";

anything else stand out ?

and still get the JS error? I also tried onClick='FuncShowHide(" . $row[0] . ")'>

webguync · June 14, 2007

I am still trying to get this to work, and have been playing around with different things.

question:

doesn't onClick='FuncShowHide(" . $row0 . ")'>

need to match up with function FuncShowHide(row){

in the JS? that syntax is confusing me..whether it s/b (row) or (row0) or (row[0]). I think I tried all 3!

Corona4456 · June 14, 2007

Yeah that's a typo it should be $row[0]

webguync · June 14, 2007

in the php the reference should be $row[0], but in the js it should just be (row) without the [0]?

Corona4456 · June 14, 2007

oh I see what you are confused about ... here... let's change it up:

<script language="javascript" type="text/javascript">
   function FuncShowHide(rowid){
     
      if (document.getElementById('hideShow').style.display == document.getElementById(rowid).style.display){
         document.getElementById('hideShow').style.display = "none";
      } else {
         document.getElementById('hideShow').style.display = document.getElementById(rowid).style.display
      }
   }
   
</script>

The PHP code for passing in the parameter should remain the same:

<?php echo ... onClick='FuncShowHide(" . $row[0] . ")'> ... ?>

webguync · June 14, 2007

so, it wouldn't litteraly be function FuncShowHide(rowid){

it would be whatever the value of the row ID is eg: function FuncShowHide(0){

??

Corona4456 · June 14, 2007

Err... no, the function definition is

function FuncShowHide(rowid) - where rowid is the parameter you pass in.

webguync · June 14, 2007

so, the parameter id using php/mysql would be [0]

in the JS it would be function FuncShowHide(0){

??

Corona4456 · June 14, 2007

<script language="javascript" type="text/javascript">
   function FuncShowHide(rowid){
     
      if (document.getElementById('hideShow').style.display == document.getElementById(rowid).style.display){
         document.getElementById('hideShow').style.display = "none";
      } else {
         document.getElementById('hideShow').style.display = document.getElementById(rowid).style.display
      }
   }
   
</script>

This is the code you need to have... copy and paste it exactly as written above

webguync · June 14, 2007

the error I get is:

document.getElementById(rowid) has no properties

Corona4456 · June 14, 2007

Well I took a closer look at your code and it's pretty buggy so here take this code:

Javascript:

<script language="JavaScript" type="text/javascript">
  function FuncShowHide(rowid){
  	row = document.getElementById(rowid);
  	if(row.style.display == "none"){
  		row.style.display = "table-row";
  	} else {
  		row.style.display = "none";
  	}
  }
</script>

<?php
$connection = mysql_connect("localhost","username","password"); 
mysql_select_db ('dbname'); 



$sql = "SELECT f2,f3,phone,f8,f9,f10,f11,f12,f13,f15 FROM station ORDER BY f11 ASC" ;

$sql_resulta = mysql_query($sql,$connection)  or die('Query failed: ' . mysql_error());

//result set
$rs = mysql_query($sql);
$img= "<img src='icons/apo.gif' width='15' height='17' alt='airportindicator'>";
//creating the table w/ headers
echo "<table id='display' cellpadding='0' cellspacing='0' align='center'><tr><td class='header'>Airport Indicator</td><td class='header'>State</td><td class='header'>Airport Code</td><td class='header'>Airport Name</td><td class='header' colspan='2'> </td></tr>";
//row for each record
while ($row = mysql_fetch_array($rs)) {                 
echo"<tr><td>$img</td><td> $row[6] </td><td> $row[0]</td><td> $row[1] </td><td id='header'><a href='#' onClick='FuncShowHide($row[0])'> More Info.</a></td><td id='header'><a class='WHATSTHIS' onclick='selectLoc([0])' href='javascript:;'>Select this Location</a></td></tr>\n";
echo"<tr id='$row[0]' style='display:none'><td><strong>Address:</strong> $row[3] </td><td><strong>Address:</strong>$row[4] </td><td><strong>City:</strong> $row[5] </td><td> $row[6]</td><td>$row[7] </td><td><strong>Phone:</strong> $row[2] </td></tr>\n";     
}
echo "</table>";

//close the db
mysql_close();
echo  "</body>";
echo  "</html>";
?>

Also, I'd suggest limiting the amount of results and add pagination... the page will load much faster.

so your $sql will be:

<?php
$sql = "SELECT f2,f3,phone,f8,f9,f10,f11,f12,f13,f15 FROM station ORDER BY f11 ASC LIMIT 0, 20" ;
?>

This is for testing purposes only though... later you can add code for pagination.

webguync · June 14, 2007

thanks for the assistance. I still get the js error..what did you alter? I couldn't see at 1st glance. I will look into the pagination.

Corona4456 · June 14, 2007

Ah I see the problem... I apologize ... since I don't have a way to test it, it's hard for me to see the error.

<?php
$connection = mysql_connect("localhost","username","password"); 
mysql_select_db ('dbname'); 



$sql = "SELECT f2,f3,phone,f8,f9,f10,f11,f12,f13,f15 FROM station ORDER BY f11 ASC" ;

$sql_resulta = mysql_query($sql,$connection)  or die('Query failed: ' . mysql_error());

//result set
$rs = mysql_query($sql);
$img= "<img src='icons/apo.gif' width='15' height='17' alt='airportindicator'>";
//creating the table w/ headers
echo "<table id='display' cellpadding='0' cellspacing='0' align='center'><tr><td class='header'>Airport Indicator</td><td class='header'>State</td><td class='header'>Airport Code</td><td class='header'>Airport Name</td><td class='header' colspan='2'> </td></tr>";
//row for each record
while ($row = mysql_fetch_array($rs)) {                 
echo"<tr><td>$img</td><td> $row[6] </td><td> $row[0]</td><td> $row[1] </td><td id='header'><a href='#' onClick=\"FuncShowHide('$row[0]')\"> More Info.</a></td><td id='header'><a class='WHATSTHIS' onclick='selectLoc([0])' href='javascript:;'>Select this Location</a></td></tr>\n";
echo"<tr id='$row[0]' style='display:none'><td><strong>Address:</strong> $row[3] </td><td><strong>Address:</strong>$row[4] </td><td><strong>City:</strong> $row[5] </td><td> $row[6]</td><td>$row[7] </td><td><strong>Phone:</strong> $row[2] </td></tr>\n";     
}
echo "</table>";

//close the db
mysql_close();
echo  "</body>";
echo  "</html>";
?>

webguync · June 15, 2007

the really good news, is that this works in firefox now, but in stupid old IE, I get a JS error (IE 7)

Could not get the display property, invalid argument. Line 7 char 11

that line is in the JS. This part: row.style.display = "table-row";

any ideas on why IE might be choking?

Corona4456 · June 15, 2007

that's because IE doesn't use getElementById() it uses document.all

So for cross compatibility between the two you can add this:

<script language="JavaScript" type="text/javascript">
  function FuncShowHide(rowid){
        if(document.getElementById){
          	row = document.getElementById(rowid);
        } else if(document.all) {
                row = document.all[rowid];
        }
  	if(row.style.display == "none"){
  		row.style.display = "table-row";
  	} else {
  		row.style.display = "none";
  	}
  }
</script>

Hope this helps.

webguync · June 15, 2007

that makes sense, but I still get the invalid argument error in IE

line 11 char 11 which looks like this line:

row.style.display = "table-row";

Corona4456 · June 15, 2007

Oops... sorry I was mistaken you can use getElementById() it was introduced in IE5 heh... anyway, this code should work, I tested it on both IE and FF and works as it should.

<script language="JavaScript" type="text/javascript">
  function FuncShowHide(rowid){
    row = document.getElementById(rowid);
    if(row.style.display == "none"){
  		row.style.display = "";
  	} else {
  		row.style.display = "none";
  	}
  }
</script>

I guess IE doesn't support the "table-row" display value.

Sign In

[SOLVED] need assistance with displaying row of MySQL data with JS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Important Information