Почему AJAX div загружает html, но не вызывает javascript из другого html? - PullRequest
Новая
       1

Почему AJAX div загружает html, но не вызывает javascript из другого html?

0 голосов
/ 01 февраля 2011

Я так долго пытался заставить работать эту многостраничную страницу через ajax.

Сначала я использовал этот урок: http://webdesign.torn.be/tutorials/javascript/prototype/page-loading/

По какой-то причине вызов javascript у меня не работает:

Вот мой макет.

index.html 

    <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>The Venue - New Student building</title>


<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />   

 <script type="text/javascript" src="miniTab.js"></script>
 <link href="css2.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript">

 // <![CDATA[
                document.observe('dom:loaded', function () {
  var newsCat = document.getElementsByClassName('newsCat');
  for (var i = 0; i < newsCat.length; i++) {
   $(newsCat[i].id).onclick = function () {
    getCatPage(this.id);
   }
  }
 });

 function getCatPage(id) {
  var url = 'load-content4.php';
  var rand   = Math.random(9999);
  var pars   = 'id=' + id + '&rand=' + rand;
  var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
 }

 function showLoad () {
  $('newsContent').style.display = 'none';
  $('newsLoading').style.display = 'block';
 }

 function showResponse (originalRequest) {
  var newData = originalRequest.responseText;
  $('newsLoading').style.display = 'none';
  $('newsContent').style.display = 'block';  
  $('newsContent').innerHTML = newData;
 }
 // ]]>
 </script>
         <!-- blablablablbaalblabalbalblablablabla other stuff -->

</head>

<body>



<div id="newsContainer" style="background-image: url(images/menuGradient.png); background-repeat:repeat-x; width:100%;" align="center"> 

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#1B1B1B">

<tr><td width="960" align="center" background="http://bytes.com/images/menuGradient.png" >


    <div id="newsCategoriesContainer">
<ul id="miniflex" >
 <span>
    <li><div class="newsCat" id="tabHome"><a class="active" title="">Home</a></div></li>
        <li><div class="newsCat" id="tabInformation"><a title="">Information</a></div></li>
    <li><div class="newsCat" id="tabGallery"><a>Gallery</a></div></li>
        <li><a href="/archives/" title="">Blog</a></li>
    <li><a href="/the-language-in-the-lab/" title="">About us</a></li>
    <li><a href="/demo/animated-minitabs/" title="">Sitemap</a></li>
    <li><a href="/contact/" title="">Contact us</a></li>
 </span>
</ul></div>


1111111111111111111 blablablabla

      <tr><td width="960" valign="top" align="left">
    <div style="width: 960px; position: relative;">

  <div id="newsLoading" align="center"><img src="loading_indicator.gif" title="Loading..." alt="Loading..." border="0" vspace="100" /></div>

    <div>
        <div id="newsContent"></div>
    </div>
    </div>
 </td></tr>
    </table>
</div>
</body>
</html>

loadcontent4.php 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


</head>
<body>
<?php
function stringForJavascript($in_string) {
   $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
   $str = ereg_replace('"', '\\"', $str);
   return $str;
}
switch($_GET['id']) {
 case 'tabHome':
  include('Home.html');
  break;
 case 'tabInformation':
  include('deleteme_frameContent1.html');
  break;
 case 'tabGallery':
  include('Gallery.html');
  break;
 default:
  $content = 'There was an error.';

} 
print stringForJavascript($content);
usleep(600000);
?>

</body>

</html>

Gallery.html 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />   


</head>

<body>

<a href="http://bytes.com/images/other/futureSu/side1.jpg" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/side1.jpg" height="100" width="100" /></a>

<a href="http://bytes.com/images/other/futureSu/side2.jpg" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/side2.jpg" height="100" width="100" /></a>

<a href="http://bytes.com/images/other/futureSu/final.jpg" onFocus="if(this.blur)this.blur()" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/final.jpg" height="100" width="100" /></a>

<a href="flash/SnowDrivingFail.mov" class="lightwindow" params="lightwindow_width=340,lightwindow_height=260" title="vid">mp4 vid</a>

</body>
</html>

Папка Javascript содержит: Effects.js, lightwindow.js, prototype.js, scriptaculous.js

Хорошо, если я скопирую весь код gallery.html в свою главную индексную страницу, все это будет работать, также, если я сам запускаю Gallery.html, javascript также работает ... Таким образом, при условии, что это не ошибка в галерее. HTML Изображения и т. Д. Весь контент BODY отображается правильно при вызове из index.html (только не из javascript) (я даже пытался переместить скрипты в index.html, я пытался переместить скрипты из заголовка в тело, но ни один из них не работает)

Но ошибка в DIV, содержащем изменяемый контент. И не загружать JavaScript с других страниц.

Пожалуйста, помогите кому-нибудь получить мою главную страницу для запуска внешнего javascript?

p.s. я загрузил свой сайт, надеясь облегчить вам, ребята: P.S.S. я думаю, что ошибка связана с тем, что img-ссылки на index.html не видят внешние скрипты; к изображениям не прикреплен обработчик событий. (но что мне делать, помогите мне кто-нибудь :()

index2.html (нажмите «Галерея» вверху и выберите изображение («Ошибка, страница перенаправлена ​​вместо вызова javascript из другого HTML-файла»): mediaproject-su.netne.net/index2.html

Gallery.html (чтобы доказать, что JS работает напрямую, здесь отлично работает): mediaproject-su.netne.net/Gallery.html

Ответы [ 2 ]

0 голосов
/ 21 марта 2011

Ваша страница галереи будет иметь событие, чтобы проверить, когда страница загружена, чтобы заставить ваши функции галереи работать.Даже если ajax возвращает javascript, вам нужно будет вызвать любые функции установки на измененном dom, как только он будет успешно вставлен в ваш div

0 голосов
/ 01 февраля 2011

Страница, которую вы AJAXing добавляете в свой документ, не переходит в другой фрейм, поэтому не нужно искать «.parent» для ссылки на скрипты в любом документе. То есть, если вы действительно AJAXing в iFrame, то это другая история.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...