CODEWITHSUNDEEP
javascriptjquery
bumbumpaw
bumbumpaw

Reputation: 2528

Select element options not appending on dynamically added row

why does appending values of select values in foo function dos not trigger when I click add row button?

  $(document).on("click", '.tdAdd', function () {
      //alert($(this).closest('tr').index());
      var newRow = $("<tr>");
      var cols = "";
      cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
      cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>';
      cols += '<td><input type="text" /></td>';
      cols += '<td><select class = "t">' + foo($(this).closest('tr').index() + 1) + '</select></td>';
      newRow.append(cols);
      newRow.insertAfter($(this).closest("tr"));
  });

see this FIDDLE for demo.

  function foo() {
      var select = $('.t')
          .append($("<option></option>")
          .attr("value", 'one')
          .text('One'));
      select = $('.t')
          .append($("<option></option>")
          .attr("value", 'two')
          .text('Two'));

  }

Upvotes: 0

Views: 80

Answers (3)

charlietfl
charlietfl

Reputation: 171690

Several problems, first of which is foo() doesn't return anything so you are trying to concatenate undefined into your string.

Next what you are doing inside foo() doesn't make sense since $('.t') is a collection of every element in the page with that class.

The following will clone the first select, set it's value to null and then return the html to be added into your string

  function foo(index) {
      var $select = $('.t:first').clone().val('');
      return $select.html(); // return the innerHtml of the select as string
  }

DEMO

To really simplify your whole addRow, you could clone a whole row , reset the values of the form controls and append that clone... all without needing any new strings

$(document).on("click", '.tdAdd', function () {
    var $currentRow = $(this).closest('tr');
    var $newRow = $currentRow.clone();
    $newRow.find(':input').val('');
    $currentRow.after($newRow);
})

Upvotes: 1

surajck
surajck

Reputation: 1175

You were appending the JQuery object. I have extracted the HTML and appended that. (see this answer):

function foo(index) {
    var select = $("<option></option>")
                 .attr("value", 'one')
                 .text('One')
                 .prop('outerHTML');
    return select;
}

I have updated the updated fiddle

http://jsfiddle.net/8r0rdcLf/7/

Upvotes: 1

Vijay
Vijay

Reputation: 3023

The problem is, you are trying to add the options to the next row of current 'tr' which would always been the next row available in DOM (the one which was originally next to the current row - Orange row). To add options in row you are preparing in code you have to first add it to DOM and then insert the options tag.

Minimal changes to your code :

 $(document).on("click", '.tdAdd', function () {
      //alert($(this).closest('tr').index());
      var newRow = $("<tr>");
      var cols = "";
      cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
      cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>';
      cols += '<td><input type="text" /></td>';
      cols += '<td><select class = "t"></select></td>';
      newRow.append(cols);
      newRow.insertAfter($(this).closest("tr"));
      foo($(this).closest('tr').index() + 1);//add options once the newly created 'select' is available in DOM
  });

Upvotes: 1

Related Questions