Display foreach data in Jquery ui modal dialog

Question

I have a datatable with foreach data from database and want to add button to each row, which would open the Jquery ui modal, where user will be able to edit the data from row.

How can I display this foreach data in dialog for every row?

My table:

<tbody>
        @if($invoices)
            @foreach($invoices as $invoice)
                <tr>
                    <td>{{$invoice->invoice_number}}</td>
                    <td>{{$invoice->status}}</td>
                    <td>{{$invoice->created_at}}</td>
                    <td>{{$invoice->supplier_name}}</td>
                    <td>{{$invoice->delivery_date}}</td>
                    <td>{{$invoice->comment}}</td>
                    <td><a class="opener"><i class="fa fa-fw fa-edit"></i></a></td>

                </tr>
            @endforeach
        @endif
        </tbody>

HTML modal window, where should this data be:

<div id="dialog" class="dialog">
    <input id="name">
</div>

Jquery ui dialog script:

  $( ".opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
});

Answer 1

I guess what you are looking for is this (put it where your HTML is) - It checks whether the data array $invoices is empty or not - If not empty, it adds a <table> with each row <tr> where the elements <td> are in them with the $invoice information.

<?php   
    if(!empty($invoices)) {
        echo("<table>");
        foreach($invoices as $invoice) {
            echo("<tr>".
                    "<td>".$invoice->invoice_number."</td>".
                    "<td>".$invoice->status."</td>".
                    "<td>".$invoice->created_at."</td>".
                    "<td>".$invoice->supplier_name."</td>".
                    "<td>".$invoice->delivery_date."</td>".
                    "<td>".$invoice->comment."</td>".
                    "<td><a class='opener'><i class='fa fa-fw fa-edit'>open dialog</i></a></td>".
                "</tr>");
        }
        echo("</tr></table>");
    }
?>

Your modal window and jQuery looks just fine.

Answer 2

To display the data for the current row, you will need two things:

1) To get the values from the row.

2) To put those values in the dialog.

First set some classes to the td's you would want to show in the dialog, lets say they are the first 3. Also set an attribute which will store the name you would like to be in the input

<tr>
    <td class="data" data-name="inv_number">{{$invoice->invoice_number}}</td>
    <td class="data" data-name="inv_status" >{{$invoice->status}}</td>
    <td class="data" data-name="created_at">{{$invoice->created_at}}</td>
    <td>{{$invoice->supplier_name}}</td>
    <td>{{$invoice->delivery_date}}</td>
    <td>{{$invoice->comment}}</td>
    <td><a class="opener"><i class="fa fa-fw fa-edit"></i></a></td>
 </tr>

Then on click, find the row and store the values:

$( ".opener" ).click(function() {
  var values = {};
  $(this).closest('tr') //find the current row
    .find('.data') // find the td's
    .each(function(index, td) { // for each get and store the value
        var inputName = $(td).data('name'); //get the name
        var inputValue = $(td).text(); // get the text which the td holds
        values[inputName] = inputValue; // set the values
    });

  $( "#dialog" ).html(''); // clear the previously created inputs
  $( "#dialog" ).dialog( "open" );

Now create the inputs according to the stored values:

  $.each(values, function(name, value) {
      $( "#dialog" ).append('<input name="'+name+'" value="'+value+'" />');
  });


});