使用ajax和pdo检索表行信息以在bootstrap模式中显示

时间:2015-02-27 21:25:57

标签: ajax pdo

我试图从一个由PDO数组填充到html表中的表中检索信息。当用户点击该行的“删除按钮”到我有删除确认的模式时,我想获取行信息。 我不知道如何去做,因为返回的信息来自数据库,而不是硬编码。

     <table class="table table-bordered table-hover" id="tab_logic">
                        <thead>
                            <tr >
                                    <th class="text-center">
                                    Course Code
                                </th>

                                <th class="text-center">
                                    Course Title
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($courses as $row) {
                            echo "<tr><td>";
                            echo $row['course_code'];
                            echo "</td><td>";
                            echo $row['course_title'];                              
                            echo "</td><td>";
                            echo '<p data-placement="top"
                                    data-toggle="tooltip"
                                    style="margin-left:18px"
                                    title="Delete">';
                            echo '<button class="btn btn-danger btn-xs" 
                                    data-title="Delete" 
                                    data-toggle="modal" 
                                    data-target="#delete">';
                            echo '<span class="glyphicon glyphicon-trash" />';
                            echo '</button></p>';
                            echo "</tr>"; }
                            ?>

这是模态的代码:

                                    <div id="delete" class="modal fade">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">Delete Record</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p class="text-danger"><small>Are you sure you would like to delete this record?</small></p>
                                            <p class="text-danger"><small>You will not be able to un-do this action</small></p>
                                            <div class="form-group">
                                                <input class="form-control " type="text" placeholder="Course Title">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button id="can" type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                                            <button id= "upd" type="submit" class="btn btn-danger">Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

我知道我需要AJAX动态地执行此操作。有没有人有任何解决方案的想法?感谢

1 个答案:

答案 0 :(得分:0)

这是解决方案。

http://getbootstrap.com/javascript/#modals-related-target

您应该在此处添加新的数据属性:

 '<button class="btn btn-danger btn-xs" 
 data-title="Delete" 
 data-index="yourItemIndex" <----- here
 data-toggle="modal" 
 data-target="#delete">';

你的脚本应该是这样的:

$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})

最好的问候。