[Ajax] Dynamic content nie ładuje skryptów

[black-design 0]

Witam, mam następujący problem. Chcę stworzyć portfolio i podzielić w nim prace na 3 zakładki. Zastosowałem dynamiczne przeładowywanie treści. W każdej zakładce są obrazki. Po przeładowaniu zakładki nie wykonuje się skrypt lightbox'a. Czy da się to jakoś naprawić? Chcę nadmienić, że nie znam się na tym kompletnie...

 

Skrypt przeładowujący

$(document).ready(function() {
   $("#nav li a").click(function() {

    $("#nav li a").removeClass('current');
    $(this).addClass('current');

    $.ajax({ url: this.href, success: function(html) {
	    $("#ajax-content").empty().append(html);
	    }
   });
   return false;
   });


   $.ajax({ url: '/templates/blackdesign2/stronywww.html', success: function(html) {
	    $("#ajax-content").empty().append(html);
   }
   });
});

 

plik, w którym znajduje się skrypt

<ul id="nav">
 <li><a href="/templates/blackdesign2/stronywww.html"><img src="/templates/blackdesign2/images/tab1.jpg" style="border: 0px;" alt="" /></a></li>
 <li><a href="/templates/blackdesign2/logotypy.html"><img src="/templates/blackdesign2/images/tab2.jpg" style="border: 0px;" alt="" /></a></li>
 <li><a href="/templates/blackdesign2/poligrafia.html"><img src="/templates/blackdesign2/images/tab3.jpg" style="border: 0px;" alt="" /></a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

 

Czytałem coś o funkcji .live() oraz .on(), ale nie znam się na tym, nie wiem jak tego użyć. Gdy próbowałem zastosować te funkcje, pliki nie przeładowywały się w div'ie "ajax-content", tylko otwierały się w nowym oknie...

[black-design 0]

No i na upartego sam doszedłem xd Dowiedziałem się, że lightbox najpierw przeładowuje stronę funkcją initLightbox(); dlatego gdy ajax zmieni treść - ten fragment zostanie pominięty przez "radar" lightbox'owy, który szuka "rel'ów". Idąc tym tropem, wymyśliłem, że muszę w skrypcie ajax'owym na nowo wywołać ten rada, po każdym przeładowaniu i powstało mi coś takiego:

 

$(document).ready(function() {
$("#nav li a").click(function() {


	$("#nav li a").removeClass('current');
	$(this).addClass('current');

	$.ajax({ url: this.href, success: function(html) {
		$("#ajax-content").empty().append(html);
		initLightbox();
		}

});
return false;
});


$.ajax({ url: '/templates/blackdesign2/stronywww.html', success: function(html) {
		$("#ajax-content").empty().append(html);
		initLightbox();
}
});
});

 

Nie wiem czy poprawnie, ale sobie poradziłem

 

PS. przepraszam za podwójny post, ale chciałem napisać rozwiązanie, a tamtego nie mogłem już edytować!

Edytowano Grudzień 29, 2012 przez black-design (zobacz historię edycji)

[Pan Kot 1535]

Grunt to samemu rozwiązać problem. Wiedza przydaje się do końca życia .

[B2zytek 0]

Dz dobry

Od kilkunastu dni borykam sie z podobnym problemem dotyczącym lightboxa.

Do wczytania podstron do div stosuję dynamiczne wczytywanie zawartości przy pomocy jquery.min v1.3.2 według następującego kodu
<a href="#" onclick="$('#warstwa2').load('polska/chronology.htm')>Kalendarz</a>.

Sama podstrona strona jest zbudowana też na 3 div-ach (d, d1,d2,d3). Div d1,d2 i 3 ton elementy pergaminowego tła strony. Wczytywana jest do środkowego div-a - class="innertube" id="warstwa2".

Wczytywanie samych stron działa bezbłędnie. Chciałbym tym lytebox-em wyświetlać po kliknięciu obrazy (jako ilustrację wyświetlającą źródło do tekstu) w tym właśnie divie (id=warstwa2).
Sama podstrona BEZ umieszczenia jej w warstwie "docelowej" - czyli id="warstwa2" - wyświetla lytebox poprawnie, natomiast gdy załaduję ją do id="warstwa2" po kliknięciu w odpowiedni link, obrazek wyświetla mi się w nowym oknie bez efektów lyteboxa, albo jako nowe okno strony gdzie mam hostingowany obrazek.

Pliki lyteboxa wstawiane czy to do strony głównej czy to do wczytywanych stron umieszczone są we właściwym miejscu. I to też nie przynosi efektu. Mamw związku z tm mam pytanie: w którym miejscu skryptu umieścić ten dodatkowy kod o jakim wspomniałes wyżej?

 

Ogólny kod podstrony
----
<div class="d">
<div class="d1"></div>
<div class="d2">
Tu wstawiona jest treść strony i miejsce skąd wywołuję tego lightboxa
</div>
<div class="d3"></div>
</div>
----

Ogólny kod samej strony gdzie ładuje się podstrona

