Need help with JavaScript

micahraney56

New Member
Messages
44
Reaction score
0
Points
0
Can someone please tell me what's wrong with my code?
I'm beginning PHP and MySQL and I'm trying to take my information (about a soldier in the example) that already exists and put it in a table. I also want to get it so I can add more.

Code:
<head>
...
<script type="text/javascript">
function changeText(){
    document.getElementById("PHPHere").innerHTML = '<tr><td><? echo"$id";?></td><td><? echo"$LastName, $FirstName";?></td><td><? echo"$Specialty";?></td><td><? echo"$Rank";?></td></tr>';
}
</script>
</head>
<body onload="changeText();">  
  
  <BR /><BR />
<table border="1" name="table">
  <tr>
    <td>#</td>
    <td>Last Name, First Name</td>
    <td>Specialty</td>
    <td>Rank</td>
  </tr>
  <div id="PHPHere">


  </div>
</table>

I know my echo statements work because I viewed the source on my page. What happens is that the text that I want to appear in the table appears above it with no formatting. I can't figure out why JavaScript won't

A) put my text inside the DIV tag and
B) put my text in a table
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
Part of the problem is the HTML. Strictly speaking, you can't put a div into a table like that. You can put a div into a table cell, but you can't put only part of a table (a set of rows, for instance) into a div in a table.

In this case, you are using an ordinary table row as your table header, then trying to dynamically add rows. You can simplify that a whole bunch by using a real table header, then filling in the table body:

HTML:
<table id="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Last Name, First Name</th>
      <th>Specialty</th>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody id="PHPHere">
  </tbody>
</table>

I'm going to assume that this is a "dry run" for something that's going to be a bit more dynamic later (it makes no sense to use JavaScript to fill in the table on a page this way when you can directly write to the table at the server). You may find it works better all around if you use DOM methods to create a table row, create cells and their content, append the cells to the row, then append the row to the table -- if you do it that way, you can use JSON for the data transport layer so the information comes in as name:"value" pairs rather than sending an HTML-formatted document fragment. That will make it much easier to reuse the data in other ways (like in a pop-up details panel, for instance).
 

micahraney56

New Member
Messages
44
Reaction score
0
Points
0
Thanks for the quick reply. You're correct in assuming I want to make this more dynamic later. I've never seen these <tbody> and <thead> tags before. You mentioned that I could write to the table at the server, How might I accomplish that? Were you talking about the SQL table or the one on the page?

Thanks again!
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
I meant the one on the page as it stands now. I figured there was eventually going to be some Ajaxy deliciousness going on (but you never really know, I guess -- I've seen people do a lot of weird things with code over the years, and I'm pretty sure that I earned at least some of my baldness in programming forums).
 

micahraney56

New Member
Messages
44
Reaction score
0
Points
0
I decided to just drop JavaScript and do it in PHP since I tried it and it doesn't have any problems. Thanks for the advice!

Once I get it done I'll post it here...
 

ellescuba27

Member
Messages
273
Reaction score
3
Points
18
I am curious to know what your goal is here. But from what I can tell from the code above, you are trying to create a horizantal table instead of the typical vertical one. That being the case, you could try writing to a tr tag instead of a div. I know that yo have decided to drop Javascript and go with PHP, but this may help you in the future. I haven't tested, but maybe something like:
HTML:
<table border="1" name="table">
  <tr>
    <td>#</td>
    <td>Last Name, First Name</td>
    <td>Specialty</td>
    <td>Rank</td>
  </tr>
  <tr id="PHPHere">
<td>Loading... If you are still reading this, there may be an error</td>
  </tr>
</table>
And change your script to:
HTML:
<script type="text/javascript">
function changeText(){
    document.getElementById("PHPHere").innerHTML = '<td><? echo"$id";?></td><td><? echo"$LastName, $FirstName";?></td><td><? echo"$Specialty";?></td><td><? echo"$Rank";?></td>';
}
</script>
And the rest is the same as before. This makes it so that you can use proper HTML and now browsers will render it correctly.
 
Top