Я использую Ajax для заполнения своей веб-страницы, но заполненный HTML не работает

Question

Я использую Ajax для динамического заполнения DIV. У меня есть содержимое каждой страницы в файлах XML как CDATA. Когда пользователь щелкает ссылку на панели навигации, Ajax загружает XML для этой конкретной страницы, анализирует его и заполняет DIV его содержимым.

Все работает ОТЛИЧНО, кроме одной вещи. У меня есть модальное всплывающее окно jQuery, разметка которого загружается из файла XML этой страницы. Все файлы .js и .css из плагина jQuery загружаются, и когда он имеет жесткий код (то есть не загружается из XML), он работает нормально. Но когда он загружается из XML, модальный режим не работает.

Когда страница загружается из файла XML. То, что страница должна делать, это загружать HTML-файл из файла XML, что и происходит, и есть гиперссылка, при нажатии на которую предполагается создать модальное всплывающее окно. Вместо этого нажатие на ссылку НЕ запускает модальное всплывающее окно.

Когда страница жестко запрограммирована - она ​​делает все, что должна.

Живой пример по адресу:

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

Нажмите на «The Band», и внизу вы увидите гиперссылку под названием «Demo». При нажатии на это должно появиться модальное всплывающее окно, но вместо этого, как вы можете видеть, оно просто переносит вас в верхнюю часть страницы.

Ниже приведены моя разметка (обратите внимание на div id = "copy", который является заполнителем для моего HTML-контента, загруженного из файла XML), мой код JavaScript Ajax и мой 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");
    }</p>

<pre><code>sendRequest(url);

} * * тысяча двадцать-один

функция sendRequest (url) { request.onreadystatechange = onResponse; request.open ("GET", url, true); request.send (нуль); }

функция checkReadyState (obj) { if (obj.readyState == 0) {document.getElementById ('copy'). innerHTML = "Отправка запроса ..."; } if (obj.readyState == 1) {document.getElementById ('copy'). innerHTML = "Загрузка ответа ..."; } 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) { вернуть истину; } еще если (obj.status == 404) { // Добавить пользовательское сообщение или перенаправить пользователя на другую страницу document.getElementById ('copy'). innerHTML = "Файл не найден"; } еще { document.getElementById ('copy'). innerHTML = "Произошла ошибка при получении XML."; } } }

функция onResponse () { if (checkReadyState (request)) { var response = request.responseXML.documentElement; var root = new Array (); root = response.getElementsByTagName (''); // alert ("Общее количество найденных элементов HTML:" + response.getElementsByTagName (""). length); var html = ''; for (var i = 0; i "). item (i) .nodeName; var tagObj = response.getElementsByTagName (""). item (i); html + = tagObj.firstChild.nodeValue; } document.getElementById ('copy'). innerHTML = html; } }

<code></p>

<p>
  <div style="padding-top:5px; margin-left:auto; margin-right:auto; text-align:center;">
    <img src="images/ShawnBioActive.png" />
    <img src="images/JasonBioActive.png" />
    <img src="images/WillBioActive.png" />
    <img src="images/RasoulBioActive.png" />
    <img src="images/bioStrip.png" />
    <div id=&apos;basic-modal&apos;><h3>Basic Modal Dialog</h3><p>A basic modal dialog with minimal styling and no additional options. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p><input type=&apos;button&apos; name=&apos;basic&apos; value=&apos;Demo&apos; class=&apos;basic&apos;/> or <a href=&apos;#&apos; class=&apos;basic&apos;>Demo</a></div><script type="text/javascript" src="../js/modal/jquery.simplemodal.js"></script><script type="text/javascript" src="../js/modal/basic.js"></script><link type="text/css" href="../css/modal/demo.css" rel="stylesheet" media="screen" /><link type="text/css" href="../css/modal/basic.css" rel="stylesheet" media="screen" /><script type=&apos;text/javascript&apos;>jQuery().ready(function () {$(&apos;#basic-modal-content&apos;).modal();});</script>
    <div id="basic-modal-content"><h3>Basic Modal Dialog</h3></div><div style=&apos;display:none&apos;><img src=&apos;images/modal/basic/x.png&apos; alt=&apos;&apos; /></div></test2>
  </div>
  </p>

<p>

Answer 1

Кажется, что на вашей веб-странице отсутствуют jquery.simplemodal.js и basic.js и связанный css (например, для отображения: нет; на вашем basic-modal-content )

Вот почему у вас нет модального режима загрузки.

Кроме того, у вашей ссылки или кнопки нет обработчика событий (например, $ ('. Basic'). Click (...);)

Вот почему у вас нет другого действия, кроме привязки.

Чтобы удалить действие привязки, я рекомендую использовать event.preventDefault

Answer 2

Три проблемы:

1. Он перемещает вас наверх, потому что у вас есть href = "#", измените его на href = "javascript: void (0)"

2. http://mikemarks.net/clientSites/js/modal/jquery.simplemodal.js возвращает 404. Проверка местоположения

3. http://mikemarks.net/clientSites/js/modal/basic.js возвращает 404. Проверка местоположения