Need help with JavaScript

M

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

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).
 
M

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

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).
 
M

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...
 
E

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.
 
You must log in or register to reply here.
Top