我的 HTML Div 元素在页面加载时立即消失
Posted
技术标签:
【中文标题】我的 HTML Div 元素在页面加载时立即消失【英文标题】：My HTML Div Element disappears immediately when page loads 【发布时间】：2017-05-07 15:17:44 【问题描述】：我通过 AJAX 获取 html 元素并动态添加到 DIV 元素。问题是，有时 DIV 加载正确，但有时它会变为空白并且 DIV 元素上什么也不显示，即使数据在浏览器中正确记录但没有显示出来。我附上了问题截图的链接，以便更好地理解。
Page loaded for first time
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)
$.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 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>【问题讨论】：
在这里放一些代码或jsfiddle的url，这样任何人都可以检查它。 请添加一些代码，否则我们只能猜测 comment 在帖子中添加代码请检查。 只有导航栏中的“主页”才能工作，因为我已经为主页提供了 html 代码，只有主页会产生问题。否则，当页面加载时，导航栏中的每个选项卡都可以正常工作 【参考方案1】：当 DOM 准备好时，您是否尝试通过 Ajax 加载此 HTML？也许尝试使用$(document).ready() 而不是$("#wb_element_section_teacher").ready()。
【讨论】：
我也试过这个，但问题还是一样。 div 会自发显示和隐藏，但有时会开始工作。 嗯，好吧，你知道$("#wb_element_section_teacher").ready() 不是真的有效。您正在检查 DOM 是否准备就绪，而不是特定元素。
也许检查来自服务器的响应是否被缓存？ Ajax 调用是否每次都在进行？
实际上“#wb_element_section_teacher”是始终可用的 div 元素的 id（屏幕截图中的灰色区域），即只有该数据被加载到这个被 AJAX 调用的 div 元素中。是的，AJAX 调用成功了，因为在每次 AJAX 调用之后，我都会在浏览器中记录数据，并且当页面加载时，AJAX 调用的数据总是显示在日志中。以上是关于我的 HTML Div 元素在页面加载时立即消失的主要内容，如果未能解决你的问题，请参考以下文章
<div element with results> 立即消失
如何在使用 QWebEngineView 'loadFinished' 加载页面后立即更改 html 元素？