how to put button with dropdown on a table with data coming from a database

Question

I am currently working on a queue management system through php and javascript.

The data being appended to the table of html is coming from the mysql database. For every row there is supposed to be a call or cancel button. I'm on call button right now and I was able to include the button on the last column of the table in html. So far, the table looks like this:

I am trying to put a dropdown once the call button is clicked. The code I am using is this :

<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>");
                    });




                }
            });
        }






});

This is the ul for the dropdown: <ul id="contextMenu" class="dropdown-menu" role="menu"> <li><button class="payLink">Counter 1</button></li> <li><button class="delLink"></button></li> </ul>

Using the code, above, when I click on the call button, nothing comes up. Can anybody please tell me what I am doing wrong? Thank you.

Answer 1

You have to call your dropdown initialization inside your success callback, like this.

Ps. It's also nicer to declare a function before call it to prevent undefined function.

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();