Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [php/ajax] Ładowanie tekstu bez przeładowania strony
patigo
post 7.05.2008, 22:16:38
Post #1





Grupa: Zarejestrowani
Postów: 132
Pomógł: 0
Dołączył: 4.02.2005

Ostrzeżenie: (0%)
-----


Witam,

Kiedyś czytałem artykuł o tym jak zrobić pewein trick. Chodzi o to że planuję zrobić prostą stronkę (coś w rodzaju wizytówki), gdzie będzie proste menu - jakieś 4 pozycje. Chodzi o to żeby po kliknięciu jednej z opcji strona się nie przeładowywała ale załadował jedynie tekst tekst przyporządkowany dla danej opcji z menu.

Szukałem na forum ale jakoś nie natrafiłem na konkrety, być może źle szukałem dlatego też proszę o pomoc.

Z góry dziękuję.

Ten post edytował ayeo 7.05.2008, 23:37:22
Powód edycji: dodanie tagów
Go to the top of the page
+Quote Post
PiXel2.0
post 7.05.2008, 22:26:22
Post #2





Grupa: Zarejestrowani
Postów: 110
Pomógł: 13
Dołączył: 16.03.2007
Skąd: Łódź

Ostrzeżenie: (0%)
-----


Mozna to zrobic na dwa sposoby, ale jedynie przy uzyciu JavaScript.

Pierwszy sposob polega na tym, ze do przegladarki zostaja wyslane wszystkie tresci dla kazdej opcji i sa domyslnie umieszczone w ukrytych elementach:
  1. display:none;

A po wybraniu odpowiedniej opcji uruchamia sie funkcja JavaScript i odslania odpowiedni element.

Drugi sposob polega na tym, ze po wybraniu opcji rowniez uruchamia sie funkcja JavaScript, ale nie odslania ona tresci zawartych w dokumencie tylko pobiera je z serwera w czasie rzeczywistym.
Poczytaj o technologii AJAX.

Pierwszy sposob jest znacznie prostszy i mysle, ze w Twoim przypadku bedzie wystarczajacy.

Ten post edytował PiXel2.0 7.05.2008, 22:28:11
Go to the top of the page
+Quote Post
patigo
post 7.05.2008, 22:33:55
Post #3





Grupa: Zarejestrowani
Postów: 132
Pomógł: 0
Dołączył: 4.02.2005

Ostrzeżenie: (0%)
-----


A czy jakiś prosty przykład w JS mógłby ktoś umieścić? Jeżeli chodzi o JS to jestem kompletna noga.
Go to the top of the page
+Quote Post
Piniek
post 7.05.2008, 22:41:00
Post #4





Grupa: Przyjaciele php.pl
Postów: 463
Pomógł: 49
Dołączył: 27.12.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Proszę o dodanie tagu do tematu.


--------------------
Go to the top of the page
+Quote Post
patigo
post 7.05.2008, 22:43:45
Post #5





Grupa: Zarejestrowani
Postów: 132
Pomógł: 0
Dołączył: 4.02.2005

Ostrzeżenie: (0%)
-----


Cytat(Piniek @ 7.05.2008, 21:41:00 ) *
Proszę o dodanie tagu do tematu.

Jakiego tagu, o co chodzi??
Go to the top of the page
+Quote Post
Piniek
post 7.05.2008, 22:47:48
Post #6





Grupa: Przyjaciele php.pl
Postów: 463
Pomógł: 49
Dołączył: 27.12.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Zapraszam do zapoznania sie z regulaminem tego subforum http://forum.php.pl/Tematyka_i_zasady_panu...ole_t42815.html


--------------------
Go to the top of the page
+Quote Post
PiXel2.0
post 7.05.2008, 22:49:58
Post #7





Grupa: Zarejestrowani
Postów: 110
Pomógł: 13
Dołączył: 16.03.2007
Skąd: Łódź

Ostrzeżenie: (0%)
-----


No coz, tez jestem prawie zero z JavaScript, ale wyklepalem w pospiechu takie cos...
  1. <script language="JavaScript" type="text/javascript">
  2. function pokaz(pokaz_id){
  3. var elementy = document.getElementsByTagName('div');
  4.  
  5. for(i = 0; i < elementy.length; i++){
  6. var element_id = elementy[i].getAttribute('id');
  7. if(element_id >= 1 && element_id <= 4){
  8. if(element_id == pokaz_id)
  9. elementy[i].style.display = 'block';
  10. else
  11. elementy[i].style.display = 'none';
  12. }
  13. }
  14. }
  15. <div id="1" style="display:none;">to jest pierwszy element</div>
  16. <div id="2" style="display:none;">to jest drugi element</div>
  17. <div id="3" style="display:none;">to jest trzeci element</div>
  18. <div id="4" style="display:none;">to jest czwarty element</div>
  19. <input type="button" value="pokaz pierwszy" onclick="pokaz(1)" />
  20. <input type="button" value="pokaz drugi" onclick="pokaz(2)" />
  21. <input type="button" value="pokaz trzeci" onclick="pokaz(3)" />
  22. <input type="button" value="pokaz czwarty" onclick="pokaz(4)" />
Go to the top of the page
+Quote Post
patigo
post 7.05.2008, 22:53:54
Post #8





Grupa: Zarejestrowani
Postów: 132
Pomógł: 0
Dołączył: 4.02.2005

Ostrzeżenie: (0%)
-----


No wiecie trudno jest mi dodać tag do tematu który nie wiem jak ugryźć. Jestem ledwo amator w PHP, JS, XML, CSS, i inne są mi niemal całkiem opce.

Wielkie dzięki.

Moje kolejne pytanko jako kolejny krok to:

W jaki sposób mogę teraz zmienić pozycję wyswietlanych tekstów w dowolnej części strony??
Go to the top of the page
+Quote Post
PiXel2.0
post 7.05.2008, 23:10:41
Post #9





Grupa: Zarejestrowani
Postów: 110
Pomógł: 13
Dołączył: 16.03.2007
Skąd: Łódź

Ostrzeżenie: (0%)
-----


Cytat(patigo @ 7.05.2008, 23:53:54 ) *
W jaki sposób mogę teraz zmienić pozycję wyswietlanych tekstów w dowolnej części strony??


Umiesc div'y z trescia w innym miejscu to tam bedzie sie pokazywala ich zawartosc.
Go to the top of the page
+Quote Post
patigo
post 7.05.2008, 23:13:27
Post #10





Grupa: Zarejestrowani
Postów: 132
Pomógł: 0
Dołączył: 4.02.2005

Ostrzeżenie: (0%)
-----


Dzięki wielkie!
Go to the top of the page
+Quote Post
Johnas
post 4.09.2011, 23:22:37
Post #11





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----


Ten kod pokazuje mi na początku wszystkie divy na raz dopiero po kliknięciu w jakiś odnośnik menu znikają inne divy. Jak zrobić aby na starcie był div o id 1?


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 7.05.2025 - 08:15