<div id="framecontentLeft"> <!--lewa warstwa z pionowym menu-->
<div class="innertube">
<ul>
<li><a href="#" onclick="$('#warstwa2').load('polski/chronology.htm'); return event.returnValue=false">Kalendarz</a></li>
<li><a href="#" onclick="$('#warstwa2').load('polski/compl-chronology.htm'); return event.returnValue=false">Paszkowski</a></li>
<li><a href="#" class="subexpandable">Bibliografie</a>
<ul class="subcategoryitems" style="margin-left: 15px;">
<li><a href="#" onclick="$('#warstwa2').load('polski/biblia.htm'); return event.returnValue=false">Biblia</a></li>
<li><a href="#" onclick="$('#warstwa2').load('polski/zaczelo.htm'); return event.returnValue=false">Dokumenty</a></li>
</ul>
</li>
<li><a href="#" onclick="$('#warstwa2').load('polski/compl.htm'); return event.returnValue=false">Komplety</a></li>
...
...
</ul>
</div>
</div>

<div id="framecontentRight"> <!--prawa warstwa-->
<div class="innertube">
tutaj też małe menu
</div>
</div>

<div id="maincontent" style="margin:0 auto; position:fixed;">
<div class="innertube" id="warstwa2"> <!--srodkowa warstwa do wczytywania podstron-->
tutaj ładowane są podstrony / i to działa / ale lightbox nie
</div>
</div>

 

W poprzedniej wersji strony miałem ramki, menu w javascript i lytebox v3.22 działał jak należy.
Stosowałem taką metodę wywołania obrazka:
< a title="" herf="(tu 'adres' obrazka)" rel="lyteshow[orio]" >tutaj link tekstowy lub miniaturka obrazka</a> i to działało ok.

Może mnie "naprowadzisz" do rozwiązania tego problemu ?

 

[B2zytek 0]

Dz dobry

Od kilkunastu dni borykam sie z podobnym problemem dotyczącym lightboxa.

Do wczytania podstron do div stosuję dynamiczne wczytywanie zawartości przy pomocy jquery.min v1.3.2 według następującego kodu

<a href="#" onclick="$('#warstwa2').load('polska/chronology.htm')>Kalendarz</a>.

Sama podstrona strona jest zbudowana też na 3 div-ach (d, d1,d2,d3). Div d1,d2 i 3 ton elementy pergaminowego tła strony. Wczytywana jest do środkowego div-a - class="innertube" id="warstwa2".

Wczytywanie samych stron działa bezbłędnie. Chciałbym tym lytebox-em wyświetlać po kliknięciu obrazy (jako ilustrację wyświetlającą źródło do tekstu) w tym właśnie divie (id=warstwa2).

Sama podstrona BEZ umieszczenia jej w warstwie "docelowej" - czyli id="warstwa2" - wyświetla lytebox poprawnie, natomiast gdy załaduję ją do id="warstwa2" po kliknięciu w odpowiedni link, obrazek wyświetla mi się w nowym oknie bez efektów lyteboxa, albo jako nowe okno strony gdzie mam hostingowany obrazek.

Pliki lyteboxa wstawiane czy to do strony głównej czy to do wczytywanych stron umieszczone są we właściwym miejscu. I to też nie przynosi efektu. Mamw związku z tm mam pytanie: w którym miejscu skryptu umieścić ten dodatkowy kod o jakim wspomniałes wyżej?

 

Ogólny kod podstrony

----

<div class="d">

<div class="d1"></div>

<div class="d2">

Tu wstawiona jest treść strony i miejsce skąd wywołuję tego lightboxa

</div>

<div class="d3"></div>

</div>

----

 

Ogólny kod samej strony gdzie ładuje się podstrona

 

<div id="framecontentLeft"> <!--lewa warstwa z pionowym menu-->

<div class="innertube">

<ul>

<li><a href="#" onclick="$('#warstwa2').load('polski/chronology.htm'); return event.returnValue=false">Kalendarz</a></li>

<li><a href="#" onclick="$('#warstwa2').load('polski/compl-chronology.htm'); return event.returnValue=false">Paszkowski</a></li>

<li><a href="#" class="subexpandable">Bibliografie</a>

<ul class="subcategoryitems" style="margin-left: 15px;">

<li><a href="#" onclick="$('#warstwa2').load('polski/biblia.htm'); return event.returnValue=false">Biblia</a></li>

<li><a href="#" onclick="$('#warstwa2').load('polski/zaczelo.htm'); return event.returnValue=false">Dokumenty</a></li>

</ul>

</li>

<li><a href="#" onclick="$('#warstwa2').load('polski/compl.htm'); return event.returnValue=false">Komplety</a></li>

...

...

</ul>

</div>

</div>

 

<div id="framecontentRight"> <!--prawa warstwa-->

<div class="innertube">

tutaj też małe menu

</div>

</div>

 

<div id="maincontent" style="margin:0 auto; position:fixed;">

<div class="innertube" id="warstwa2"> <!--srodkowa warstwa do wczytywania podstron-->

tutaj ładowane są podstrony / i to działa / ale lightbox nie

</div>

</div>

 

W poprzedniej wersji strony miałem ramki, menu w javascript i lytebox v3.22 działał jak należy.

Stosowałem taką metodę wywołania obrazka:

< a title="" herf="(tu 'adres' obrazka)" rel="lyteshow[orio]" >tutaj link tekstowy lub miniaturka obrazka</a> i to działało ok.

Może mnie "naprowadzisz" do rozwiązania tego problemu ?

--

Dodatkowe wyjaśnienie.

Ładowane podstrony są zapisane jako .htm, poz ashoutboxem( w php)