Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using <div> within a table structure

    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)

    PHP Code:
            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;

    PHP 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>"
            
            
    $track_number++;          
        }

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




    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

  • #2
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •