really wierd problem injecting into a table

[severndigital]

ok the basic problem is that my information is not displaying correctly. I will do my best to explain.

 

i have a few things going on here.

 

1. XMLHttpRequestObject (working fine, I am using it on several other pages within the same site.)

2. PHP script with my code that is doing the work.

3. the Javascript function on my textfield.

 

here's the situation, I am making a search of sorts. Nothing crazy they only need to search for a specific number. right now the text field for searching is set up in this fashion.

 

<input name="dealercode" type="text" id="dealercode" size="10" maxlength="11" onChange="this.value=this.value.toUpperCase();" onBlur="getData('lib/dealerSearch.php?dealercode='+ getElementById('dealercode').value,'displayDealers')"/>

 

it gets forced to all caps an then gets pushed through the ajax function getData. This sends the dealer code to the PHP script and also defines the id of the area that is to be updated. in this case 'displayDealers'

 

This all works fine. the only problem is that it does not display correctly.

 

in my html script is  the following

 

<table width="100%" border="0" cellspacing="0">
          <tr>
            <td class="tableHeader">Dealer Code</td>
            <td class="tableHeader">Dealer Name</td>
            <td class="tableHeader">Contact Name</td>
            <td class="tableHeader">Type</td>
            <td class="tableHeader">Options</td>
            </tr>
<span id="displayDealers">			
 
</span>  
      </table>

 

the span area is where the updated will be added. the information that is updated is in the PHP script in a while loop that looks like this

 

<?
$dealercode = strtoupper($_GET['dealercode']);


$sql = "SELECT dealerid,dealercode,dealertype,company,fname,lname FROM dealers ORDER BY dealercode ASC";

$pull = mysql_query($sql)or die(mysql_error());
$counter = 1;
while($r = mysql_fetch_array($pull)){
//first set class	
		$divit = $counter / 2;
			$decit = explode(".",number_format($divit,2));
		if($decit[1] != 0){
			$setclass = 'tableRowClass2';
		}else{
			$setclass = 'tableRowClass1';	
		}
//set dealer type
	$dealercode = $r['dealercode'];	
	$dealertype = setDealerType($dealercode);					

//now echo dbEntry
echo '
<!-- Display Dealers -->
<tr>
  <td class="' . $setclass . '">' . $r['dealercode'] . '</td>
      <td class="' . $setclass . '">' . $r['company'] . '</td>
      <td class="' . $setclass . '">' . $r['fname'] . ' ' . $r['lname'] . '</td>
  <td class="' . $setclass . '">' . $dealertype . '</td>
      <td class="' . $setclass . '"><a href="?view=dealers&method=edit&mode=2&id=' .$r['dealerid'] . '-' . $dealercode . '">edit</a> | <a href="?view=dealers&method=edit&mode=3&id=' .$r['dealerid'] . '-' . $dealercode . '">remove</a></td>
</tr>	
<!-- END DISPLAY DEALERS -->
';

//add one to counter
$counter = $counter + 1;
}//close while loop

 

at first glance the results look like this.

 

 

obviously it's wrong and the information should be showing up underneath the heading, not above them. if i run the exact same code just as a function in php everything works fine.

 

for example if i would take out the <span></span> tags and put something like <?PHP $showthem = pullDealers(); ?>

it works perfect.

 

It only messes up when I incorporate Ajax.

 

Any ideas??

 

thanks,

chris

 

***** EDIT *****

I was able to deal with the problem by echoing the entire table from within the php script. It works, but I would still like to under stand how to it this way.

 

thanks,

C

 

 

[deadimp]

The reason it's inserted before your table header is because your <span> tag is just floating around in your <table>. You can't exactly have it like that, since your DOM renderer doesn't know where to put in respect to the rows.

Problem with altering rows in a table is, IE's a bitch. Plain and simple. By that, I mean if you try and alter a row's contents via innerHTML (which could involve adding a new row) IE will throw it's hands up and lob out an 'Unknown runtime error'. Now, this isn't a problem if your target audience is people with standards-compliant browsers, but that's highly unlikely.

I've made my own simple Ajax-enabled table (which right now only changes rows, I haven't gotten around to adding new ones, though that won't be too much of challenge in Firefox), and used this concept and ignored IE. That isn't good though, since I'm excluding some people. One solution I'm thinking about right now is splitting the data up into their respective columns (since I've started using JSON encoding, thank God) and using JavaScript DOM control to sprinkle in/alter the data. Fun stuff.

[mainewoods]

Your problem is that you are violating correctly formed code.  A table is a block level item and a span is an inline item.  A block level item is not allowed inside an inline item and will not render on many browsers.  You need to change the span to a div.

 

<span>
<div>this code is not allowed because a block level item is nested in an inline item</div>
</span>