0
Проблема, с которой я столкнулась, заключается в том, что после некоторых щелчков мыши на моей консоли я сначала вижу это сообщение «Синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для и после этого всякий раз, когда я нажимаю на элемент mainMenu, моя страница по умолчанию ajax, относящаяся к этому, не открывается, и я также вижу эту ошибку в консоли «Uncaught Error: не может вызывать методы на аккордеоне до инициализации, попытался вызвать метод», опция '». Я как бы потерялся в этой проблеме и не понял, что происходит.My jquery ui accordion перестает загружать страницы ajax после определенного количества кликов
Вот моя JQuery часть: -
$(".accordion").accordion({collapsible:true, active:0, heightStyle: "content"});
$("#protocolParameters").load("generalSystemStatus.html");
$(document).on("click",".outerMenuItem",function(){
var currentlyActive=$(".accordion").accordion("option", "active");
console.log("Current tab no. "+currentlyActive);
if(currentlyActive===0){
$("#protocolParameters").load("generalSystemStatus.html");
}
else if(currentlyActive===1){
$("#protocolParameters").load("networkEthernet.html");
}
else if(currentlyActive===2){
$("#protocolParameters").load("ntpDaemonStatus.html");
}
else if(currentlyActive===3){
$("#protocolParameters").load("ptpMaster.html");
}
else if(currentlyActive===4){
$("#protocolParameters").load("timingHardwareClockConfig.html");
}
else if(currentlyActive===5){
$("#protocolParameters").load("system.html");
}
else if(currentlyActive===6){
$("#protocolParameters").load("adminAlarm.html");
}
else {
$("#protocolParameters").load("/404.html .someError");
}
});
$(".outerMenuItem").click(function(){
if($(this).text()==="SYSTEM"){
console.log("System Clicked");
$("#protocolParameters").load("system.html");
}
});
$(".innerMenuItem").click(function() {
$(".innerMenuItem").removeClass("innerMenuItemOnClick");
$(this).addClass("innerMenuItemOnClick");
if ($(this).text() === "General") {
$("#protocolParameters").load("generalSystemStatus.html");
}
else if ($(this).text() === "Networks") {
$("#protocolParameters").load("networkStatus.html");
}
else if ($(this).text() === "Timing") {
$("#protocolParameters").load("timingStatus.html");
}
else if ($(this).text() === "GNSS") {
$("#protocolParameters").load("gpsStatus.html");
}
else if ($(this).text() === "PTP") {
$("#protocolParameters").load("ptpStatus.html");
}
else if ($(this).text() === "Alarms") {
$("#protocolParameters").load("alarmStatus.html");
}
else if ($(this).text() === "Ethernet") {
$("#protocolParameters").load("networkEthernet.html");
}
else if ($(this).text() === "SNMP") {
$("#protocolParameters").load("networkSnmp.html");
}
else if($(this).text()=== "NTP Daemon Status"){
$("#protocolParameters").load("ntpDaemonStatus.html");
}
else if($(this).text()=== "PTP Master"){
$("#protocolParameters").load("ptpMaster.html");
}
else if($(this).text()=== "PTP Slaves"){
$("#protocolParameters").load("ptpSlave.html");
}
else if($(this).text() === "Hardware Clock Configuration"){
$("#protocolParameters").load("timingHardwareClockConfig.html");
}
else if($(this).text() === "Holdover"){
$("#protocolParameters").load("timingHoldover.html");
}
else if($(this).text() === "System"){
$("#protocolParameters").load("system.html");
}
else if($(this).text()=== "Alarm"){
$("#protocolParameters").load("adminAlarm.html");
}
else if($(this).text()=== "Logging"){
$("#protocolParameters").load("adminLogging.html");
}
else if($(this).text()=== "Web Interface"){
$("#protocolParameters").load("adminWebInterface.html");
}
else if($(this).text()=== "User Management"){
$("#protocolParameters").load("adminUserManagement.html");
}
else{
$("#protocolParameters").load("/404.html .someError");
}
});
Вот мой HTML часть:
<div class="accordion">
<h3 class="outerMenuItem"><div class="systemStatusNormal"></div>STATUS</h3>
<ul class="submenu">
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">General</a></li>
<li><a class="innerMenuItem" href="#!">Networks</a></li>
<li><a class="innerMenuItem" href="#!">Timing</a></li>
<li><a class="innerMenuItem" href="#!">GNSS</a></li>
<li><a class="innerMenuItem" href="#!">PTP</a></li>
<li><a class="innerMenuItem" href="#!">Alarms</a></li>
</ul>
<h3 class="outerMenuItem"><div class="systemStatusNormal"></div>NETWORK</h3>
<ul class="submenu" id="networkSubmenu">
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Ethernet</a></li>
<li><a class="innerMenuItem" href="#!">SNMP</a></li>
</ul>
<h3 class="outerMenuItem" ><div class="systemStatusRisk"></div>NTP</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">NTP Daemon Status</a> </li>
</ul>
<h3 class="outerMenuItem"><div class="systemStatusWarning"></div>PTP Management</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">PTP Master</a> </li>
<li><a class="innerMenuItem" href="#!">PTP Slaves</a> </li>
</ul>
<h3 class="outerMenuItem"><div class="systemStatusNormal"></div>TIMING</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Hardware Clock Configuration</a> </li>
<li><a class="innerMenuItem" href="#!">Holdover</a> </li>
</ul>
<h3 class="outerMenuItem innerMenuItem"><div class="systemStatusNormal"></div>SYSTEM</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">System</a></li>
</ul>
<h3 class="outerMenuItem"><div class="systemStatusNormal"></div>ADMIN</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Alarm</a></li>
<li><a class="innerMenuItem" href="#!">Logging</a></li>
<li><a class="innerMenuItem" href="#!">Web Interface</a></li>
<li><a class="innerMenuItem" href="#!">User Management</a></li>
</ul>
</div>
А вот CSS: -
#sidebarElementDivPicture{
height:152px;
}
a{
color: #3f3f4e;
font-weight: bold;
padding-left:15px;
}
a.innerMenuItem{
color: #363545;
}
a.innerMenuItemOnClick{
color:#eb5e13 !important;
}
.accordion .ui-icon{
display:none;
}
.accordion .ui-accordion-header{
height:30px;
position: relative;
z-index: 3;
width:200px;
}
.accordion .ui-accordion-header:hover{
color:#eb5e13;
}
.accordion .ui-accordion-header .ui-state-active{
color:#eb5e13;
}
.accordion .ui-accordion-content {
position: relative;
z-index: 6;
width:180px;
color:#eb5e13;
}
.accordion .ui-accordion-header:active{
color:#eb5e13;
}
#sidebar{
float:left;
padding-left:200px !important;
padding-top: 22px;
}
есть ли код ajax внутри любого из этих html-файлов? – charlietfl
Да, в некоторых из них есть потому, что я использую формы там, и я отправляю их с помощью ajax. –
Тогда один или несколько из них установлены в 'async: false', о чем идет предупреждение. Это всегда была плохая практика, так как она блокирует пользовательский интерфейс и теперь устарела. – charlietfl