konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Witam. Jako, że jestem raczej początkujący w dziedzinie JS (korzystając tylko jak muszę i to zazwyczaj z gotowych rozwiązań lekko naginanych do własnych potrzeb) to mam pytanie.
Na stronie (nie dostępna jeszcze online) mam użytą funkcję Ajax do wczytywania treści wybranego DIVa. Funkcja to ajaxGetFile (gotowy plik i skrypt do użycia). Samo wczytywanie treści nie stanowi problemu. Ów pojawia się gdy chcę użyć we wczytywanej treści takich rzeczy jak np. CoinSlider oraz ChillBox.
Slider sie rozpada na czynniki pierwsze wyświetlane jeden pod drugim a ChilBox (coś w stylu lightbox tylko bez prototype) nie działa w ogóle.
Te same skrypty ładowane jako treść głównej strony (z pliku index) działają jak należy.
Może ktoś podpowiedzieć co może być przyczyną takowego zachowania i jak to można rozwiązać ?
JQuery jest jako noConflict.

Plik ajaxgetfile.js
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}


Tak wyglądają linki do ładowania treści
javascript:ajaxpage('include/aktualnosci.php','main-frame'
Olga Grabek

Olga Grabek Senior Software
Engineer

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

łojezusicku, a po co używasz ajaxGetFile jak w jQuery masz funkcje load?

load()

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Muszę się z nią zapoznać. Akurat jak pisałem jestem raczej dość zielony w kwestii JS. A w tym przypadku da się poprawić jakoś kod aby działało jak trzeba? Pewnie jak przyswoję wiedzę to będę kombinował nad zmianą tego, lecz na razie chciałbym uruchomić.

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Hmmm. Już wiem jak użyć load(). Pytanie, co teraz zrobić aby można było używać tych samych skryptów ? Nadal (przy ładowaniu przez JQuery) nie działają niestety ;/

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

No to kolejny przydatny link:getScript()

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Hmm. Ok, widzę jej zastosowanie globalnie. Lecz jak to połączyć z funkcją load() ? Tego w dokumentacji nie widzę właśnie ;/.
Load() pracuje jako link (onClick) a nie wiem jak wykorzystać .getScript() do uruchomienia skryptów w wczytanej treści.
Dla przykładu ChillBox działa podobnie jak lightbox (nie korzysta np z biblioteki prototype i oprócz jquery wymaga tylko jednego kilko kilowego pliku).
Wyświetlanie grafiki w nim się określa własnie tak jak w lightbox-ie, parametrem rel="".
Jeżeli dodaje getScript() do treści wczytywanej to nic nie daje (chyba, że mam wczytać ponownie komplet JS a nie tylko jego plik).
Może trochę nieskładnie piszę ale ciężko mi wprost wyjaśnić o co mi dokładnie chodzi zwłaszcza znając kiepsko JS.
No i pytanie czy getScript() da się jakoś połączyć z linkiem ?

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Powiedzmy, że masz sobie link
<a href="" onclick="clickMe()">cokolwiek</a>

klikniecie spowoduje wywołanie czegoś takiego (piszę na sucho):
function clickMe() {
$('#main-frame').load('include/aktualnosci.php', function() {
$.getScript('skrypt.js');
});
}

gdzie skrypt.js to jest po prostu skrypt, który normalnie (bez ajaxa) wstawiłbyś np. do onload dokumentu.

Skrypty zawarte wewnątrz aktualnosci.php nie wykonają się same po pobraniu tego ajaxem. Musisz je własnie dociągnąć i uruchomić przez getScript().
Tu dobry przykład czemu javascript powtykany w stronę zamiast w oddzielnym pliku jest zły ;)Krzysztof Kawa edytował(a) ten post dnia 07.07.11 o godzinie 20:03

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Hmm... W sumie nie dało zamierzonego efektu.
W FF, Operze i Chrome udało się uzyskać częściowy efekt dopisując kilka linijek kodu do ładowanej zawartości. Efekt tylko częściowy ponieważ zadziałał slider ale nie zadziałał w żaden sposób ChillBox.
W IE i Safari natomiast nie pomaga żadna opcja, nie przyjmują nawet formatowania treści poprawnie...

Kod JS powklejany na stronie mam tylko tam gdzie konieczny, na na głównej gdzie odpowiada za animacje oraz od slidera bo tak było w jego dokumentacji.
Pliki dołączam z osobnego katalogu
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.js"></script>
<script type="text/javascript" src="js/jquery.effects.core.js"></script>
<script type="text/javascript" src="js/jquery.effects.blind.js"></script>
<script type="text/javascript" src="js/jquery.effects.scale.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>


Najgorsze, że nie wiem jak to zmusić do działania poprawnie - zwłaszcza ChillBox-a, slider ma być na głównej ( chciałem tylko ją też ładować z zewnątrz co by tam można było wrócić xD).

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Na pewno potrzebujesz tych wszystkich skryptów? Pomyśl o optymalizacji...

Szczególnie to mnie zastanawia:

<script type="text/javascript" src="js/coin-slider.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Ogólnie metoda, która częściowo działa to include z PHP,, dołączam plik z listingiem wymaganych skryptów (dopasowane do podstrony). Takie rozwiązanie działa w Chrome, FF i Operze ładnie (muszę tylko dodać animację wczytywania itp). W IE nie działa względem ChillBox-a, a w Safari natomiast działa ChillBox a rozpada się Coin Slider.

Oczywiście na stronie startowej działa i jedno i drugie jak należy w każdej przeglądarce.Marcin Matuszewski edytował(a) ten post dnia 08.07.11 o godzinie 10:48

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

