HTML won't append using javascript and AJAX

Question

I am trying to grab data from my database and post it in an unordered list. I am using JavaScript and PHP.

I have a button that will execute a function in JavaScript. This function will grab some data from the database and append the HTML code after the query in the database has been executed.

I checked to make sure the code is grabbing data from the database. When I do not use the .html().append() function and hard code the data, it will work as it is not using the hidden class. When I put the function inside the variable itself as shown below, it will show as [Object Object] , however the actual data will not append on the list.

Here is the HTML and JavaScript code:

 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>&nbsp;' + '<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> 

Answer 1

I found the problem.. The data retrieved from the post function cannot be referenced outside of the post function with the original data. 'menudata' variable is null outside of the post function, therefore the .append() function did not append anything.

I moved my code inside the post function and now it is working.