隐藏引导下拉列表时如何设置事件?

时间:2017-06-18 08:07:55

标签: javascript jquery twitter-bootstrap web

我有以下两个功能:filterbuttonsgetTableData.

第一个函数决定是否应该或不应该在表行上显示对计数器的调用。 第二个函数基于从数据库中检索的信息构建表数据。

function filterButtons(status) {
    $append = "";
    if (status == "PENDING") {
        $append = "<td class='dropdown'><a id='call' class='btn btn-primary actionButton' data-toggle='dropdown'> Call to Counter </a><a class='btn btn-danger cancelbtn' > Cancel </a></td>";
    } else if (status== "SERVING") {
        $append = "<td><a class='btn btn-danger cancelbtn' > Cancel </a><a class='btn btn-success donebtn'>Done</a></td>";
    }
        return $append;
    }

    function getTableData() {
        $.ajax({
            url: 'inc/php/fetch_data.php',
            type: 'POST',
            async: false,
            data: 'data=gettabledata',
            datatype: "text",
            success: function (data) {
                console.log(1);
                $('.table-hover tbody').empty();    //refresh the table data
                dataArray = JSON.parse(data);           //covert data from server to js array
                $.each(dataArray, function (key, value) {
                    $('.table-hover tbody').append("<tr><td>" + value[0] + "</td><td><font size='3px'>" + value[1] + "</font></td><td><font size='3px'><b>" + value[2] + "</b></font></td><td><font size='3px'>" + value[3] + "</font></td><td><font size='3px'>" + value[4] + "</font></td><td><font size='3px'>"+value[5]+"</font></td>"+filterButtons(value[2])+"</tr>");
                }); 

                $(".actionButton").click(function () {  
                    //move dropdown menu
                    $(this).after($dropdown);

                   // clearInterval(counter);
                   // clearInterval(table);
                    // $(".actionButton").click(function(){
                    //     table = setInterval(getTableData,150);
                    // });
                });

                $(".dropdown").on('hide.bs.dropdown', function(){
                        console.log("hide method called");
                    });


                $(".cancelbtn").click(function (){
                    var id = $(this).closest("tr").children().first().html();
                    if(confirm("Are you sure you want to cancel the transaction?")){


                        $.ajax({
                            url: 'inc/php/fetch_data.php',
                            type:'POST',
                            async: false,
                            data:'data=canceltrans&id='+id,
                            datatype:'text',
                            success: function(data){
                                if(data=="1"){
                                    console.log("Cancel Successful!");
                                }
                            }
                        });
                    }
                });

                $(".donebtn").click(function(){
                    var id = $(this).closest("tr").children().first().html();

                    $.ajax({
                        url: 'inc/php/fetch_data.php',
                        type: 'POST',
                        async: false,
                        data: 'data=completetrans&id='+id,
                        datatype:'text',
                        success: function(data){
                            if (data=="1"){
                                console.log("Transaction Completed");
                                location.reload();
                            }
                        }
                    });
                });
            }
        });  

        $.ajax({
            url:'inc/php/fetch_data.php',
            type: "POST",
            async: false,
            data: "data=getavailcounter",
            datatype: "text",
            success: function (data){
                $dropdown.empty();
                dataArray = JSON.parse(data);
                $dropdown.append('<li><a class="Label">Select Counter:</a></li>');
                $.each(dataArray, function (key,value){
                    $dropdown.append('<li><a class="counterLink" role="menu">'+value+'</a></li>');
                });

                //CODE FOR CLICK FUNCTION on select counter from dropdown
                $(".counterLink").click(function (){
                    console.log("Counter CLicked!");
                    table = setInterval(getTableData,150);
                    var counter = $(this).html();
                    var id = $(this).closest("tr").children().first().html();
                    $.ajax({
                        url: 'inc/php/fetch_data.php',
                        type: 'POST',
                        async: false, 
                        data: "data=calltrans&id="+id+"&counter="+counter,
                        datatype:"text",
                        success: function (data){
                            if(data=="1"){
                                console.log("Call Successful!");
                            }
                            else{
                                console.log("Unsuccessful!");
                            }
                            location.reload();
                        }

                    });
                });
            }
        });   
    }

我已经在线阅读了一些关于如何执行此操作的信息,并且我得到了以下代码,以便在下拉列表关闭时执行该函数:

$(".dropdown").on('hide.bs.dropdown', function(){
    console.log("hide method called");
});

我将该代码添加到函数getTableData,就在带有下拉列表的按钮的单击功能之后。当我尝试它时,我的控制台上没有任何东西出现,所以它一定不能到达我的代码部分。谁能告诉我为什么?

1 个答案:

答案 0 :(得分:0)

抱歉这个愚蠢的问题。我刚刚意识到这是bootstrap导入的一个问题。