Jquery и AJAX не работают с заголовками Javascript - PullRequest
Новая
       9

Jquery и AJAX не работают с заголовками Javascript

0 голосов
/ 31 октября 2011

Я загружаю HTML с AJAX, который зависит от заголовков Javascript.

У меня есть слайд-шоу с поддержкой jquery на главной странице и галерея на основе jquery на следующей странице.

Мое слайд-шоу jquery работает, но когда я нажимаю на ссылку loadXMLDoc, галерея jquery не работает.

Вот моя домашняя страница со слайд-шоу jquery: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photo Design</title>
<script type="text/javascript">
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.body.innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","ajax_info.php",true);
        xmlhttp.send();
    }
</script>

<link rel="stylesheet" type="text/css" href="style.css"/>
<script type='text/javascript' src='js/jquery.js'></script>


//Gallery javascript stuff
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

//Slideshow javascript stuff
<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>       
<script src="js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>  
<script type='text/javascript' src='js/jquery.aviaSlider.min.js'></script>
<script type='text/javascript' src='js/custom.min.js'></script>

<script type="text/javascript">
    $(document).ready(function() {

        $("a[rel=example_group]").fancybox({
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'autoScale'         : true,
            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                return '';
            }
        });
    });
</script>
 </head>
 <body>
<a href="javascript:loadXMLDoc()">Gallery</a>
<div id="content">
    <div id="centered">
        <ul class='aviaslider' id="frontpage-slider">
            <li><img src="photos/home/1.jpg" alt=""/></li>
            <li><img src="photos/home/2.jpg" alt=""/></li>
            <li><img src="photos/home/3.jpg" alt=""/></li>
            <li><img src="photos/home/4.jpg" alt=""/></li>
        </ul>
    </div>
</div>
    </body>
   </html>

Вот моя страница ajax_info.php: 

    <div id="content">
    <div id="gallery">
        <div class="thumbnails">
                <a rel="example_group" href="photos/seniors/10big.jpg"><img alt="" src="photos/seniors/10thumb.jpg"/></a>
                <a rel="example_group" href="photos/seniors/11big.jpg"><img alt="" src="photos/seniors/11thumb.jpg"/></a>
                <a rel="example_group" href="photos/seniors/12big.jpg"><img alt="" src="photos/seniors/12thumb.jpg"/></a>
                <a rel="example_group" href="photos/seniors/13big.jpg"><img alt="" src="photos/seniors/13thumb.jpg"/></a>
                <a rel="example_group" href="photos/seniors/14big.jpg"><img alt="" src="photos/seniors/14thumb.jpg"/></a>
        </div>
    </div>  
</div>

1 Ответ

0 голосов
/ 31 октября 2011

В случае, если вы застряли, вот jQuery-версия вашей функции loadXMLDoc: 

<script type="text/javascript">
  function loadXMLDoc() {
    $.ajax({
      url: 'ajax_info.php',
      type: 'get',
      success: function (html) {
        $("body").html(html);
      }
    });
  }
</script>

и вот документация для функции $. Ajax .

...