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

Javascript 单击链接时无法将记录填充到引导模式,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,请我需要一些帮助,我一直在努力工作,以填充记录引导模式时,点击一个链接,以便用户可以编辑和更新记录。链接不是表单,而是在表中。 以下是我的非工作代码: HTML文件 <div class="widget-content"> <form action="#" method="GET"> <table class="table table-striped table-

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

HTML文件

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

行动
代码
全名
公司名称
营业地点
电话
信用额度

首先,将以下内容添加到单击事件中,以防止超链接的默认行为:

$("#updateit").click(function(event){
    event.preventDefault();
});
在这之后,我感到困惑,您在这里获取超链接的值:

var studentClass =$("#updateit").val();
这不是一个错误吗?因为你的超链接没有值

可以在自定义属性中存储值。为此,必须使用
数据-
前缀定义属性。例如
数据值

因此,您的超链接将是:

<li><a class=\"bs-tooltip\" id=\"updateit\" ... data-value="1"><i class=\"icon-pencil\"></i></a></li>
其中,
$(此)
指的是您单击的超链接

在填充html后的成功处理程序中,不显示模式,添加以下内容:

$('#update_customer_vendor').modal('show');

试试下面的。我想这应该能解决问题

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

链接标签属性中的所有斜线是怎么回事?您遇到的确切问题是什么?当您试图将该值分配给studentClass时,是否未看到该值?我已经看到了在DOM之外呈现模式窗口的一些问题。因此jquery选择器不会看到它。您是否尝试过使用firebug或chrome dev工具在JS上设置断点,以查看实际值是什么,或者您是否可以在DOM中看到它?您希望在
studentClass
中看到什么样的值,它是某个Id还是…?是的,它是来自数据库的Id如果您像上面介绍的那样更新代码,你能检查一下你的
update\u cust\u vend.php
是否得到这个id吗?当我回显它时,它没有得到id,如果你回显静态测试,它能工作吗?为了查看ajax调用本身是否工作,我不能直接测试代码。所以刚才在JSFIDLE中进行了演示。示例:现在我可以在控制台上看到在运行数据类时传递给它的值,但现在的问题是如何将该值传递给update_cust_vend.phpy您已经在这行“data:”updateit=“+studentClass]”中传递了updateit值。。现在您只需要在php中获取该值,即$class=$\u get['updateit'];然后执行任务并打印结果,即echo$result。现在它可以回显到modal,但它只选择表中的第一个ID。其余部分不会删除id=\'updateit\'并将该id添加到类中,即class=\'bs tooltip updateit\'。然后将$(“.updateit”)替换为$(.updateit”)
var studentClass = $(this).attr('data-value');
$('#update_customer_vendor').modal('show');
<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>
$(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();
            }
        });
    });
});