appending dynamic php menus using jquery

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.

Generally, you should add an api in your php app, then using XHR in javascript to get this menu and showing them. — Haocheng
– Haocheng, Commented Jan 31, 2013 at 4:07

Explosion Pills · Accepted Answer · 2013-01-31 04:17:33Z

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.

answered Jan 31, 2013 at 4:17

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

IlludiumPu36 Over a year ago

Hey thanks for this. This is now working but only for the first appended menu, subsequent menus appended are empty. Any ideas? See added code in original question (didn't know how else I could add this new block of code here...)

Explosion Pills Over a year ago

@user1911619 well, IDs have to be unique. Do you have more than one #sub_discipline?

IlludiumPu36 Over a year ago

I have change it to look for the class, rather than ID (I want users to add as many instances of the same menu as they need...) so, $.each(json, function () { $(".links").append(new Option(this.link_title)), however with each new instance, the preceding menus grow by one option, presumably through the $.each...

Explosion Pills Over a year ago

You can't use $(".links"), you have to use whatever the specific <select> element in question is and append to that (unless you actually do want to append to all of them)

IlludiumPu36 Over a year ago

Come to think of it, this may work better with just one multiple select list...rather than multiple instances of the same menu, in that case you answer fits perfectly!

Collectives™ on Stack Overflow

appending dynamic php menus using jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related