Why Dynamically added rows are not getting CSS Class?

Question

I am adding dynamic row using jQuery.

Elements are coming perfectly but is not working as expected.

While I am selecting one select-option it is giving it's corresponding values. But in dynamic row it is not giving.

And also not getting CSS class also.

My jQuery Code:

$(".btn-add").click(function(){
    var markup = 
        "<tr>"+
            "<td>"+
                "<select class='js-example-basic-single' name='product_id[]'"+
                    "<option value='0'>Select Product</option>"+
                    "@foreach($products as $product)"+
                    "<option value='{{ $product->id }}'>{{ $product->productName }}</option>"+
                    "@endforeach>"+
                "</select>"+
            "</td>"+
            "<td>"+
                "<input class='form-control' type='text' name='itemDescription'/>"+
            "</td>"+
            "<td>"+
                "<input type='text' class='form-control' name='itemCost[]'/>"+
            "</td>"+
            "<td>"+
                "<input type='text' class='form-control' name='itemQuantity[]'/>"+
            "</td>"+
            "<td>"+
                "<button class='btn btn-danger btn-remove'>-</button>"+
            "</td>"+
        "</tr>";

    $("table tbody").append(markup);
});

Without a minimal reproducible example it's just a guess, but -> Event binding on dynamically created elements? — Andreas
– Andreas, Commented Nov 2, 2019 at 10:18
you are trying to add blade's @foreach into rendered HTML code. it won't work — Roman Meyer
– Roman Meyer, Commented Nov 2, 2019 at 10:20
@RomanBobrik, Why it will not work? Data is coming correctly. — Mr. Perfectionist
– Mr. Perfectionist, Commented Nov 2, 2019 at 10:31
because blade rendered once you have got your view from server side. then you are trying to execute blade shortcut on the client side. but all you will get here - @foreach as a string in your markup — Roman Meyer
– Roman Meyer, Commented Nov 2, 2019 at 10:37

Mark Schultheiss · Accepted Answer · 2019-11-04 12:24:00Z

1

I don't know much about your CSS because you did not post it. I don't know anything about how you attach the select2 for the same reason but you could simply add it using an event you can trigger, this is the best I could do without more information but it should give you something to work with.

$("table.my-table").on('select-added', function(e) {
    $(this).find('.js-example-basic-single').select2();
  }).on('click', '.btn-remove',
  function(event) {
    let item = {
      rowid: "someIDtoDelete"
    };
    // wild assumption on desire here
    $(this).closest('tr').remove();
    //now what else? assume something server side
    $.ajax({
      url: "removeRowURL",
      type: "POST",
      data: item
    }).done(function(data, textStatus, jqXHR) {
      alert(textStatus);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      alert(textStatus);
    });

    $(".btn-add").on('click', function() {
      var markup =
        "<tr><td>" +
        "<select class='js-example-basic-single' name='product_id[]'" +
        "<option value='0'>Select Product</option>" +
        "@foreach($products as $product)" +
        "<option value='{{ $product->id }}'>{{ $product->productName }}</option>" +
        "@endforeach>" +
        "</select></td>" +
        "<td><input class='form-control' type='text' name='itemDescription'/></td>" +
        "<td><input type='text' class='form-control' name='itemCost[]'/></td>" +
        "<td><input type='text' class='form-control' name='itemQuantity[]'/></td>" +
        "<td><button class='btn btn-danger btn-remove'>-</button></td>" +
        "</tr>";

      let tb = $("table.my-table").find("tbody");
      tb.append(markup);
      tb.find('tr').last().trigger('select-added');
    });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.min.js" integrity="sha256-vdvhzhuTbMnLjFRpvffXpAW9APHVEMhWbpeQ7qRrhoE=" crossorigin="anonymous"></script>
<table class="my-table">
  <tbody></tbody>
</table>
<button class="btn-add">Add</button>

edited Nov 4, 2019 at 12:24

answered Nov 2, 2019 at 14:37

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

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

2 Comments

Mr. Perfectionist Over a year ago

Thank you for your answer. But your remove button is not working.

Mark Schultheiss Over a year ago

@Mr.Perfectionist To be clear, that was not part of the question and your original code had nothing regarding that button either. That is a simple issue to resolve by just adding an event handler to the table targeting the button class

Collectives™ on Stack Overflow

Why Dynamically added rows are not getting CSS Class?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related