Laravel for each with jquery

Question

I'm working on Laravel 5.6 and in my controller I am pulling some data from an api which I am storing in a variable and passing it to the view. $orders is the variable.

In my view I have this block of code.

@foreach($orders as $order)
                                  <tbody>
                                      <tr>
                                          <td>{{ \Carbon\Carbon::parse($order->created_at)->format('m/d/Y') }}</td>
                                          <td>{{ $order->order_number }}</td>
                                          <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="printing" value="0" /></td>
                                          <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="engraving1" value="0" /></td>
                                          <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="engraving2"  value="0" /></td>
                                          <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="assembly"  value="0" /></td>
                                          <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="completed"  value="0" /></td>
                                          <td><button class="btn btn-info btn-fill btn-sm"><a href="orders/{{ $order->id }}" style="color: #FFFFFF">Details</a></button></td>
                                      </tr>
                                      <tr>
                                  </tbody>
                                  @endforeach

The above is a foreach loop that goes through each order and posts it in my view... There are 200 results... Easy enough. However below it using Jquery I need to store the details into a database and run some more actions. To test out how it interacts with Jquery I've done the following code.

          $(document).on('change', '#printing', function() {
              console.log({{ $order->order_number }});
          });

The problem I'm having is that $order->order_number is only the first number that is loaded when the foreach loop starts. So in the example this console.log would be 37311. My question is how would I be able to make this jquery call:

 $(document).on('change', '#printing', function() {
              console.log({{ $order->order_number }});
          });

I had also tried this making each id unique:

id="printing{{ $order->order_number }}".

Then in jquery ('#printing{{ $order->order_number }}') however that did not solve it. equal to each order number in the for each?

You are repeating ids in your markup. That is invalid html. Change them to be unique, or change them to be classes instead. — Taplar, Apr 25 '18 at 22:23
Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Apr 25 '18 at 22:23
@Taplar I had tried this before id="printing{{ $order->order_number }}". Then in jquery ('#printing{{ $order->order_number }}') however that did not solve it. I had tried that earlier. — FabricioG, Apr 25 '18 at 22:28

Giacomo Penuti · Accepted Answer · 2018-04-26T08:04:47.457

I hope to have understood the question properly. Here is what i would have done:

Use your iterator to store $order->order_number into a data attribute on that checkbox input
Use a class for printing checkbox
Use jQuery to bind that actions

Here are code modification to suite those edits

//edited jquery event binding to class and logging data-ordernumber
$(document).on('change', '.printing', function() {
  console.log($(this).data("ordernumber"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
@foreach($orders as $order)
<tbody>
  <tr>
    <td>{{ \Carbon\Carbon::parse($order->created_at)->format('m/d/Y') }}</td>
    <td>{{ $order->order_number }}</td>
    <td><input type="checkbox" data-toggle="switch" data-ordernumber="{{ $order->order_number }}" class="ct-primary printing" id="printing" value="0" /></td>
    <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="engraving1" value="0" /></td>
    <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="engraving2" value="0" /></td>
    <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="assembly" value="0" /></td>
    <td><input type="checkbox" data-toggle="switch" class="ct-primary" id="completed" value="0" /></td>
    <td><button class="btn btn-info btn-fill btn-sm"><a href="orders/{{ $order->id }}" style="color: #FFFFFF">Details</a></button></td>
  </tr>
  <tr>
</tbody>
@endforeach

Obviously php variables are not processed but i think a live example can be usefull anyway.

the above recommendation does not work. On change doesn't log anything to the console. No error given either. — FabricioG, Apr 25 '18 at 23:26
In fiddle it does work. That means something else is affecting it in your production code. Please can you provide en example of the output of that view with my edits?I think we should examine also other js running on that page. If you are using blade template, make sure that html comment is converted to blade comment. — Giacomo Penuti, Apr 26 '18 at 06:51

Laravel for each with jquery

1 Answers1