Question

我希望单独保留我的页面并使用ajax将它们全部加载到一个主页面中，这样我就可以更快地更改布局。我使用Metro UI Css。

问题是，我的页面在单独调用时工作得很好，但是当通过ajax调用并显示在主页面上时，它不会响应或抛出任何异常。这是我加载页面的html代码：

<head>
    <script src="../../app/webroot/js/jquery/jquery.min.js"></script>
    <script src="../../app/webroot/js/jquery/jquery.widget.min.js"></script>
    <script src="../../app/webroot/js/prettify/prettify.js"></script>   
    <script src="../../app/webroot/js/load-metro.js"></script>
</head>
<body class="metro">
<div class="accordion" data-role="accordion" style="font-size:20px; color:#3D5168">
    <div class="accordion-frame">
        <a class="heading" href="#"><i class="icon-history"></i>Early days</a>
        <div class="content">
            <p>Line 1</p>   
        </div>
    </div>
</div>
</body>

我怀疑该行

href="#"

与它有关，它可能试图调用它来自的原始页面，而不是它实际显示的页面。我在“来电者”页面上做了所有相同的导入，正如我所说，我没有例外。

这是我加载页面的方式（Ajax）

function LoadPage(PageName)
    {
        document.getElementById('LoadedPage').style.visibility='hidden';
        document.getElementById('loader').style.visibility='visible'
        var xmlHttp=MakeConn();
            xmlHttp.onreadystatechange = function()
            {
              if(xmlHttp.readyState === 4)
              {
                HandleLoad(xmlHttp.responseText,PageName);
              }
            };
            xmlHttp.open("GET", "http://www.somewebsite.com/main/"+PageName, true); 
            xmlHttp.send(null);
    }

    function HandleLoad(response,PageName)
    {   
        if(PageName!='home')
        {
            document.getElementById('home').className = 'tile bg-VSblue1';
        }
        if(PageName!='games')
        {
            document.getElementById('games').className = 'tile bg-VSblue1';
        }
        if(PageName!='about')
        {
            document.getElementById('about').className = 'tile bg-VSblue1';
        }
        if(PageName!='contact')
        {
            document.getElementById('contact').className = 'tile bg-VSblue1';
        }
        document.getElementById(PageName).className = 'tile double bg-VSblue1 selected';
        document.getElementById('loader').style.visibility='hidden';
        document.getElementById('LoadedPage').style.visibility='visible';       
        document.getElementById('LoadedPage').innerHTML = response;
    }

有没有人对如何解决此问题有一些建议？谢谢......

Answer 1

这是因为在你打电话给AJAX之后它还没有被初始化，所以我不会工作。要初始化jst，请在将元素放入body后添加此行：

$.Metro.initAll();

现在一切都会好起来的。

注意：如果它没有尝试“启动”＆＃39;而不是＆＃39; initAll＆＃39;

通过Ajax打开时页面无法正常运行

1 个答案: