Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jak wczytać automatycznie 5 podstron html ale nie z onClick'a do 5 osobnych divów na jednej stronie?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
marcus755
jak wczytać automatycznie 5 podstron html ale nie z onClick'a do 5 osobnych divów na jednej stronie?

Robię coś takiego, ale nie działa, gdzie tkwi błąd?


<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#tu_wczytuj_podstrona_1').load('stron1.html');
$('#tu_wczytuj_podstrona_2').load('stron2.html');
$('#tu_wczytuj_podstrona_3').load('stron3.html');
$('#tu_wczytuj_podstrona_4').load('stron4.html');
$('#tu_wczytuj_podstrona_5').load('stron5.html');
});
//]]>

</script>

<div id="tu_wczytuj_podstrona_1" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_2" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_3" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_4" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_5" style="width:100px; height:100px; display:block; float:left;"></div>
johnny_b
Cześć, a co dokładnie nie działa? Ciężko mi się odnieść do problemu, bez prezentacji całego kodu, ale problem może leżeć w np. umiejscowieniu skryptu. Jeżeli odwołujesz się w skrypcie do elementów DOM, które jeszcze nie zostały wczytane, to skrypt nie zadziała! Jeżeli Twój skrypt znajduje się w sekcji <head></head>, to spróbuj przenieść go (dosłownie) przed znacznik </body> - możliwe, że to pomoże. Jeżeli zmiana położenia skryptu nie pomogły, to proszę Cię o przesłanie kodu. Pozdrawiam

btw < type='text/javascript' > <--- mime jest niepotrzebne, a to akurat jest niby przestarzałe. Według w3c "bardziej aktualne" jest application/javascript, ale możesz też wpisywać ("niby najbardziej aktualne" wink.gif) samo <script></script> --> HTML5
mortus
Chyba za bardzo mieszasz jQuery ze standardowym JSem:
[JAVASCRIPT] pobierz, plaintext
  1. // albo JS
  2. window.onload = function() {
  3. // ciało funkcji
  4. }
  5. // albo jQuery
  6. $(document).ready(function(){
  7. // ciało funkcji
  8. });
  9. // choć tutaj można użyć jeszcze wersji skróconej, która oznacza dokładnie to samo, co wyżej
  10. $(function(){
  11. // ciało funkcji
  12. });
[JAVASCRIPT] pobierz, plaintext
marcus755
Czyli jak rozumiem, kod finalnie powinien wyglądać tak jak poniżej?
Bo coś mi nie działa.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#tu_wczytuj_podstrona_1').load('stron1.html');
$('#tu_wczytuj_podstrona_2').load('stron2.html');
$('#tu_wczytuj_podstrona_3').load('stron3.html');
$('#tu_wczytuj_podstrona_4').load('stron4.html');
$('#tu_wczytuj_podstrona_5').load('stron5.html');
});
//]]>

</script>
</head>

<body>
<div id="tu_wczytuj_podstrona_1" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_2" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_3" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_4" style="width:100px; height:100px; display:block; float:left;"></div>
<div id="tu_wczytuj_podstrona_5" style="width:100px; height:100px; display:block; float:left;"></div>

</body>
</html>
johnny_b
Cześć Marcus755!

Twój skrypt działa poprawnie, pod warunkiem, że uruchamiasz go na serwerze www. Zuplouduj sobie pliki na jakis serwer lub uruchom lokalnie serwer www, skopiuj pliki i sprawdz w przegladarce smile.gif.


Czyli z "parserem" kod działa poprawnie smile.gif.



Jedyne co udało mi się sprawdzić to na iosie/linuxie nie potrzebny jest serwer, struktura i ścieżka katalogów, plików jest prawidłowo odczytywana, przez funkcje load. Niestety nie wiem, w jaki sposób funkcja load() pobiera adres, ale uruchamiając skrypt na windowsie to nie działa (podanie ścieżki absolutnej/relatywnej też nie działa). Na pozostałych systemach (ios/linux) wyświetla się prawidłowo. Nie potrafiłem odczytać z kodu w jak load() odczytuje adres. Jeżeli ktoś zna metodę w jaki sposób load() pobiera adres dokumentu, to bardzo proszę o komentarz.

