Display data from DB in dynamically generated select box

[Ravi_Ramsagar]

I have the code that dynamically generates textboxes and select boxes upon a button click. I want to fetch the data from DB and display in the dynamically generated select box. 

 

Fiddle http://jsfiddle.net/hEByw/10/ shows how the text and selectboxes are generated dynamically.

 

Jquery code

var counter = 1;
$(document).ready(function () {

           $("#addButton").click(function () {

            if(counter>7){
                alert("Only 7 textboxes allow");
                return false;
                }   
               
               //To Display the tax types from DB
                  $(function(){
                        var items="";
                        $.getJSON("get_tax_type.php",function(data){
                        $.each(data,function(index,item) 
                       {
                        items+="<option value='"+item.id+"'>"+item.name+"</option>";
                       });
                         $("#tax_type' + counter + '").html(items); 
                     });
                    });

        var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<label>Product #'+ counter + ' : </label>' +
	      '<input type="text" size="60" name="product[]"\n\
              id="product' + counter + '" value="" >      \n\
              <label>Quantity #'+ counter + ' : </label>' +
	      '<input type="text" size="2" name="qty[]" \n\
              id="qty' + counter + '" value="" >      \n\
              <label>Rate #'+ counter + ' : </label>' +
	      '<input type="text" size="2" name="rates[]"\n\
              id="rates' + counter + '" value="" >      \n\
              <label>Tax #'+ counter + ' : </label>' +
	      '<select id="tax_type' + counter + '" ></select>    \n\
              <label>Tax% #'+ counter + ' : </label>' +
              '<select id="tax_type' + counter + '" ></select>    \n\
                <label>Total #'+ counter + ' : </label>' +
	      '<input type="text" size="3" name="total[]" id="total' + counter + '" value="" onchange="calculate();"> ');


          newTextBoxDiv.appendTo("#TextBoxesGroup");
          counter++;   
        });

$("#removeButton").click(function () {
        if(counter==0){
        alert("No more textbox to remove");
        return false;
        }   

        counter--;

        $("#TextBoxDiv" + counter).remove();
        });
});

HTML Code

<table>
     <tr>
      <td><strong>Select the products</strong>
           <input type='button' value='Add Products' id='addButton'>
           <input type='button' value='Remove Products' id='removeButton'>                       
       </td>
      </tr>
  </table>
  <table>
    <tr>
      <td>
         <div id='TextBoxesGroup'>   
            </div>
      </td>
     </tr>
      <tr>
        <td>
           <input type="hidden" id="countervalue" name="countervalue" style="display:none;">
        </td>
      </tr>
      </table>

PHP Code

<?php
include('includes/db.php');
$q = "select TaxID, TaxName from tax";
$sql = mysql_query($q);
$data = array();
while($row = mysql_fetch_array($sql, true)){
    $data[] = $row; 
};
echo json_encode($data);
?>

I have tried the following part of code to fetch the data from DB and Put into dynamically generated select box but its not working for me.

//To Display the tax types from DB
                  $(function(){
                        var items="";
                        $.getJSON("get_tax_type.php",function(data){
                        $.each(data,function(index,item) 
                       {
                        items+="<option value='"+item.id+"'>"+item.name+"</option>";
                       });
                         $("#tax_type' + counter + '").html(items); 
                     });
                    });

Can any one suggest where am I going wrong or the correct way of doing it. I am new to jquery. Any help is appreciated.Thanks in advance.

 

[Ravi_Ramsagar]

Updated code to Display tax types in select box

 

I tried the below code. I can see the json encoded data returned from PHP file in firebug but the returned values are not visible under select box.

$(function(){
$.getJSON("get_tax_type.php", function(data) {
                alert(data);
                $.each(data, function(index, item) {
                $("#tax_type" + counter + parseInt(index) + parseInt(1)).empty();
                $("#tax_type" + counter + parseInt(index) + parseInt(1)).append("<option value='" + item.TaxID+ "'>" + item.TaxName+ "</option>");
            });

        }, 'json');
    });