0
我想從我的數據庫中抓取數據並將其發佈在無序列表中。我正在使用JavaScript和PHP。HTML不會追加使用JavaScript和AJAX
我有一個按鈕，它將在JavaScript中執行一個函數。該功能將從數據庫中獲取一些數據，並在數據庫中的查詢執行完後附加HTML代碼。
我檢查確認代碼是從數據庫中獲取數據。當我不使用.html().append()函數並對數據進行硬編碼時，它將工作，因爲它不使用隱藏類。當我將該函數放置在變量本身內時，它將顯示爲[Object Object]，但實際數據不會附加在列表中。
下面是HTML和JavaScript代碼：
function inventoryMenu(){
var confirmModal = $(
'<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header bg-default">' +
'<div class="container-fluid bodycontent">'+
'<h1>Inventory</h1>'+
'<h4><u> Product Control </u></h4>'+
'<ul>'+
'<div class="container-fluid bodycontent">'+
// '<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
// '<div class="col-xs-12 col-sm-12 col-md-3 dashMain">'+
'<br>'+
'<br>'+
'<ul id="mainDHMenu">'+
'</ul>'+
'</div>'+
'</div>'+
'<div class="row subDH">'+
// '<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-2 bg-menu procategory">'+
'<ul class="procategory">'+
$.post('controllers/pc_productcontrol_c.php', {action: "loadProCategory"}, function (e) {
console.log("In the loadProCategory function");
console.log("loadProCategory function post data: " + e);
if (e === undefined || e.length === 0 || e === null) {
console.log("No meny items in the loadProCategory function");
menudata += '<li><a href="#"> No Menu Item Found </a></li>';
} else {
$.each(e, function (index, qd) {
console.log("In the each post function");
console.log("Each post function data: pcat_id: " + qd.pcat_id + " pcat_name: " + qd.pcat_name);
'<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '"><a href="#">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name></a><i class="fa fa-arrow-right pull-right"></i></li>';
// menudata += '<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '"><a href="#">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name></a><i class="fa fa-arrow-right pull-right"></i></li>';
// $('.procategory').html('').append(menudata);
});
}
// menudata += '<li class="pull-right" id="addProCategory"><i class="fa fa-lg fa-plus"></i></li>';
// menudata += '</ul>';
// console.log("Menudata: \n" + menudata);
// console.log($('.procategory').html('').append(menudata));
}, "json")+
// '<li class="pctrlmenuitem" id="pc_44"><a href="#">Category 1<pcat_id class="hidden">44</pcat_id><pcat_name class="hidden">Category 1</pcat_name></a><i class="fa fa-arrow-right pull-right"></i></li>'+
'</ul>'+
'</div>'+
'<div class="col-xs-12 col-sm-12 col-md-5">'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu items"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems1 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems2 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems3 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems4 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems5 hidden"></div>'+
'</div>'+
'<div class="col-xs-12 col-sm-12 col-md-4 bg-menuitemdesc itemdesc"></div>'+
// '</div>'+
'</div>'+
'<div class="row mainDH hidden">'+
'<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 dashMain">'+
'</div>'+
'</div>'+
'<button class="btn btn-success" id="sendfpassreq">Submit</button> ' +
'<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>' +
'</div>' +
'</div>' +
// '</div>' +
'</div>'
);
confirmModal.modal("show");
var menudata = '';
menudata += '<h4><u> Product Control</u></h4>';
menudata += '<ul>';
$.post('controllers/pc_productcontrol_c.php', {action: "loadProCategory"}, function (e) {
if (e === undefined || e.length === 0 || e === null) {
menudata += '<li><a href="#"> No Menu Item Found </a></li>';
} else {
$.each(e, function (index, qd) {
console.log("In the each post function");
console.log("Each post function data: pcat_id: " + qd.pcat_id + " pcat_name: " + qd.pcat_name);
menudata += '<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '"><a href="#">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name></a><i class="fa fa-arrow-right pull-right"></i></li>';
$('.procategory').html('').append(menudata);
});
}
}, "json");
$('.pctrlmenuitem').click(function() {
$('.itemdesc').html('');
$('.procategory li').css('background-color', '#333333');
$(this).css('background-color', '#cc0000');
$('.items').removeClass('hidden');
if ($('.items').hasClass('hidden')) {
$('.items').removeClass('hidden');
}
if (!$('.subItems1').hasClass('hidden')) {
$('.subItems1').addClass('hidden');
}
if (!$('.subItems2').hasClass('hidden')) {
$('.subItems2').addClass('hidden');
}
if (!$('.subItems3').hasClass('hidden')) {
$('.subItems3').addClass('hidden');
}
if (!$('.subItems4').hasClass('hidden')) {
$('.subItems4').addClass('hidden');
}
if (!$('.subItems5').hasClass('hidden')) {
$('.subItems5').addClass('hidden');
}
var pcat_id = $(this).find('pcat_id').html();
var pcat_name = $(this).find('pcat_name').html();
loadItems(pcat_id, pcat_name);
$.post('controllers/session-store.php', {sessionstore: 'store', pcat_id: pcat_id, pcat_name: pcat_name}, function (e) {
console.log(e);
}, "json");
});<button onclick="inventoryMenu()" class="inventoryButton">Inventory</button>
您需要添加jQuery。 –
然後看看你有這個錯誤：'Uncaught TypeError：confirmModal.modal不是一個函數'。 –
jQuery被添加，我沒有收到這個問題。 – Mason