单击链接时，无法将记录填充到引导模式

Cannot populate record to bootstrap modal when a link is clicked

本文关键字：填充 模式 记录 链接 单击      更新时间：2023-09-26

请我需要一些帮助，我一直在努力填充记录以在单击链接时引导模态，以便用户可以编辑和更新记录。链接不是形式上的，而是在表格中。以下是我的非工作代码：

该目录 

<div class="widget-content">
                        <form action="#" method="GET">
                            <table class="table table-striped table-bordered table-hover table-checkable datatable">
                                <thead>
                                    <tr>
                             <th class="checkbox-column">
                                            <input type="checkbox" class="uniform">
                                        </th>
                                        <th>Actions</th>
                                        <th>Code</th>
                                        <th>Full Name</th>
                                        <th>Company Name</th>
                                        <th>Business Location</th>
                                        <th>Telephone</th>
                                        <th>Credit Limit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                    $query="select * from customer_vendor";
                    $result = mysqli_query($link,$query);
                while($row = mysqli_fetch_array($result, MYSQL_ASSOC) ){
                    $firstname = $row['first_name'];
                    $lastname = $row['last_name'];
                    $fullname = $firstname.' '.$lastname;
                    $climit = number_format($row['credit_limit'],2);
                 echo
                            "<tr>
                                <td class='"checkbox-column'">
                                            <input type='"checkbox'" class='"uniform'" >
                                            <input type='"hidden'"  >
                                </td>
                                <td>
                                <ul class='"table-controls'">
                                                <li><a   class='"bs-tooltip'" id='"updateit'" name='"update_cv'" data-class='"{$row['customer_vendor_id']}'" data-toggle='"modal'" href='"#update_customer_vendor'"  title='"Edit'"><i class='"icon-pencil'"></i></a> </li>
                                                <li><a class='"bs-tooltip'" data-toggle='"modal'" href='"#delete_customer_vendor'" title='"Delete'"><i class='"icon-trash'"></i></a> </li>
                                </ul>
                                </td>
                                <td>{$row['customer_vendor_id']}</td>
                                <td>$fullname</td>
                                <td>{$row['company_name']}</td>
                                <td>{$row['business_location']}</td>
                                <td>{$row['telephone']}</td>
                                <td>$climit</td>                            
                            </tr>";
                        }
                        ?>
                                </tbody>
                            </table>
                            </form>
                            <a href="create_new_cust_vend.php"><button class="btn btn-primary"><i class="fa fa-plus"> New</i></button></a>
                        </div>

模态：

<div class="modal modal-wide fade" id="update_customer_vendor">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Updating customer - Vendor</h4>
            </div>
            <form action="#" method="POST">
                <div class="modal-body" id="update_modal">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" ><i class="fa fa-save"> Update</i></button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

脚本：

<script type="text/javascript">
    $(document).ready(function(){
        $("#updateit").click(function(){
            var studentClass =$("#updateit").val();
            $.ajax({
                type:"GET",
                url:"update_cust_vend.php",
                data:"updateit="+studentClass,
                success:function(data){
                    $("#update_modal").html(data);
                }
            });
        });
    });
</script>

尝试关注。 我认为这应该可以解决它。

<li><a   class='"bs-tooltip'" id='"updateit'" name='"update_cv'" data-class="studentclass" data-toggle='"modal'" href='"#update_customer_vendor'"  title='"Edit'"><i class='"icon-pencil'"></i></a> </li>

链接必须在某处包含学生类，它不是输入字段，因此不能使用 val（）。即上面的链接中的数据类="学生类"。

$(document).ready(function(){
    $("#updateit").on('click', function(e){
        e.preventDefault();
        var studentClass =$(this).data('class'); // get studentclass form link.
        $.ajax({
            type:"GET",
            url:"update_cust_vend.php",
            data:"updateit="+studentClass,
            success:function(data){
                $("#update_modal").html(data);
                $("#update_customer_vendor").modal();
            }
        });
    });
});

首先，将以下内容添加到您的点击事件中，以防止超链接的默认行为：

$("#updateit").click(function(event){
    event.preventDefault();
});

在那之后我很困惑，你在这里获取超链接的价值：

var studentClass =$("#updateit").val();

这不是一个错误吗？因为您的超链接没有值...

您可以将值存储在自定义属性中。为此，您必须使用 data- 前缀定义属性。所以例如data-value.

因此，您的超链接将是：

<li><a class='"bs-tooltip'" id='"updateit'" ... data-value="1"><i class='"icon-pencil'"></i></a></li>

要获取值，请使用：

var studentClass = $(this).attr('data-value');

其中$(this)是指您单击的超链接。

在填充 html 后的成功处理程序中，您不显示模态，添加以下内容：

$('#update_customer_vendor').modal('show');
相关文章：