View Full Version : Using <div> within a table structure

08-28-2006, 08:35 PM
Hi there,

I am trying to use AJAX to dynamically change the contents of a table. The first thing to be displayed in the table is a drop-down box allowing the user to select how many text-field boxes they want to appear. Once they click on a value from this drop-down box, i use AJAX to run a php function in the background that returns a number of text fields (dependant on the value the user selected).

This is the code for the 'first-run', (ie where the drop down box option is shown)

if($rows_returned==0) {
echo "<tr><div id='cd_$int'>";
echo "<td colspan='4'>There are no tracks saved in the database for this CD, please select the number of tracks you would like to create";

echo "<br /><br /><select name='num_tracks' onchange=\"do_get(this.value, $int);\">";
for ($track=0; $track<=25 ; $track++) {
echo '<OPTION value="'.$track.'"';
echo '>'.$track.'</OPTION>'."\r\n";
echo "</select>";

echo "<br /><br /></td></div></tr>";

Now, the onchange function is where the ajax comes into play. The following code is designed to replace the original code;

function outputDefinedTextFields($tracks) {
$track_number = 1;
$string = "";

while($track_number <= $tracks) {
//$string .="<tr>";
$string .="<td style='width:65px;'>$track_number</td>";
$string .="<td style='width:300px;'><input type='text' name='artist_".$track_number."' style='width:96%;'/></td>";
$string .="<td style='width:335px;'><input type='text' name='track_".$track_number."' style='width:96%;' /></td>";
$string .="<td style='width:100px;'><input type='text' name='duration_".$track_number."' style='width:88px;' /></td>";
$string .="</tr>";


$string .="<tr>";
$string .="<td colspan='4'><input type='reset' name='clear_form' value='Reset details'
/><input type='button' name='submit_new_listings' value='Save Tracks' onclick='javascript:get(this.form);'/></td>";
$string .="</form>";

return $string;

The output from the above function gets put where the <div> tag is located in the original code (with the id cd_$int). The problem I am having is that the result returned from the 'ajax query' is not being placed inside the div, rather outside of the whole table itself.

Below are two photos; the first is the look of the page when it first loads, and the second is the [incorrect] output when the user selects a value from the drop down box (in this case the value chosen was 3).

http://img180.imageshack.us/img180/8677/pic1lj1.th.png (http://img180.imageshack.us/my.php?image=pic1lj1.png)
http://img180.imageshack.us/img180/2852/pic2wm3.th.png (http://img180.imageshack.us/my.php?image=pic2wm3.png)

If anyone knows how to solve the issue, so that the text fields are placed inside their relevant table, i would be very grateful! :)

Many thanks in advance

08-29-2006, 04:26 AM
I managed to sort out the problem by changing my code around and going for a different approach.

Still dunno why what I had doesnt work tho lol