ChillBox odpadł. Zastąpi go ColorBox.
Udało się uruchomić Slider lecz jest jeden problem.
Mianowicie wczytuje się przy pierwszym ładowaniu pliku( load()).
Po ponownym załadowaniu treści (załadowanie innej w ten sam div) przestaje działać. Rozpada się ponownie.

Co do optymalizacji - sporoa cześć plików js odpadła, kilka rzeczy z treści zostało wyprowadzone do plików (funkcje do slidera i ColorBox-a np.) a pliki skompresowane.

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Może ładujesz kilka razy te same skrypty po każdym load()? Pamiętaj, że one wywołują się w tym samym kontekście strony. Może slider nie lubi się inicjalizować więcej niż raz?

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Hmm.
W czasie wczytywania strony ładuje się standardowo:
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>


Slider w pliku ładowanym do diwa ma doczepione tylko jquery i swój plik js.
Przy wczytywaniu samego pliku slidera bez jquery nie działał wcale.
W jego miejsce wczytuje treść zawierającą jednego DIVa i czysty tekst z <p> (specjalnie aby nie doczytywać nic więcej).
Po ponownym przejściu (wczytaniu ponownie pliku ze sliderem) slider się rozpada na kawałki.
W Safari np. slider ogólnie się rozpada.
Całość obrze działa jak jest ładowana jako treść index (bez onLoad itp, jest to fragment treści pliku).

Co ciekawe ta sama metoda nie pozwala nawet przez chwile skorzystać z ColorBox-a.

Wiem, że smęcę i nudzę tematem ale chciałbym dojść do tego co może konkretnie powodować problem i co robić aby go później już nie mieć.
Niestety do literatury tematycznej dostępu nie mam i szukam pomocy na forum.
Dla większości programistów mających doświadczenie z JS i JQuery takie rzeczy mogą się wydawać śmieszne. Niestety dla mnie nie. Uczę się na przykładach i dopasowując istniejący kod do potrzeb.
Pozdrawiam i dzięki za porady otrzymane jak i przyszłe.
Krzysztof Safjanowski

Krzysztof Safjanowski Senior JavaScript
Lead Developer

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

@Marcin, zdradzisz link do przykładowego środowiska, na którym występuje problem – czy mamy odtwarzać je na podstawie Twoich wypowiedzi?

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Witam ponownie.
Jako przykładowe środowisko wystarczyć powinno to (zasada działania ta sama, tylko mniej śmieci dotyczących efektów slideToggle itp):
http://mnmkolektyw.pl/demox/
Jest tu tylko minimum.
Slidera nie ma - jest coś ala slider tylko i to jest nie istotne.
Chodzi głównie o problem z działaniem ColorBox-a.
Z głównej działa, z podstrony już nie....Marcin Matuszewski edytował(a) ten post dnia 10.07.11 o godzinie 22:45

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

A jeszcze jedna sprawa.
Po załadowaniu zawartości do diva ( z zewnętrznego pliku przez np. .html+.get lub load()) nie zmienia się zawartość kodu strony (np patrząc przez pokaż źródło w przeglądarce). Czy to może mieć wpływ na problem z działaniem skryptów typu lightbox itp ?
Jeżeli tak to czy można coś na to poradzić nie tracąc dynamicznego wczytywania treści (bez przeładowywania strony) ?
Pozdrawiam.Marcin Matuszewski edytował(a) ten post dnia 12.07.11 o godzinie 12:22

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

"Pokaż źródło" pokazuje treść jaką otrzymałeś od serwera, nie tę zmodyfikowaną.

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Czy ma to wpływ na działanie skryptów ? Bo trochę mnie to męczy a chciałbym jakoś tą opcję uruchomić.
I jeszcze jedno pytanie. Czy można dodać statyczne url do dynamicznej treści ?

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Podgląd strony to podgląd tego co przyszło z serwera po zapytaniu do jej adresu. Nie ma to nic do skryptów wykonywanych potem lokalnie i ewentualnie modyfikujących tą treść.

Url się nie dodaje. Wysyłasz zapytanie do serwera o pewien adres np. http://przyklad.com/glowna i serwer zgodnie z ustawionymi regułami zwraca ci jakąś zawartość związaną z tym adresem np. uruchamia parser php na pliku index.php i przesyła Ci wynikowy html. Jeśli w tym html'u są jakieś skrypty js, które dociągają coś dynamicznie to to się dzieje już potem i nie ma związku z początkowym adresem strony o który wysłałeś zapytanie na początku.

Trzeba pamiętać też o SEO. Strony na których wszystko ładuje się przez ajax nie są dobre. Roboty (nie wszystkie, ale większość) nie interasuje js i co on robi - czy dodaje treść do strony czy koloruje literki.

konto usunięte

Temat: Ajax (ajaxGetFile) oraz pluginy JQuery

Rozumiem.
To miało być portfolio tylko. Bardziej do pokazania niż wyszukiwania.
O url pytałem ponieważ trafiłem gdzieś swego czasu na wzmiankę o JS i linkach do Ajaxa działających właśnie z dynamicznym wczytywaniem treści i mapą strony pod indeksowanie.

A czy da się coś zrobić np. aby lightbox czy inny wynalazek (na jQuery) działał z wczytanej treści ?
Bo np. galeria może być nawet z pominięciem SEO i nie będzie to strata duża w tym przypadku. Testowałem już różne metody wczytywania .get, .post, load, .html itp. Dochodzi do tego getScript (kombinowałem nawet z różną kolejnością wykonywania zadań) i też nie udało się zmusić tych wtyczek do działania.
Jeżeli nawet by nie zostało to wykorzystane to wiedza nabyta się zawsze przyda.
Pozdrawiam.

Następna dyskusja:

jQuery - ajax - przekazanie...




Wyślij zaproszenie do