как открыть диалог в codeigniter?

Question

Я использую codeigniter для своего проекта. Я не очень знаком с ajax.У меня есть список пользователей в табличном формате. Для каждой строки есть кнопка для просмотра сведений о каждом пользователе.При нажатии на кнопку, я хочу диалог, показывающий все детали пользователя в табличном формате.Кто-нибудь может показать мне с кодом, как это можно сделать?Мой код выглядит так:

<button class="btn btn-default btn-rounded btn-sm product_detail"   id="<?=$record->serviceId;?>"  data-toggle="tooltip" title="View Product" >
        <span class="fa fa-eye"></span>
</button>

<div class="modal fade" id="header-modal" aria-hidden="true"></div>

    <script>    
            $('body').delegate('.product_detail', 'click', function() {
               var serviceId = $(this).attr('serviceId');
               $.ajax({
                type: "POST",
                url: "<?= base_url();?>service/popup",
                data: {serviceId: serviceId},
                dataType: "json",
                success: function(data) {
                                $("#header-modal").html("<div class='modal-dialog modal-lg'>"+
                                                "<div class='modal-content'>" +
                                                        "<div class='modal-header'>" +
                                                                "<button type='' class='close' data-dismiss='modal' aria-hidden='true'><i class='icons-office-52'>Close</i></button>" +
                                                                "<h4 class='modal-title'><strong>Product Detail</strong></h4>" +
                                                        "</div>" +
                                                        "<div class='modal-body' id='modal_body'>" +

                                                        "</div>" +
                                                        "<div class='modal-footer'> " +
                                                             "<button type='button' class='btn btn-danger  btn-embossed bnt-square' data-dismiss='modal'>Cancle</button>" +
                                                        "</div>" +
                                                "</div>"+
                                        "</div>"
                                    );
                                    $('#header-modal').modal('show');
                }
            });

            });
    </script>

код контроллера:

    public function popup()
        {
            $serviceId = $this->input->post('serviceId');
            $data['serviceInfo'] = $this->product->getServiceById($serviceId);

            echo json_encode($data);
        }

Я также включил файлы js и css, на мой взгляд.

Answer 1

Секция Html -

<table>
        <thead>
            <tr>
                <th>
                    Product Id
                </th>
                <th>
                    Product Name
                </th>
                <th>
                    Product Description
                </th>
                <th>
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="prod_id">1</td>
                <td class="prod_name">Apple</td>
                <td class="prod_desc">Frout</td>
                <td><button type="button" class="viewBtn">View</button></td>
            </tr>
            <tr>
                <td class="prod_id">2</td>
                <td class="prod_name">Orange</td>
                <td class="prod_desc">Frout</td>
                <td><button type="button" class="viewBtn">View</button></td>
            </tr>
        </tbody>
    </table>
    <div class="modal fade" id="header-modal" aria-hidden="true">
        <div class='modal-dialog modal-lg'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='' class='close' data-dismiss='modal' aria-hidden='true'><i class='icons-office-52'>Close</i></button>
                    <h4 class='modal-title'><strong>Product Detail</strong></h4>
                </div>
                <div class='modal-body' id='modal_body'>
                    Product Id : <span class="modal_prod_id"></span><br/>
                    Product Name : <span class="modal_prod_name"></span><br/>
                    Product Desc : <span class="modal_prod_desc"></span><br/>
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-danger  btn-embossed bnt-square' data-dismiss='modal'>Cancle</button>
                </div>
            </div>
        </div>
    </div>

Секция скрипта -

<script>
        $(document).ready(function() {

            $('.viewBtn').click(function(event) {
                /* Act on the event */
                var cur = $(this);
                var id = cur.closest('.prod_id').text();
                var name = cur.closest('.prod_name').text();
                var desc = cur.closest('.prod_desc').text();
                $('.modal_prod_id').text(id);
                $('.modal_prod_name').text(name);
                $('.modal_prod_desc').text(desc);
                $('#header-modal').modal('show');
            });
        });
    </script>

Answer 2

Просто попробуйте открыть модальное окно при нажатии кнопки и функции onclick, чтобы получить все данные о пользователе, которого вы хотите показать в модальном режиме.

<button type="button" class="btn btn-default btn-rounded btn-sm product_detail" data-target="#editPermission" data-toggle="modal" onclick="yourfunction('pass id here')">
        <span class="fa fa-eye"></span>
</button>

data-target для вашего модального идентификатора, в onclick вызовите вашу функцию.