Отображение данных foreach в модальном диалоговом окне Jquery ui

Question

У меня есть дата-данные с данными foreach из базы данных, и я хочу добавить кнопку в каждую строку, которая откроет модальное окно Jquery ui, где пользователь сможет редактировать данные из строки.

Как я могуотобразить эти данные foreach в диалоговом окне для каждой строки?

Моя таблица:

<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, где должны быть эти данные:

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

Jquery UI сценарий диалога:

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

Answer 1

Чтобы отобразить данные для текущей строки, вам понадобятся две вещи:

1) Чтобы получить значения из строки.

2) Поместить эти значения в диалоговое окно.

Сначала установите некоторые классы для тд, которые вы хотели бы показать в диалоге, скажем, они первые 3. Также установите атрибут, который будет хранить имя, которое вы хотели бы видеть на входе

<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>

Затем нажмите, найдите строку и сохраните значения:

$( ".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" );

Теперь создайте входные данные в соответствии с сохраненными значениями:

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


});

Answer 2

Я предполагаю, что вы ищете это (укажите, где находится ваш HTML) - Он проверяет, является ли массив данных $invoices пустым или нет - Если не пуст, он добавляет <table> с каждой строкой <tr> где элементы <td> находятся в них с информацией $invoice.

<?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>");
    }
?>

Ваше модальное окно и jQuery выглядят просто отлично.