Solved

Javascript to create drop down list in dynamic table

Posted on 2009-04-03
4
2,641 Views
Last Modified: 2012-06-27
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
Comment
Question by:someITguys
  • 2
  • 2
4 Comments
 
LVL 10

Expert Comment

by:cyberstalker
ID: 24066948
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
 

Author Comment

by:someITguys
ID: 24067515
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
 
LVL 10

Accepted Solution

by:
cyberstalker earned 500 total points
ID: 24067645
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
 

Author Comment

by:someITguys
ID: 24083069
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question