I encounter an issue when fetching HTML elements via AJAX and dynamically adding them to a DIV element. Sometimes, the DIV loads correctly, but other times it appears blank, even though the data is logged correctly in the browser. To provide more clarity, I have included links to screenshots of the problem.
Page loaded for the first time
Page refreshed multiple times and data is displayed
Data disappears after page refresh, despite correct AJAX retrieval
//////fetch table from database
var getTable = function (id, value, tableId, context){
$.ajax({
url:'getJSON.php',
type:'POST',
dataType: 'json',
data:id+"="+value,
success:function(data){
console.log(data);
///////////////table/////////////
if(data.length>0)
{
var table = $('#'+tableId).
dataTable({
"pageLength": 5,
"lengthChange": false
});
var row,cell;
var count = Object.keys(data[0]).length;
for(i=0;i<data.length;i++){
if(context.toLowerCase()==="classenroll")
{
table.fnAddData([
data[i].CODE,
data[i].NAME]);
}
if (context.toLowerCase()==="showmodifyassign") {
table.fnAddData([
data[i].TITLE,
data[i].DESCRIPTION,
data[i].DEADLINE,
data[i].NAME,
"<a href=\"#\">Edit</a>"
]);
}
if (context.toLowerCase()==="submittedassignments") {
table.fnAddData([
data[i].STUDENT_ID,
data[i].FULL_NAME,
data[i].CLASS_NAME,
data[i].TITLE,
data[i].DEADLINE,
data[i].SUBMISSION_DATE,
"<a href = "+data[i].FILENAME+">"+"Download Now"+"</a>"
]);
}
if (context.toLowerCase()==="showdueassignments") {
table.fnAddData([
data[i].TNAME,
data[i].TITLE,
data[i].POSTINGDATE,
data[i].DEADLINE,
"<a target=\"_blank\" href = \"submit.php\">Submit</a>"
]);
}
if (context.toLowerCase()==="modifyclass") {
table.fnAddData([
data[i].CODE,
data[i].NAME,
data[i].DESCRIPTION,
"<a href = \"#\">Edit</a>"
]);
}
}
/////////////////////////////////////////////////
}
}
});
}
///code for the dynamic navbar
$("#wb_element_section_teacher").ready(function(e){
getForm("homeTeacher");
getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
topMargin(0);
});
$('body').on('click', '#teacherHome', function(){
getForm("homeTeacher");
getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
tempHeight=650;
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
$('body').on('click', '#createAssign', function(){
getForm("createAssign");
tempHeight=650;
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
$('body').on('click', '#modifyAssign', function(){
getForm("modifyAssign");
tempHeight=950;
getTable("showMod","somevalue","modAssign","showmodifyassign");
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
$('body').on('click', '#createClass', function(){
getForm("createClass");
tempHeight=650;
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
$('body').on('click', '#modifyClass', function(){
getForm("modifyClass");
getTable("modClass","somevalue","modClass","modifyclass");
tempHeight=1000;
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
$("#wb_element_section_teacher").ready(function(){
getForm("homeStudent");
getTable("due","somevalue","dueAssignments","showdueassignments");
topMargin(0);
});
}
$('body').on('click', '#homeStudent', function(){
getForm("homeStudent");
getTable("due","somevalue","dueAssignments","showdueassignments");
tempHeight=650;
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
$('body').on('click', '#enrollClasses', function(){
getForm("enrollClasses");
tempHeight=650;
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
$('body').on('click', '#viewEnrolled', function(){
getForm("viewEnrolled");
getTable($("#hStudentTitle").val(),$("#hStudentId").val(),"enrolledClassesTable","classEnroll");
tempHeight=650;
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
$('body').on('click', '#viewSent', function(){
getForm("viewSent");
getTable("sent","somevalue","sentAssignments","showsentassignments");
tempHeight=950;
$("#wb_element_section_teacher").css('height',tempHeight+'px');
topMargin(tempHeight-divHeight);
return false;
});
///////////
////JS to fetch the Elements (HTML)
getForm = function (userType){
$.ajax({
url: "forms.php",
type:"POST",
data:"type="+userType,
success:function(data){
console.log(data);
$("#wb_element_section_teacher").html(data);
return true;
}
});
}<!--
In Javascript code:
hTeacherTitle.val() = "TEACHER_ID";
hTeacherId.val()=(Integer value) ID of the teacher returned from the Database;
-->
<!-- Code that is fetched when the page loads -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#navItems" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-th-list"></span> </button>
</div>
<div id="navigation" class="col-md-12 ">
<ul class="nav nav-pills navbar-default collapse navbar-collapse nav-justified" id="navItems" >
<li id="teacherHome"><a href="#" class="navbar-text">Home</a></li>
<li id="createAssign"><a href="#" class="navbar-text">Create Assignment</a></li>
<li id="modifyAssign"><a href="#" class="navbar-text">Modify Assignments</a></li>
<li id="createClass"><a href="#" class="navbar-text">Create Class</a></li>
<li id="modifyClass"><a href="#" class="navbar-text">Modify Class</a></li>
</ul>
</div>
<div class="container-fluid" style="margin-top:10%;"> <center><h3>New Assignments</h3></center>
</div>
<div id="newAssign">
<table id="newAssignTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Student's ID</th>
<th>Student's Name</th>
<th>Class Name</th>
<th>Assignment Title</th>
<th>Due Date</th>
<th>Submission Date</th>
<th>Download</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>