1
HTML要素をAJAXで取得し、DIV要素に動的に追加しています。問題は、DIVが正しく読み込まれることがあることがありますが、データがブラウザで正しくロギングされていても表示されない場合でも、DIV要素に何も表示されないことがあります。私は問題のスクリーンショットへのリンクを理解しやすくするために添付しています。ページロード時にHTML要素がすぐに消える
Page refreshed several times and data appears
Data disappears again when page is refreshed but AJAX is fetching the html code correctly
//////fetch table from database
var getTable = function (id, value, tableId, context){
\t \t \t $.ajax({
\t \t \t \t url:'getJSON.php',
\t \t \t \t type:'POST',
\t \t \t \t dataType: 'json',
\t \t \t \t data:id+"="+value,
\t \t \t \t success:function(data){
\t \t \t \t \t
\t \t \t \t
\t \t \t \t console.log(data);
\t \t \t \t
\t \t \t \t ///////////////table/////////////
\t \t \t \t \t
\t \t \t \t if(data.length>0)
\t \t \t \t {
\t \t \t \t \t var table = $('#'+tableId).
\t \t \t \t \t \t \t \t dataTable({
\t \t \t \t \t \t \t \t \t "pageLength": 5,
\t \t \t \t \t \t \t \t \t "lengthChange": false
\t \t \t \t \t \t \t \t });
\t \t \t \t \t var row,cell;
\t \t \t \t \t var count = Object.keys(data[0]).length;
\t \t \t \t
\t \t \t \t for(i=0;i<data.length;i++){
\t \t \t \t \t
\t \t \t \t \t if(context.toLowerCase()==="classenroll")
\t \t \t \t \t {
\t \t \t \t \t \t table.fnAddData([
data[i].CODE,
\t \t \t \t \t \t \t \t \t data[i].NAME
\t \t \t \t \t ]); \t
\t \t \t \t \t }
\t \t \t \t \t if (context.toLowerCase()==="showmodifyassign") {
\t \t \t \t \t \t table.fnAddData([
\t \t \t \t \t \t
\t \t \t \t \t \t \t data[i].TITLE,
\t \t \t \t \t
\t \t \t \t \t \t \t data[i].DESCRIPTION,
\t \t \t \t \t \t \t data[i].DEADLINE,
\t \t \t \t \t \t \t data[i].NAME,
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t "<a href=\"#\">Edit</a>"
\t \t \t \t \t \t \t
\t \t \t \t \t \t ]);
\t \t \t \t \t \t
\t \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t if (context.toLowerCase()==="submittedassignments") {
\t \t \t \t \t \t table.fnAddData([
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t data[i].STUDENT_ID,
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t data[i].FULL_NAME,
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t data[i].CLASS_NAME,
\t \t \t \t \t \t \t data[i].TITLE,
\t \t \t \t \t \t \t data[i].DEADLINE,
\t \t \t \t \t \t \t data[i].SUBMISSION_DATE,
\t \t \t \t \t \t \t "<a href = "+data[i].FILENAME+">"+"Download Now"+"</a>"
\t \t \t \t \t \t ]);
\t \t \t \t \t }
\t \t \t \t \t if (context.toLowerCase()==="showdueassignments") {
\t \t \t \t \t \t table.fnAddData([
\t \t \t \t \t \t \t data[i].TNAME,
\t \t \t \t \t \t \t data[i].TITLE,
\t \t \t \t \t \t \t data[i].POSTINGDATE,
\t \t \t \t \t \t \t data[i].DEADLINE,
\t \t \t \t \t \t \t "<a target=\"_blank\" href = \"submit.php\">Submit</a>"
\t \t \t \t \t \t ]);
\t \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t if (context.toLowerCase()==="modifyclass") {
\t \t \t \t \t \t table.fnAddData([
\t \t \t \t \t \t \t data[i].CODE,
\t \t \t \t \t \t \t data[i].NAME,
\t \t \t \t \t \t \t data[i].DESCRIPTION,
\t \t \t \t \t \t \t "<a href = \"#\">Edit</a>"
\t \t \t \t \t \t ]);
\t \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t
\t \t \t \t
\t \t \t }
\t \t \t \t /////////////////////////////////////////////////
\t \t }
\t }
});
\t
}
///code for the dynamic navbar
$("#wb_element_section_teacher").ready(function(e){
\t \t
\t \t getForm("homeTeacher");
\t \t getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
\t \t topMargin(0);
\t
\t });
\t
\t $('body').on('click', '#teacherHome', function(){
\t
\t getForm("homeTeacher"); \t
\t \t getTable($("#hTeacherTitle").val(),$("#hTeacherId").val(),"newAssignTable","submittedAssignments");
tempHeight=650;
\t \t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t \t topMargin(tempHeight-divHeight);
\t return false;
});
$('body').on('click', '#createAssign', function(){
\t \t
\t \t getForm("createAssign");
\t \t tempHeight=650;
\t \t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t \t topMargin(tempHeight-divHeight);
\t return false;
});
$('body').on('click', '#modifyAssign', function(){
\t
\t \t getForm("modifyAssign");
\t \t tempHeight=950;
\t \t getTable("showMod","somevalue","modAssign","showmodifyassign");
\t \t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t \t topMargin(tempHeight-divHeight);
\t return false;
});
$('body').on('click', '#createClass', function(){
\t \t getForm("createClass");
\t \t tempHeight=650;
\t \t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t \t topMargin(tempHeight-divHeight);
\t return false;
});
$('body').on('click', '#modifyClass', function(){
\t getForm("modifyClass");
\t getTable("modClass","somevalue","modClass","modifyclass");
\t tempHeight=1000;
\t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t topMargin(tempHeight-divHeight); \t
return false;
});
$("#wb_element_section_teacher").ready(function(){
\t \t
\t \t getForm("homeStudent");
\t \t getTable("due","somevalue","dueAssignments","showdueassignments");
\t topMargin(0);
});
}
$('body').on('click', '#homeStudent', function(){
getForm("homeStudent"); \t
getTable("due","somevalue","dueAssignments","showdueassignments");
tempHeight=650;
\t \t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t \t topMargin(tempHeight-divHeight);
\t return false;
});
$('body').on('click', '#enrollClasses', function(){
\t \t
\t \t getForm("enrollClasses");
\t \t tempHeight=650;
\t \t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t \t topMargin(tempHeight-divHeight);
\t return false;
});
$('body').on('click', '#viewEnrolled', function(){
\t \t getForm("viewEnrolled");
\t \t getTable($("#hStudentTitle").val(),$("#hStudentId").val(),"enrolledClassesTable","classEnroll");
\t \t tempHeight=650;
\t \t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t \t topMargin(tempHeight-divHeight);
\t return false;
});
$('body').on('click', '#viewSent', function(){
\t
\t \t getForm("viewSent");
\t \t getTable("sent","somevalue","sentAssignments","showsentassignments");
\t \t tempHeight=950;
\t \t $("#wb_element_section_teacher").css('height',tempHeight+'px');
\t \t topMargin(tempHeight-divHeight);
\t return false;
});
///////////
////JS to fetch the Elements (HTML)
getForm = function (userType){
\t $.ajax({
\t \t url: "forms.php",
\t \t type:"POST",
\t \t data:"type="+userType,
\t \t success:function(data){
\t \t \t console.log(data);
\t \t \t $("#wb_element_section_teacher").html(data);
\t \t \t return true;
\t \t }
\t });
}<!--
In Javascript code:
hTeacherTitle.val() = "TEACHER_ID";
hTeacherId.val()=(Integer value) ID of the teacher returned from the Database;
-->
<!-- Code that is fetched when 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" >
\t \t <li id="teacherHome"><a href="#" class="navbar-text">Home</a></li>
\t \t <li id="createAssign"><a href="#" class="navbar-text">Create Assignment</a></li>
\t <li id="modifyAssign"><a href="#" class="navbar-text">Modify Assignments</a></li>
\t <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">
\t <table id="newAssignTable" class="table table-bordered table-striped">
\t \t <thead>
<tr>
\t \t <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>
\t \t </tr>
</thead>
<tbody>
</tbody>
\t </table>
</div>
ここにコードまたはjsfiddleのURLを入れて、誰でもそれを調べることができます。 – aavrug
いくつかのコードを追加してください。それ以外のコードを追加してください。 –
[コメント]（https://icanhazcode.com/img/showSomeCode.png） –