Question

我正在使用Ajax动态填充DIV。我将每个页面内容存储在XML文件中作为CDATA。当用户单击导航栏中的链接时，Ajax会加载该特定页面的XML，对其进行解析，并使用其内容填充DIV。

一切都很好，除了一件事。我有一个jQuery模式弹出窗口，其标记从该页面的XML文件加载。来自jQuery插件的.js和.css文件都被加载，当这是HARD CODED（即，没有从XML加载）时，它工作正常。但是当它从XML加载时，模态不起作用。

当从XML文件加载页面时 - 页面应该做的是从XML文件中加载HTML，并且有一个超链接，当它被点击时，它应该创建模态弹出窗口。相反，单击链接不会启动模式弹出窗口。

当页面被硬编码时 - 它会完成它应该做的所有事情。

一个实例是：

http://mikemarks.net/clientSites/tabras/

点击“The Band”，在底部你会看到名为“Demo”的超链接。点击它会弹出一个模态弹出窗口，但你可以看到它只是带你到页面的顶部。

下面是我的标记（请注意div id =“copy”，这是我从HTML文件加载的HTML内容的占位符），我的Ajax JavaScript代码和我的XML文件（显示为标记的标记）加载到div id =“copy”）。

<div id="leftTwoThirdsColumn">
            <div id="menu">
                <ul class="menu">
                    <li style="width:65px;"><a id="default" href="#" onclick="makeRequest('xml/default.xml');"><span>Home</span></a></li>
                    <li style="width:65px;"><a id="lyrics" href="#" onclick="makeRequest('xml/lyrics.xml');"><span>Lyrics</span></a></li>
                    <li style="width:110px;"><a id="merch" href="#" onclick="makeRequest('xml/merch.xml');"><span>Merchandise</span></a></li>
                    <li style="width:93px;"><a id="bio" href="#" onclick="makeRequest('xml/bio.xml');"><span>The Band</span></a></li>
                    <li style="width:80px;"><a id="contact" href="#" onclick="makeRequest('xml/contact.xml');"><span>Contact</span></a></li>
                    <li style="width:150px;" class="last"><a id="friends" href="#" onclick="makeRequest('xml/friends.xml');"><span>Friends of Tabr&auml;s</span></a></li>
                </ul>
            </div>
            <br /><br />

            <div id="copy">

            </div>
        </div>

function makeRequest(url) 
{
    if(window.XMLHttpRequest)
    {
        request = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        request = new ActiveXObject("MSXML2.XMLHTTP");
    }

sendRequest(url);


}

function sendRequest(url)
{
    request.onreadystatechange = onResponse;
    request.open("GET", url, true);
    request.send(null);
}

function checkReadyState(obj)
{
    if(obj.readyState == 0) { document.getElementById('copy').innerHTML = "Sending Request..."; }
    if(obj.readyState == 1) { document.getElementById('copy').innerHTML = "Loading Response..."; }
    if(obj.readyState == 2) { document.getElementById('copy').innerHTML = "Response Loaded..."; }
    if(obj.readyState == 3) { document.getElementById('copy').innerHTML = "Response Ready..."; }
    if(obj.readyState == 4)
    {
        if(obj.status == 200)
        {
            return true;
        }
        else if(obj.status == 404)
        {
            // Add a custom message or redirect the user to another page
            document.getElementById('copy').innerHTML = "File not found";
        }
        else
        {
            document.getElementById('copy').innerHTML = "There was a problem retrieving the XML.";
        }
    }
}

function onResponse() 
{
    if(checkReadyState(request)) {
        var response = request.responseXML.documentElement;
        var root = new Array();
        root = response.getElementsByTagName('');
        //alert("Total Number of HTML Elements Found: " + response.getElementsByTagName("").length);
        var html = '';
        for (var i = 0; i < root.length; i++) {
            var tagName = response.getElementsByTagName("").item(i).nodeName;
            var tagObj = response.getElementsByTagName("").item(i);
            html += tagObj.firstChild.nodeValue;
        }
        document.getElementById('copy').innerHTML = html;
    }
}

sendRequest(url);

Answer 1

三个问题：

它会让你移到顶端，因为你有一个href =“＃”将它改为href =“javascript：void（0）”
http://mikemarks.net/clientSites/js/modal/jquery.simplemodal.js返回404.检查位置
http://mikemarks.net/clientSites/js/modal/basic.js返回404.检查位置

Answer 2

您的网页似乎缺少jquery.simplemodal.js和basic.js以及相关的css（例如，对于 basic-modal-content 上的display：none;）

这就是你加载任何模态的原因。

另外，您的链接或按钮没有任何事件处理程序（例如，$（'。basic'）。click（...）;）

这就是为什么你没有任何其他行动而不是锚。

要删除锚操作，我建议使用event.preventDefault

我正在使用Ajax填充我的网页，但填充的HTML无效

2 个答案: