il caricamento di javascript, Ajax caricato pagina

io sono stato, il mio problema.. ho un index.html la pagina che ha un prettyPhoto.js script. ho alcuni link nel menu sul mio index.html. uno di questi è “video gallery” ora carico un video gallery tramite Ajax e si carica bene. ma il problema è che non posso ottenere prettyPhoto.js per lavorare in esterno caricato il file. Qualcuno sa come fare?

Index.html guarda come questo (si prega di notare che ho rimosso inutili codice per renderlo leggibile)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>The Footy Lounge</title>
    <!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>           <script type="text/javascript" language="javascript">
            function loadXMLDoc(url,containerid){
                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|| window.location.href.indexOf("http")==-1)
                        {
                        document.getElementById(containerid).innerHTML=xmlhttp.responseText;
                        }
                      }
                xmlhttp.open('GET',url,true);
                xmlhttp.send();
            }

            </script>
           <!-- End Scripts -->
           <!--Stylesheets-->
           <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
           <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
           <link rel="stylesheet" href="css/articles.css" type="text/css" media="all" />
    <!--[if lte IE 6]><link  href="css/ie6.css" type="text/css" media="all" /><![endif]-->
    <!-- End Stylesheets-->
</head>
<body>
<div id="navigation">
            <div class="cl">&nbsp;</div>
          <p align="right"><ul>
              <li><a href="#">news &amp; events</a></li>
              <li><a href="#">photo gallery</a></li>
              <li><a href="javascript:loadXMLDoc('ajaxfiles/video_gallery.html','mainPage')">video gallery</a></li>
              <li><a href="#">community</a></li>
              <li><a href="#">schedules</a></li>
          </ul></p>
</div>
<div id="mainPage">
</div> 
<!-- this is required for prettyPhoto to work -->
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>
</body>

video_gallery.html guarda come questo

<!-- tried adding this, didn't work -->
<!-- <script src="../js/jquery.prettyPhoto.js" type="text/javascript"></script> -->
<div class="article-box">
<a href="images/featured-side-1.jpg?ajax=true" rel="prettyphoto">Image test</a>
</div>
<!-- I tried adding this, it didnt work -->
<!-- <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script> -->

Sto ovviamente facendo qualcosa di sbagliato qui. E io non riesco a trovare tutte le risposte su Google, perché io non ho la più pallida idea di cosa cercare. ho provato a cercare per il “caricamento di JavaScript, ajax pagina” e tutte le possibili varianti che non riuscivo a pensare.

EDIT:
Ok ho capito di lavoro. grazie alle persone che hanno risposto.
ecco il codice.

<script type="text/javascript" language="javascript">
   $(document).ready(function(){
    $("#video_gallery").click(function(){
      $("#mainPage").load('ajaxfiles/video_gallery.html',function (text, statusText){
        if (statusText === "success")
              {
           $("a[rel^='prettyPhoto']").prettyPhoto();
            <!-- target.find("a[rel^='prettyPhoto']").prettyPhoto(); --> //this didnt work for me so i used the above one. firebug gave me some error about target.find
               }
        });
    });
});
</script>

OriginaleL’autore Tanmay | 2011-12-12

3 Replies
  1. 4

    Come haynar detto, il contenuto viene caricato dopo prettyPhoto è stato inizializzato. Per risolvere questo problema, è necessario chiamare il prettyPhoto funzione di inizializzazione dopo il caricamento, il contenuto.

    Per rendere la vostra vita molto più facile (e il codice molto pulito), modificare il loadXMLDoc funzione per sfruttare jQuery AJAX integrato servizi, ossia load():

    function loadContent (url, container) {  //remember, you're not loading XML
        var target = $(container);
        target.load(url, function (text, statusText) {
            if (statusText === "success") {
                target.find("a[rel^='prettyPhoto']").prettyPhoto();
            }
        });
    }

    load inserisce automaticamente il codice HTML in un contenitore per voi, e la funzione di richiamata nel codice viene eseguito e inizializza prettyPhoto per eventuali nuovi elementi che sono stati aggiunti al documento.

    Non dimenticare di modificare i riferimenti al loadXMLDoc per loadContent, quest’ultimo è un nome migliore quando non è in realtà il caricamento di un documento XML.

    Ho capito di lavoro. il mio codice è un po ‘ diverso, ma l’idea di base è stata da voi. Grazie mille. Controllare modifica il codice è inserito. fa la stessa cosa, in realtà. Grazie
    Ho usato questo codice ma non funziona per me.Mi potete dare qualche suggerimento dove abbiamo bisogno di mettere loadcontent() funzione e dove le vogliamo chiamare questa funzione? Grazie in anticipo.

    OriginaleL’autore Andy E

  2. 1

    Il documento pronto è già verificato, quindi non è possibile chiamare di nuovo, è sufficiente rimuovere la $(document).ready(), ma mantenere il $("a[rel^='prettyPhoto']").prettyPhoto();

    Se io sono di destra, Javascript viene caricato quando si aggiunge come un tag script (senza commentare).

    In modo che il risultato wil essere:

    <script src="../js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <div class="article-box">
        <a href="images/featured-side-1.jpg?ajax=true" rel="prettyphoto">Image test</a>
    </div>
    <script type="text/javascript" charset="utf-8">
        $("a[rel^='prettyPhoto']").prettyPhoto();
    </script>
    Sono abbastanza sicuro che il codice definito all’interno di un documento pronto’ funzione jquery viene licenziato immediatamente se la pagina è già caricato. Ma ancora, io sono d’accordo, questo sembra un problema del codice che viene generato prima c’è l’esecuzione di contenuto su
    che non hanno funzionato, dovrebbe essere!
    JQuery prettyphoto è già nel vostro index.html? Perché non includere una volta di più nella vostra Ajax? Questo potrebbe causare alcuni errori JS.
    ok, ho rimosso. anche io volevo sapere se ho bisogno di usare percorsi relativi alla mia pagina ajax o la pagina in cui l’ajax caricamento della pagina?
    e ancora non funziona. 🙁

    OriginaleL’autore Niels

  3. 1

    Sono in grado di spiegare il motivo per cui non funziona, ma non posso aiutarti con la codifica perche ‘io non sono familiarità con JS lib. JS lib eseguire quando viene caricata la pagina solo quelli, così, quando dopo che si sta creando nuovi oggetti che esso non può determinare il nuovo una volta per associare eventi appropriati e di effetti. È necessario eseguire la vostra galleria funzione di inizializzazione ancora una volta dopo il caricamento di una nuova galleria elementi.

    grazie per la risposta. ho provato a rimuovere il .isready ma il problema persiste.
    è necessario non solo per rimuovere ready metodo, ma anche di chiamare la funzione di inizializzazione del vostro JS lib ogni volta dopo il recupero dei dati dall’AJAX. Aggiungere $("a[rel^='prettyPhoto']").prettyPhoto(); per la funzione di callback di AJAX
    sì, ho fatto anche questo. io.e ora la mia pagina ajax si presenta come nella precedente risposta inviato da niels senza il tag script. Senza fortuna ancora
    scusate, per errore, non è necessario rimuovere ready, basta aggiungere ajax richiamata
    Ho bisogno di avere familiarità con particolare lib per darvi un più efficiente consigli

    OriginaleL’autore haynar

Lascia un commento