Bootstrap модальный не отображается при нажатии на кнопку обновления с помощью jquery

Question

Я использую jquery для обновления данных с помощью модема начальной загрузки, он не показывает модальный режим. Я не знаю, почему

Это мой код для модального

<div id="updateModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>    

            <div class="modal-body">
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter name" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="email" name="email" placeholder="Enter email" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="mob" name="mob" placeholder="Enter Mobile" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="city" name="city" placeholder="Enter City" />
                    </div>

                <a href="#" id="save" class="btn btn-success pull-right">Update</a>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>

Этоjquery code:

    $(document).ready(function(){
       $(document).on('click','a[data-role=update]',function(){
          var id = $(this).data(id);
           var name = $('#'+id).children('td[data-target=name]').text();
           var email = $('#'+id).children('td[data-target=email]').text();
           var mob = $('#'+id).children('td[data-target=mob]').text();
           var city = $('#'+id).children('td[data-target=city]').text();

           $('#name').val(name);
           $('#email').val(email);
           $('#mob').val(mob);
           $('#city').val(city);
           $('#updateModal').modal('toggle');
       });
    });

И вот код для обновления списка людей:

<div class="table">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Sr. No.</th>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>City</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
            <?php while($row = mysqli_fetch_array($query)): $count++;?>
            <tr id="<?php echo $row['id'];?>">
                <td><?php echo $count;?></td>
                <td data-target="name"><?php echo $row['name'];?></td>
                <td data-target="email"><?php echo $row['email'];?></td>
                <td data-target="mob"><?php echo $row['mob'];?></td>
                <td data-target="city"><?php echo $row['city'];?></td>
                <td><a href="#" class="btn btn-success btn-sm" data-role="update" data-id="<?php echo $row['id'];?>">Update</a></td>
            </tr>
            <?php endwhile;?>
        </tbody>

    </table>
</div>

Записывая это, я ожидаю, что модал должен всплыть и отобразить информациюв полях ввода, но пока я нажимаю кнопку обновления, модальное окно не всплывает.

Любая помощь приветствуется.

Answer 1

В коде jQuery,

var id = $(this).attr('data-id');
console.log(id); // test the data-id in console

Answer 2

В вашем скрипте есть ошибка. Вы только что пропустили цитату

пожалуйста, замените строку ниже

var id = $(this).data('id');