Question

I can append html form elements to a table with jquery. How can I append menus populated with php/my sql query so that the php menu is between td and input… below??

<script type="text/javascript">
$(document).ready(function() {
      $("#link td input.rdelete").live("click", function () {
              $(".newrow").attr("disabled",false);
            var srow = $(this).parent().parent();
                        srow.remove();                  
            });
});


function AddNew() { 
           if($("#link tr").length > 12) {
              $(".newrow").attr("disabled",true);
           }
           var count = 0;
           count += 1;

        $("#link").append('<tr><td></td><td> <input type=\"button\" value = \"Delete\" class=\"rdelete\"/></td></tr>' );
           }
</script>

The php menu is:

<select name="sub_discipline" id="sub_discipline">
            <option>Select Sub-discipline...</option>
            <?php 
$query = mysql_query("SELECT * from sub_discipline ORDER BY sub_discipline_name ASC");
while ($row = mysql_fetch_assoc($query)){
?>
            <option value="<?php echo $row['sub_discipline_pk']; ?>"><?php echo $row['sub_discipline_name']; ?></option>
            <?php 
}
?>
          </select>

EDIT: Thanks to Explosion Pills I now have:

<script type="text/javascript">
$(document).ready(function() {
$("#jMenu").jMenu();
      $("#link td input.rdelete").live("click", function () {
              $(".newrow").attr("disabled",false);
            var srow = $(this).parent().parent();
                        srow.remove();                  
            });
});


    function AddNew() { 
               if($("#link tr").length > 12) {
                  $(".newrow").attr("disabled",true);
               }

    $.getJSON('../scripts/link_menu.php', function (json) {
       $("#links").empty();
       $.each(json, function () {
           $("#links").append(new Option(this.link_title));
       });
    }); 

            $("#link").append('<tr><td></td><td><select name="links[]" id="links"> </select><input type=\"button\" value = \"Delete\" class=\"rdelete\"/></td></tr>' );

    </script>

Problem is that only the first appended menu is being populated.

Answer 1

You need to disabuse yourself of the fact that PHP and JavaScript operate together. They are agnostic with respect to each other (i.e. they don’t know about each others’ existence, but they’re not willing to make an absolute claim that the other doesn’t exist).

You can create a simple PHP script that echoes the MySQL results as JSON.

$query = mysql_query("SELECT * from sub_discipline ORDER BY sub_discipline_name ASC");
$rows = array();
while ($row = mysql_fetch_assoc($query)){ $rows[] = $row; }
echo json_encode($rows);

Then, in your JavaScript:

$.getJSON('/agnostic-php-script.php', function (json) {
   $("#sub_discipline").empty();
   $.each(json, function () {
       $("#sub_discipline").append(new Option(this.subdiscipline_name));
   });
});

You should also stop using ext/mysql, and it’s better to not append in a loop if you can avoid it.