Zmiana zawartości diva bez przeładowania

[Divers02]

Witam, może mi ktoś powiedzieć jak zrobić takie coś, żeby zawartość diva się zmieniała dynamicznie?

Chodzi mi o to że jest jeden div, a więcej treści i chcę po zmianie linku żeby w tym samym divie bez przeładowania strony wyświetliła się inna informacja. Wie ktoś jak takie coś zrobić?

[bnmbb]

Jest to w miarę proste .

Musisz dołączyć JQuery czyli :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 

Dobrze teraz co dalej. Jak masz tego div'a. Najlepiej by miał jakieś Id. Dajmy na to ,że ma ID content.

 

I mamy też ten link prawda ?

Wtedy robimy nic innego jak :

<a OnClick="$('#content').load('jaki plik załadować');">Link</a>

 

Jeśli chcesz coś więcej o funkcji load :

http://api.jquery.com/load/

 

Co fajnego można powiedzieć o tej funkcji :

Nie zmieni zawartości div'a (tu content) DO PÓKI NIE WCZYTA pliku.

 

Co innego można powiedzieć :

Możesz załadować dowolny obszar lub coś może się stać jak załadujesz.

Gorzej jeśli skrypt posiada błędy składni - wtedy nie dołączy pliku. Lecz jeśli będą błędy nie składniowe plik zostanie wczytany pokazując ów błędy .

[Scolari]

Jeżeli chodzi o Jquery, zainteresuj się ajax() jest znacznie wygodniejszy (eventy, wydarzenia w przypadku błędów, konkretny format danych) i wydajniejszy niż lekko już przestarzała funkcja load.

[Divers02]

Ok dzięki obydwu panom Zrobię sobie lekturę na wieczór.

edit:

A co jeśli chcę pobierać zawartość z tego samego pliku?

[bartek93]

musisz wtedy zadać zapytanie jquery z GET'em w php

 

<a OnClick="$('#content').load('plik.php?x=abecadlo');">Link</a>

<a OnClick="$('#content').load('plik.php?x=sadlo');">Link</a>

 

if($_GET['x']="abecadlo"){
echo 'pierwszy link';
}elseif($_GET['x']="sadlo"){
echo 'drugi link';
}

 

lub bardziej profesjonalnie

 

if($_GET['x']="abecadlo") echo 'pierwszy link';
elseif($_GET['x']="sadlo") echo 'drugi link';

[Divers02]

hmm, to by mi pasowało, gdyby nie to że wczytuje mi stronę w stronie ;/

[bnmbb]

Widzisz. Dlatego jest jeszcze jedna rzecz w load - można załadować CZĘŚĆ a mianowicie :

$('#jakiesid').load('jakis plik #jakiesId2');

 

Zmiast # możesz dawać :

# - Id

. - klasa

div - Wszystkie div'y

[atr=value]

 

Z tych ,które raczej ci się przydadzą to tyle ,ale jest tego więcej.

[Divers02]

Ok dzięki.