• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2700
  • Last Modified:

Javascript to create drop down list in dynamic table

I have a table that I am creating dynamically through some javascript code, as seen below.   Notice lines 14-18 are commented out.  I want this cell to be a drop down list with data I can retrieve from another PHP file.  The php file below does create a single drop down box.  I can't figure out how to put these together.

I can hardcode the line
qtyType.innerHTML = "<select><option>Item1</option></select>";
in the javascript file to get a dropdown, but that's not really the way I want to go.


javascript functions
------------------------------------------
function appendRow()
{
 var tbody = document.getElementById("t1").getElementsByTagName("tbody")[0];
 var row = document.createElement("TR");
 var remove = document.createElement("TD");
 remove.innerHTML = "<img src='/testSite/ajax/images/trash.jpg' style='cursor:pointer;cursor:hand' alt='Remove Row' onclick='deleteCurrentRow(this)'/>";
 var salesOrder = document.createElement("TD");
 salesOrder.innerHTML = document.getElementById('textField').value;
 var qty = document.createElement("TD");
 qty.innerHTML = "2";
 var qtyType = document.createElement("TD");
 //
 //var qtyTypeDescArray = new Array();
 //qtyTypeDescArray = getQtyTypeDesc();
// qtyType.innerHTML = "<ref=phpFunctions.php>";
 //
 var wall = document.createElement("TD");
 wall.innerHTML = "4";
 var product = document.createElement("TD");
 product.innerHTML = "5";
 var lgth = document.createElement("TD");
 lgth.innerHTML = "6";
 var hand = document.createElement("TD");
 hand.innerHTML = "7";
 var csg = document.createElement("TD");
 csg.innerHTML = "8";
 var ship = document.createElement("TD");
 ship.innerHTML = "9";
 var customerName = document.createElement("TD");
 customerName.innerHTML = "10";
 var hot = document.createElement("TD");
 hot.innerHTML = "<input type='checkbox' style='cursor:pointer;cursor:pointer' value='hot'/>";
 row.appendChild(remove);
 row.appendChild(salesOrder);
 row.appendChild(qty);
 row.appendChild(qtyType);
 row.appendChild(wall);
 row.appendChild(product);
 row.appendChild(lgth);
 row.appendChild(hand);
 row.appendChild(csg);
 row.appendChild(ship);
 row.appendChild(customerName);
 row.appendChild(hot);
 tbody.appendChild(row);
}
 
php function
----------------------------------
<html>
<body>
<?php
  
    include 'config.php';
    include 'opendb.php';
    $result = mysql_query('SELECT `qtyTypeDesc` FROM `listqtytypes`',$conn);
    echo '<select>';
    $i=0;
    $optionString = '';
    while($row=mysql_fetch_assoc($result))
    {
      $optionString .= '<option>' . $row['qtyTypeDesc'] . '</option>';
    }
    echo $optionString;
    echo '</select>';
    mysql_free_result($result);
    include 'closeDB.php';
  
?>
</body>
</html>

Open in new window

0
someITguys
Asked:
someITguys
  • 2
  • 2
1 Solution
 
cyberstalkerCommented:
You can go about this in different ways.

1. Include your second PHP-file in the first and put the output in a global javascript variable that you can use in your appendRow() function. This is the easiest to implement and the fastest too.

2. Load the file with XMLHttpRequest when the document is loaded and cache that in a variable. The result is exactly the same as option one, only with a little more overhead.

3. Load the file with XMLHttpRequest when you add the row. You can either wait for the result to arrive before adding the row (will make it slow), or add the row with an empty <select> and fill it in when it comes back. The first one is slow (row will not be visible until the server responds).

The first and second option behave exactly the same. This is the best option to choose unless the select options change on the fly. Of these options the second one is more work without much benefit (except keeping the files separate).

The third option is for if the data is really 'live' and needs to be up-to-date to the second. Which way do you want to go?
0
 
someITguysAuthor Commented:
Thanks for the info.  I think I will be able to go with the first option for this case, but I may need the third option for my next step (filling the rest of the table).

On the php that makes the select drop down should it be a function that returns a string? ie- <option>something</option><option>somethingElse</option>

I am a little new at web development, so can you provide an example?  Right now I have three files.  My index.php which calls the javascript file (on key down) to create a table, and phpFunctions.php which has the sql query to create the drop down.

-note - I will try this Monday when I get to work.
0
 
cyberstalkerCommented:
If you are going to include the the phpFunctions.php in index.php and you want to use innerHTML, you can just make it echo it's output into a javascript variable.

Then require() phpFunctions.php in the head section of index.php.
<?php
  
    include 'config.php';
    include 'opendb.php';
    $optionString = "<select>";
    $result = mysql_query('SELECT `qtyTypeDesc` FROM `listqtytypes`',$conn);
    while($row=mysql_fetch_object($result))
    {
      $optionString .= "<option>{$row->qtyTypeDesc}</option>";
    }
    $optionString .= "</select>";
    echo "var QtyTypeDesc = '{$optionString}'";
    mysql_free_result($result);
    include 'closeDB.php';
  
?>

Open in new window

0
 
someITguysAuthor Commented:
After a better look...I need to go with option 3, but I have no idea how to do this.  I have never done any AJAX code.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now