Cannot retrieve details from database for dropdown menu by php and ajax

Question

I created two dropdown which is filled with data fetched from mysql database by using the ajax and php function, Second dropdown is dependent on the first one and show relevant data. I placed both dropdown in adjacent to one another in table cell format. I dynamically add row by using javascript, dropdown elements fetched well but I cannot fetch relevant option to dropdown which is adjacent of it.

 <HTML>
  <HEAD>
  <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
  <script src="js/jquery.min.js"></script>
<script src="js/add_table.js"></script>
<script src="js/jquery.autocomplete.js"></script>
<script src="js/jquery.min.js"></script>
  <SCRIPT language="javascript">
  var xmlhttp;
function ajaxFunction(url,myReadyStateFunc)
{
   if (window.XMLHttpRequest)
   {
      // For IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
   }
   else
   {
      // For IE5, IE6
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange= myReadyStateFunc;        // myReadyStateFunc = function
   xmlhttp.open("GET",url,true);
   xmlhttp.send();
}
function getdgl(x)
{
    // in second argument of ajaxFunction we are passing whole function.
   // Goto getCity.php code
   ajaxFunction("getdgl.php?did="+x, function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
              var d = xmlhttp.responseText;
              d=d.split("|");
              did = d[0].split(",");
              dval = d[1].split(",");
              //rowCount = el.find('#dds').html();

             //dt1 = document.getElementsByName("dgld[]");
             //window.alert(rowCount);
             dt = document.getElementsByClassName('dgld')[0];

             dt.innerHTML=dval.join()
             dt.length=0 
             for(i=0;i<did.length-1;i++)
            {

                   dt[i] = new Option(dval,did[i])
                   //dval = dval[i].join(" ");

            }

        }


    });
}
  function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
      //alert(newcell.childNodes);
      switch(newcell.childNodes[0].type) {
        case "text":
          newcell.childNodes[0].value = "";
          newcell.childNodes[0].id = "input" + rowCount ;
          break;
        case "checkbox":
          newcell.childNodes[0].checked = false;
          newcell.childNodes[0].id = "checkbox" + rowCount ;      
          break;
        case "select-one":
          newcell.childNodes[0].selectedIndex = 0;
          newcell.childNodes[0].I = "select"  ;
          //dt = document.getElementsByClassName('dgld')[i];
          break;
     }
   }
 }

  </SCRIPT>
 </HEAD>
 <BODY>
 <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 <div id = "dds">
    <TABLE id="dataTable" width="350px" border="1">
    <tr><td><select name="dgl" class="dgl" onchange="getdgl(this.value)">
                <option value="-1">Select Datagroup</option>
                 <?php
                       $link = mysql_connect("localhost","root","AMITYADMIN");
                       $dbSelected = mysql_select_db('cosmic_d');
                       $dgl1 = mysql_query("SELECT * FROM datagrp_l");
                       while($row = mysql_fetch_assoc($dgl1))
                      {
                               echo '<option value="'.$row['dgl'].'">'.$row['Cri'].'</option>';
                       }
                  ?>
               </select>
    </td>
    <td><select name="dgld" class="dgld">
                  <option value="-1">Select dd</option>
                 </select></td>
               </tr>
   </TABLE>
</div>
 </BODY>
</HTML>

Answer 1

I used this tutorial for doing this. Works a treat!

http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/

Cannot retrieve details from database for dropdown menu by php and ajax

Question

1 answers

solution1
0 2014-02-02 11:55:19

Cannot retrieve details from database for dropdown menu by php and ajax

Question

1 answers

solution1 0 2014-02-02 11:55:19

solution1
0 2014-02-02 11:55:19