Pozdrawiam
marcus755
...ale coś wspominałeś, że można na samej js bez jquery, sprawdzałeś to może zadziała, jak zatrybi, to wrzuć skrypt js.
Poza tym, u mnie jak wrzuciłem lokalnie na serwer www, to wczytał mi stronkę, ale rozwaloną, tak jakby nie miała ostylowania, ani nie działały na niej żadne skrypty js, jquery, a odpalana ta stronka też lokalnie, ale z nie w div'ie, tylko bezpośredni po pisaniu url'a działa ze stylami i skryptami.
To jak to w końcu jest?
johnny_b
Hmm nie widzę, gdzie wspominałem o samym js wink.gif, ale pewnością się da, nigdy takiego czegoś nie pisałem, ciężko mi z głowy podać przykład, ale jak będę miał chwilę to napiszę.

Strona uruchamiana bezpośrednio, nie w dive (tak jak to opisałeś) będzie działać i tu prawdopodobnie jest "błąd" ***.


Jeżeli chodzi o rozjeżdżanie ładowanych stron, to już zależy od CSS. Sprawdź np. dla statycznych wymiarów całego diva w którym ma być ładowany plik, a ładowany plik (np. stron1.html), powinien mieć wymiary relatywnie mniejsze w stosunku do diva, w którym będzie wyświetlany oraz ustaw np. overflow: hidden w stylu diva, w którym plik ma się załadować - dla pewności, żeby się nic nie rozjeżdżało. U mnie działa.

***Jeżeli chodzi o skrypty z zewnętrznych plików to również to działa. Tylko nie próbuj ładować plików *.html, które posiadają każdorazowo strukturę <html><heda> itd. ogranicz to do samych znaczników, bez sekcji <html> <head> <body>. U mnie działa.

Daj znać czy działa. Pozdrawiam
Pawel_W
Cytat(mortus @ 15.12.2012, 22:48:39 ) *
Chyba za bardzo mieszasz jQuery ze standardowym JSem:
[JAVASCRIPT] pobierz, plaintext
  1. // albo JS
  2. window.onload = function() {
  3. // ciało funkcji
  4. }
  5. // albo jQuery
  6. $(document).ready(function(){
  7. // ciało funkcji
  8. });
  9. // choć tutaj można użyć jeszcze wersji skróconej, która oznacza dokładnie to samo, co wyżej
  10. $(function(){
  11. // ciało funkcji
  12. });
[JAVASCRIPT] pobierz, plaintext

window.onload to nie to samo co $(document).ready, mógłbyś chociaż sprawdzić zanim zaczniesz takie głupoty pisać wink.gif window.onload wykonuje się po załadowaniu elementów na stronie, a $(document).ready() po wczytaniu źródła strony
mortus
Cześć. Skrypt działa prawidłowo na Windows 7 Professional poza serwerem www. Serwer potrzebny jest wtedy, gdy chcemy pobrać kontent generowany przez jakiś skryptowy język programowania, np. PHP. Jeśli chcemy załadować pliki HTML, to nie musimy mieć uruchomionego serwera www. Co dokładnie Ci nie działa? Może Twoje podstrony mają nazwy: strona1.html, strona2.html, itd., a tutaj używasz nazw stron1.html, stron2.html, itd.? Czy te pliki podstron znajdują się w tym samym katalogu, co plik główny?

PS: Taka mała uwaga, abyś używał prawidłowej składni HTML (łącznie z deklaracją doctype, brak doctype często powoduje problemy ze skryptami, stylami, a nawet samym HTML-em). Znaczików //<![CDATA i //]]> używamy w dokumentach XHTML, ale w dokumentach HTML już niekoniecznie.

@up: Za przeproszeniem, sam mógłbyś sprawdzić, skoro już podwarzasz czyjeś stwierdzenia. Cytat za dokumentacją jQuery:
Cytat
.ready( handler ) Returns: jQuery

Description: Specify a function to execute when the DOM is fully loaded.

Co oznacza, że ready() "określa" funkcję, która ma być uruchomiona po wczytaniu całego DOM. Czy window.onload nie jest uruchamiana właśnie w tym momencie? Odpowiem, jest.

No cóż, zdaje się, że chodzi nam o to samo, ale mało precyzyjnie się wyrażamy. window.onload jest wykonywane dopiero po wczytaniu pełnej zawartości strony, czyli zarówno DOM, jak i obiektów, obrazków, itp.. Natomiast .ready() jest uruchamiana już po wczytaniu DOM. Niemniej DOM to nie źródło strony, a ja nigdzie nie użyłem stwierdzenia, że window.onload() i $(document).ready() to to samo. Pierwsze jest alternatywą w czystym JS, dla tego drugiego w jQuery, choć oczywiście i w czystym JS można "stworzyć" ekwiwalent jQuery-owej metody .ready().
johnny_b
Cytat(mortus @ 16.12.2012, 10:20:37 ) *
Serwer potrzebny jest wtedy, gdy chcemy pobrać kontent generowany przez jakiś skryptowy język programowania, np. PHP.


