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 [mcve] it's just a guess, but -> [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Andreas, Nov 02 '19 at 10:18
you are trying to add blade's `@foreach` into rendered HTML code. it won't work — Roman Meyer, Nov 02 '19 at 10:20
@RomanBobrik, Why it will not work? Data is coming correctly. — Mr. Perfectionist, Nov 02 '19 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, Nov 02 '19 at 10:37
If you see, the textboxes are getting the css styles. It is your dropdown where the 'form-control' class is missing. Please add the same to — Shan Nautiyal, Nov 02 '19 at 10:38
are you using any library for your dropdowns ? maybe re-initing the library after adding a new record fix the problem — Mohammad Olfatmiri, Nov 02 '19 at 13:13
I think you are using select2 library, please call `.select2()` after adding new row — Mohammad Olfatmiri, Nov 02 '19 at 13:14
It's simple, previous lines have JS applied which creates their own classes. So for you, you need to apply the JS to that new line — Thanh Trung, Nov 02 '19 at 13:25
@MohammadOlfatmiri, I have added ```$('.js-example-basic-single').select2();```. But not working!! — Mr. Perfectionist, Nov 02 '19 at 13:44
check this [Initialising select2 created dynamically](https://stackoverflow.com/questions/29972399/initialising-select2-created-dynamically) — Mohammad Olfatmiri, Nov 02 '19 at 13:54

Mark Schultheiss · Accepted Answer · 2019-11-04T12:24:00.820

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>

Thank you for your answer. But your remove button is not working. — Mr. Perfectionist, Nov 03 '19 at 11:00
@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 — Mark Schultheiss, Nov 04 '19 at 12:11

Why Dynamically added rows are not getting CSS Class?

1 Answers1