如何将带有下拉列表的按钮放在包含来自数据库的数据的表上

时间:2017-06-15 01:25:23

标签: php jquery ajax

我目前正在通过php和javascript开发队列管理系统。

附加到html表的数据来自mysql数据库。对于每一行,应该有一个呼叫或取消按钮。我现在正在通话按钮,我能够在html的表格的最后一列中包含该按钮。到目前为止,该表看起来像这样: Current display of the table with the button "CALL"

我试图在点击通话按钮后输入一个下拉菜单。我正在使用的代码是:

<script type="text/javascript">
$(document).ready(function (){

    getTableData();
    //window.setInterval(getTableData, 10000);
    $dropdown = $('#contextMenu');
    $(".actionButton").click(function() {
                        //get row ID
                        var id = $(this).closest("tr").children().first().html();
                        //move dropdown menu
                        $(this).after($dropdown);
                        //update links
                        $dropdown.find(".payLink").attr("href", "/transaction/pay?id="+id);
                        $dropdown.find(".delLink").attr("href", "/transaction/delete?id="+id);
                        //show dropdown
                        $(this).dropdown();
                    });

        function getTableData(){
            $.ajax({
                url: 'inc/php/fetch_data.php',
                type: 'POST',
                async: false,
                data: 'data=gettabledata',
                datatype:"text",
                success: function (data){
                    $('.table-bordered tbody').empty();
                    dataArray = JSON.parse(data);
                    $.each(dataArray, function(key,value){
                        $('.table-bordered tbody').append("<tr><td>"+value[0]+"</td><td>"+value[1]+"</td><td>"+value[2]+"</td><td>"+value[3]+"</td><td>"+value[4]+"</td><td class='dropdown'><a class='btn btn-default actionButton' data-toggle='dropdown' href='#'> Call </a></td></tr>");
                    });




                }
            });
        }






});

这是下拉列表的ul:<ul id="contextMenu" class="dropdown-menu" role="menu"> <li><button class="payLink">Counter 1</button></li> <li><button class="delLink"></button></li> </ul>

使用上面的代码,当我点击通话按钮时,什么都没有出现。 谁能告诉我我做错了什么? 谢谢。

1 个答案:

答案 0 :(得分:0)

您必须在成功回调中调用您的下拉列表初始化,如下所示。

聚苯乙烯。在调用函数之前声明函数以防止未定义的函数也更好。

function getTableData() {
        $.ajax({
            url: 'inc/php/fetch_data.php',
            type: 'POST',
            async: false,
            data: 'data=gettabledata',
            datatype: "text",
            success: function (data) {
                $('.table-bordered tbody').empty();
                dataArray = JSON.parse(data);
                $.each(dataArray, function (key, value) {
                    $('.table-bordered tbody').append("<tr><td>" + value[0] + "</td><td>" + value[1] + "</td><td>" + value[2] + "</td><td>" + value[3] + "</td><td>" + value[4] + "</td><td class='dropdown'><a class='btn btn-default actionButton' data-toggle='dropdown' href='#'> Call </a></td></tr>");
                });
                $dropdown = $('#contextMenu');
                $(".actionButton").click(function () {
                    //get row ID
                    var id = $(this).closest("tr").children().first().html();
                    //move dropdown menu
                    $(this).after($dropdown);
                    //update links
                    $dropdown.find(".payLink").attr("href", "/transaction/pay?id=" + id);
                    $dropdown.find(".delLink").attr("href", "/transaction/delete?id=" + id);
                    //show dropdown
                    $(this).dropdown();
                });
            }
        });
    }

getTableData();