Tak, ale również chodzi o zasade działania funkcji fn.load w jquery - w jaki sposób tworzy ścieżkę pliku. Na windows 7 Professional tez działa u mnie bez serwera, ale tylko na -moz-, webkity np. wyswietlają mi pustą stronę.

Jeżeli chodzi o ładowanie plików zewnętrznych, sprawdź jak wyżej opisałem strukturę ładowanych plików html.
mortus
@up: To nie jest kwestia tego, w jaki sposób .load() tworzy ścieżki do pliku, a jedynie kwestia przeglądarki. webkity nie pozwalają na załadowanie w taki sposób podstron, jeśli nie mają ustawionego odpowiedniego nagłówka. Faktem jest, że serwer www, automatycznie te nagłównki dodaje, więc z poziomu serwera powinno to działać na każdej przeglądarce. Niemniej nie jest to kwestia samego jQuery, a właśnie przeglądarki.

Jednak nie jest to raczej pełna strona, która docelowo ma być puszczona w sieci, a jedynie jakiś tam banalny test. A skoro tak, to nic nie stoi na przeszkodzie, aby ten test przeprowadzić na FF. No i jak już wyżej pisałem, wszystko wygląda dobrze, a kod u mnie działa.
marcus755
ale po co mi skrypt, który będzie działał tylko na FF, zastanówcie się...
Ponawiam zapytanie, jak na bazie tego skryptu co napisałem, lub innego skryptu będę miał możliwość załadowania podstron po stronie przeglądarki do div'a, tak żeby działało to pod różnymi przeglądarkami i nie musi być w jquery może być w js?
Co do nagłówków, itp. robiłem i takie testy i nie działa...
Pawel_W
Cytat(mortus @ 16.12.2012, 10:20:37 ) *
@up: Za przeproszeniem, sam mógłbyś sprawdzić, skoro już podwarzasz czyjeś stwierdzenia. Cytat za dokumentacją jQuery:
Co oznacza, że ready() "określa" funkcję, która ma być uruchomiona po wczytaniu całego DOM. Czy window.onload nie jest uruchamiana właśnie w tym momencie? Odpowiem, jest.

Proszę: http://jsfiddle.net/TbVpR/1/

zauważ, że ready pojawia się od razu, a "window" i "loaded" równocześnie, po skończeniu wczytywania obrazka

Dodatkowo cytat z manuala js:
https://developer.mozilla.org/pl/docs/DOM/window.onload

Cytat
Zdarzenie load wywoływane jest na końcu procesu ładowania dokumentu. W momencie wystąpienia zdarzenia, DOM zawiera już wszystkie obiekty zawarte w dokumencie oraz zakończone zostało wczytywanie obrazków oraz ramek.

Istnieje także zdarzenie DOMContentLoaded (które można zarejestrować za pomocą addEventListener) występujące w momencie gdy DOM dla danej strony został zbudowany ale bez czekania na zakończenie ładowania pozostałych zasobów.


tak więc to chyba ja miałem rację wink.gif
mortus
Cytat(Pawel_W @ 16.12.2012, 16:46:02 ) *
Proszę: http://jsfiddle.net/TbVpR/1/

zauważ, że ready pojawia się od razu, a "window" i "loaded" równocześnie, po skończeniu wczytywania obrazka

Dodatkowo cytat z manuala js:
https://developer.mozilla.org/pl/docs/DOM/window.onload



tak więc to chyba ja miałem rację wink.gif

No nie do końca, bo źródło strony to nie DOM, poza tym nie miałeś racji, bo nigdzie nie użyłem stwierdzenia, że jedno i drugie to to samo. Sam sobie to dopowiedziałeś szukając jakiejś sensacji albo chcąc się popisać.

EDIT: Niemniej swój cel osiągnąłeś, no i nie będę się sprzeczał, bo sam to sprawdziłem i jest jak mówisz.
johnny_b
Cytat(marcus755 @ 16.12.2012, 15:22:10 ) *
ale po co mi skrypt, który będzie działał tylko na FF, zastanówcie się...


nie rozumiem dygresji w zestawieniu z próbą pomocy.

Napisany przez Ciebie kod u mnie działa, możliwe przyczyny zostały również opisane wyżej (np. sekcje html head body w ładowanych plikach), jednak nie odniosłeś się do tego. Twój skrypt powinien banglać. Udostępnij kod html, np. stron1.html, wtedy będziemy mogli zreplikować problem na swoich maszynach inaczej z takim podejściem się nie da. Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.