asked on

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

cyberstalker

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?

someITguys

ASKER

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.

ASKER CERTIFIED SOLUTION

cyberstalker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

someITguys

ASKER

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.