Solved

Javascript to create drop down list in dynamic table

Posted on 2009-04-03
4
2,657 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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

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…
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

713 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