我目前正在通过php和javascript开发队列管理系统。
附加到html表的数据来自mysql数据库。对于每一行,应该有一个呼叫或取消按钮。我现在正在通话按钮,我能够在html的表格的最后一列中包含该按钮。到目前为止,该表看起来像这样:
我试图在点击通话按钮后输入一个下拉菜单。我正在使用的代码是:
<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>
使用上面的代码,当我点击通话按钮时,什么都没有出现。 谁能告诉我我做错了什么? 谢谢。
答案 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();