我的jquery ui手风琴在一定次数的点击后停止加载ajax页面

时间:2015-09-22 17:34:03

标签: jquery ajax html5 css3 jquery-ui-accordion

我面临的问题是,在我的控制台上点击后,我首先看到这条消息“主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用”,之后每当我点击mainMenu项目时,我的默认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;
       }

1 个答案:

答案 0 :(得分:1)

最后修好了。问题不在于手风琴代码。问题是我为jquery和jquery ui引用调用脚本标记的方式,即

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-ui.min.js"></script>

在我通过AJAX调用的一些文件中,有些文件有这些脚本,因此应用程序上下文中有一个开关。我从这些文件中删除了这些标签,并确保只有具有手风琴的主页具有这些标签。它现在完美无缺