php and javascript question.

[yeshello54]

So I am confused on where to put things in my code to work right. I found a simple javascript tutorial to add a function so that i can hide and show my php tables. but when i put it all together i cant get it to work. It works fine displaying the table without the javascript added and adding the "<tr id="table"> line of code. I dont know if the javascript is in the wrong place or not.any help would be great.thanks

<?php
 
<script type="text/javascript">
function displayRow(){
var row = document.getElementById("table");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
 
}
</script>
$term = $_POST['term'];
if ($_POST){
$sql = mysql_query("select * from table where Name like '%$term%'");
 
echo "TABLE:";
echo "<table border='1'>
 
<tr id="table">
<th>Name</th>
</tr>";
while ($row = mysql_fetch_array($sql)){
echo"<tr>";
echo "<td>"  .$row['Name']. "</td>";
echo "</tr>";
}
echo "</table>";
 
 "<p><button onclick="displayRow()" >Show sd</button></p>";
 
?>

[Dormilich]

there is no such thing as

element.style.display = '';

(the display property always has a value)

further your php tags are out of place (I suppose it’s just a leftover)

[Frinavale]

Since you're hiding and showing table rows your display CSS should probably be "table-row". See the valid values you that you can set the display property to on w3c: CSS Display.

-Frinny

[yeshello54]

i still get nothing..is it a problem that i have my php code inside of my html brackets. because i can place the javascript code anywhere but the second I change <tr> to <tr id=" something"> it wont work.

[Frinavale]

Well it looks like your JavaScript is not right. This is what you have:

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

Notice that you have a variable "row' and that you are assigning it to the table. This is very confusing because the name of the variable does not match what it contains.

If you want to hide/show a specific row then you have to get the row by either looping through all of the rows in the table until you find the one that you' want, or by using the document.getElementById method to retrieve the row itself.

If you want to use the document.getElementById method then you will have to give each <tr> an id so that you can retrieve it (for example <tr id="theIdForRow1">)

What do you want to do exactly? Hide/show the table? Or hide/show a specific row?

-Frinny

[yeshello54]

i want to hide/show my whole table.. this is my code for my working table that displays fine when a search is preformed.

$term = $_POST['term'];
if ($_POST){
$sql = mysql_query("select * from sequence_data  where name like '%$term%'");
echo "SEQUENCE_DATA TABLE:";
echo "<table border='1'>
 
<tr>
<th>name</th>
</tr>";
 
while ($row = mysql_fetch_array($sql)){
echo"<tr>";
echo "<td>"  .$row['name']. "</td>";
echo "</tr>";
}
echo "</table>";
 
 

now i want to implement the javascript code to be able to have a button to click and have the table hide/show but i just cant get it to work

[Frinavale]

It's pretty simple really, just change the style as you were changing it...

Give the table an ID so that you can get a reference to the element in your JavaScript method that's executed when you click the button.

Once you have a reference to it set the display property of the table element to either "none" or "table":

<script type='text/javascript'>
 
var hideTable = true;
function HideDisplayTable(){
  var tableElement= document.getElementById('tableID');//where tableID is the ID of the table element
  if (tableElement)
  { //if the table element exists, then set the style property
    if(hideTable == true){
      //if we want to hide the table then setting the table element's
      //style to display:none...this will force the element not to display 
      tableElement.style.display = 'none';
 
      //next time we want to show the table so we need to set the
      //variable "hideTable" to false
      hideTable = false;
 
    }else{
      //In this case we want to show the table.
      //In order to do this we have to specify that the table's display style
      //is set to 'table' instead of 'none'. 
      tableElement.style.display = 'table';
 
      //next time we want to hide the table so we need to set the
      //variable "hideTable" to true
      hideTable = true;
    }//close check whether or not to hide the table
  }//close the check to see if the table element exists
}//close the function
</script>

See? It's pretty straightforward once you understand how to set the style of an element using JavaScript :)

Now all you have to do is call the function on the onclick event of the button.

-Frinny

[yeshello54]

thank you. yes i understand that a little bit more. so in my table that i have in my php code should i set the id this way??

echo "<tableborder ='1'>
echo "TABLE";
 
<tr id ="tableID">
<th>"table"</th>
 

becuase if i do it like above it wont work

[yeshello54]

and also does it make a difference that I have my php inside of my <body> brackets. this is my set up for my .php file

it goes

<html>
<body>
 
*this is where i placed my javascript code
 
<?php
 
*inside here i have my tables being echoed in a loop when a search is done.
 
 
?>
</body>
</html>
 

[Dormilich]

didn’t you say you want to hide the whole table?

[Samishii23]

Nope it doesn't matter if you have <?php ?> Tags inside the <body> tags. You can have as many <?php ?> tags are you want, where ever you want. On the user's end they'll never see any of them unless theres a problem on the server.

Ok I'm going to break down your original post, and give you some hints about how to code this stuff. I've seen a few errors you need to know about if the code from post #1 is exactly your code.

Problem 1:

<?php
<script type="text/javascript">

Do not have the ANY HTML tags enclosed within the <?php ?> tags. They will never run and will cause PHP errors.

Problem 2:

$sql = mysql_query("select * from table where Name like '%$term%'");

In my experience, its good practice, and sometimes nessecary to encase the names of the SQL tables, and rows within ' ' and ` ` like so...

$sql = mysql_query("SELECT * FROM `table` WHERE `Name` LIKE '%".$term."%'");

Although I admit I don't think I've seen the "LIKE" term used in SQL before... *shrug*

Suggestion 1:
Personally I always have all the Javascript <script> tags within the <head> tags at the top to declare functions. While it shouldn't be a problem to put them anywhere, its good practice, and makes the code more readable.

Suggestion 2:

echo "<table border='1'>
<tr id="table">

Since you want to Show and Hide the table, it would be a better idea to litterally hide the whole table but puting the ID in the <table> tag, and hiding that. Generally tables have alot of <tr> tags so you might end up hiding part of the table, and it might look weird after hiding.

Suggestion 3:

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

As pointed out above there is no blank setting for the display style. Its either "block" for on, and "none" for off. So, I would personally have the code like this:

<script type="text/javascript">
function displayRow() {
var dRow = document.getElementById("table").style;
if ( dRow.display == "block" ) { dRow.display == "none"; }
else { dRow.display == "block"; } </script>

Now. I noticed that you have multiple rows. I can suggestion some other code if you would like to hide each row. Good Luck.

[Dormilich]

As pointed out above there is no blank setting for the display style. Its either "block" for on, and "none" for off.

"block" is not the correct choice for tables, use "table" (as Frinny posted earlier)

**edit**
Further discussion about this can be found in the following thread:
http://bytes.com/topic/html-css/answ...-display-style

Although I admit I don't think I've seen the "LIKE" term used in SQL before... *shrug*

LIKE is a valid SQL operator, nothing wrong there.

[Frinavale]

thank you. yes i understand that a little bit more. so in my table that i have in my php code should i set the id this way??

echo "<tableborder ='1'>
echo "TABLE";
 
<tr id ="tableID">
<th>"table"</th>
 

becuase if i do it like above it wont work

I know it's a little hard when you're first learning web development but there are a couple of things that you should be aware of.

First of all, ID attributes of HTML elements are used to identify a particular HTML element. No two HTML elements can have the same ID or else your HTML will be invalid (your web page will still be displayed but it will not be valid HTML).

You can retrieve a reference to an HTML element in your JavaScript code. You can then use JavaScript to work with the HTML element (for example you can change the style of the element to hide or show it).

You use the JavaScript document.getElementById() method to retrieve a reference to the HTML element.

Say you have the following tables (note that each table and each row have a unique ID):

<table id="tableID">
  <tr id="row1"><td></td></tr>
  <tr id="row2"><td></td></tr>
</table>
 
<table id="2ndTableID">
  <tr id="2ndTableRow1"><td></td></tr>
  <tr id="2ndTableRow2"><td></td></tr>
</table>
 

When you use the document.getElementById("tableID") you will be returned a reference to the the table element that has the ID "tableID".

If you use document.getElementById("2ndTableID") then you will be returned
the table element that has the ID "2ndTableID".

If you use document.getElementById("row1") then you will be returned the table-row element that has the ID "row1"....

I think you get the point.

In your case you want to hide the Table not a Table-Row.
So, grab a reference to the table element...not the row element...

A table element is different from a table-row element. Likewise, a button element is different from a div element.

Each have particular properties that you can work with in JavaScript and each have particular styles that should be used to display them.

To display a table you should use the CSS style display:"table"....to display a table row you should use the CSS style display:"table-row".

Now, regarding PhP.

Actually, let's step back a bit....

HTML is a markup language that lets you describe what content should look like when it is displayed in a web browser. You create HTML elements that contain information. You can retrieve references to these elements in JavaScript and work with them in the web browser (client side)

PhP code is executed on the server.
It is not accessible client side (you probably already know this but a lot of people get confused by this).

You can use PhP code to generate HTML based on whatever you're doing on the server.

In your case, you need to retrieve things from a database. This can't be done client side, so you have to do it in your PhP code.

Now you've figured out how to retrieved the information from your database... you want to display it in your web page.

So what do you do?

You do exactly what you were doing: loop through the rows of data retrieved and generate HTML code that "marks up" how the data should be displayed in the browser.

Because PhP code is executed on the server, it doesn't matter where you put it within your HTML (so long as it's outputting HTML into in a valid place).

So it's perfectly valid to have:

<html>
<head></head>
<body>
 <?php echo "  <h1>Hello World</h1>" ?>
</body>

It is valid because the php code is executed on the server...the above php code just prints "<h1>Hello World</h1>". Now if you were to take a look at the source for the HTML page in the web browser you will see:

<html>
<head></head>
<body>
   <h1>Hello World</h1>
</body>

However, if you have:

 <?php echo "  <h1>Hello World</h1>" ?>
<html>
<head></head>
<body>
</body>

It would generate the following HTML:

  <h1>Hello World</h1>
<html>
<head></head>
<body>
</body>

Which is not valid because you cannot have an <h1> element above the <html> element...

So, you're doing things correctly.

I know it can be overwhelming when you have so many components to work with (HTML, JavaScript, php)...but they all work together to give you your end result.


-Frinny

[yeshello54]

Thanks Frinny for that great help. I will see what I can do from here.

[yeshello54]

Oh just thought of something...

document.getElementById("table");
 

does this code take multiple parameters so that I could do

var getelement = document.getElementByid("table1",table2","table3")
 

or will i have to set a new variable for each button i make to close each table. so will i need to do this

var getelement1=document.getElementByid("table1")
var getelement2=document.getElementByid("table2")
etc....
 

[Frinavale]

:) there is another method that will retrieve all HTML elements that match a specific HTML tag.

This method is called document.getElementsByTagName.

Or you could pass the ID of the table into the JavaScript function.
In that case your JavaScript function would take a parameter: tableID (which is a string containing the ID of the table that you want to hide or display)

For example your JavaScript method would have to be modified to:

 function HideDisplayTable(tableID){
  var tableElement= document.getElementById(tableID);
  //.......
} 

And your buttons would look like:

<button onclick="displayRow('table1');" >Show table1</button>
<button onclick="displayRow('table2');" >Show table2</button>

The thing is that you're going to have to figure out whether or not to display the particular table that the function is managing (just check if it's display style is 'none'...if so change it to 'table'...if not change it to 'none').

 function HideDisplayTable(tableID){
  var tableElement= document.getElementById(tableID);
  if(tableElement)
  { var hideTable = true;
    if(tableElement.style.display == 'none')
    { hideTable = false;}
  //.................
} 

:)

-Frinny

[Markus]

@yeshello54
The second way. If in doubt, check the documentation (MSDN, MDC - take your pick).