Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dynamiczne chodzenie po stronie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Kuba707
Witam.
Chcę zrobić stronę bardziej dynamiczną. Dokładniej to chcę by się dynamicznie ładowały podstrony. To znaczy wpisuję link swojej strony, ładuje się cała strona i tam sobie chodzę po menu (odnośniki jakieś typu oferta, kontakt, galeria, itp) i gdy kliknę w ten odnośnik to nie chcę ładować tej samej strony tylko z parametrem GET "?page=galeria", tylko inaczej.
Po kliknięciu w odnośnik, javascript by zmienił link w przeglądarce (żeby użytkownik mógł dać link do danej części strony komuś innemu) a następnie AJAX by ładował treść danej podstrony do divu z treścią. Generalnie wiem jak to zrobić, ale jak to zrobić dobrze? Użyć jQuery do tego aby wywołać AJAXA, załadować treść do konteneru na stronie? Chcę zrobić coś takiego jak ma Youtube gdy się wybiera film z kanału. No i w ogóle się zastanawiam czy to robić. Strona będzie małego projektu, ma to być wizytówka pewnego teamu rowerowego, będą tam pewne informacje, zdjęcia.
vokiel
Zrób, jak najbardziej, tylko zadbaj o to, aby wszystko działało bez tych bajerów. Czyli np tworzysz link do ?page=galeria, przechwytujesz to w javascript i obsługujesz ajaxem. Jeśli js z jakiegoś powodu nie zadziała, to zwykły link tak.
Kuba707
Hmm, rozumiem ale jak to zrobić? Nie potrafię sobie wyobrazić jak ten kod ma wyglądać. Jeżeli by były gdzieś powiedzmy w stopce albo nad stroną buttony, jeden "Strona statyczna", drugi "Strona dynamiczna" to wiadomo jak zrobić. Ale jak napisać kod który się wykona jeżeli javascript tego nie obsłuży? Jeżeli chodzi o tworzenie szablonów to wiadomo, dajemy kod CSS, mozilla go obsługuje ale IE nie, więc dajemy jeszcze jakiś starszy atrybut który na pewno działa pod IE i... zrobi to co ma zrobić. Ale jak zrobić w tym przypadku?


Edit: Chociaż hmm. Chyba mam pewien pomysł. Gdy AJAX wczytuje stronę to może nie wczytać jej, zwróci pewną wartość, wtedy mogę przekierować na link do którego chcemy iść, ale z jakąś dodatkową wartością. Wtedy gdy zostajemy przekierowani na tą stronę, to skrypt PHP jeśli zobaczy tą dodatkową wartość (a akurat w tym wypadku zobaczy) to od razu wczyta zawartość, nie przy pomocy jQuery + ajaxa. Hmm, ciężko mi to teraz poskładać myśl.. ale coś świta tongue.gif.
vokiel
To skoro już świta to postaram się rozjaśnić smile.gif
Przyjmijmy dla przykładu, że masz po prostu jakiś tekst wyświetlany w głównym oknie. W zależności od podstrony jest pobierany inny tekst.

Masz sobie w php napisany skrypt, który serwuje strony. Skrypt ten pobiera sobie dane, które ma wyświetlić i w zależności od rodzaju żądania: jeśli jest ajax'em, to serwuje sam content, treść tej zmieniającej się części, jeśli nie, to serwuje całość.

Czyli przykładowo, w uproszczeniu
  1. <?php
  2. $sites = array('start','o-nas','kontakt');
  3. if (!empty($_GET['site']) && in_array($_GET['site'],$sites){
  4. $content=$_GET['site'].'.php';
  5. }else{
  6. $content='start.php';
  7. }
  8.  
  9. if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
  10. // druga opcja:
  11. //if (empty($_GET['ajax']) || $_GET['ajax']!='true'){
  12. include 'header.php';
  13. include 'menu.php';
  14. include $content;
  15. include 'footer.php';
  16. }else{
  17. include $content;
  18. }
  19. ?>

Teraz menu generujesz na zasadzie:
  1. <a href="index.php?site=start" rel="start" title="START">START</a>
  2. <a href="index.php?site=o-nas" rel="o-nas" title="O NAS">O NAS</a>
  3. <a href="index.php?site=kontakt" rel="kontakt" title="KONTAKT">KONTAKT</a>

A całość strony
  1. <div id="header"><h1>Header</h1></div>
  2. <div id="wrapper">
  3. <div id="menu"><!-- tutaj te menu --></div>
  4. <div id="content"><!-- tutaj zostanie wklejona zawartość ajaxem --></div>
  5. </div>
  6. <div id="footer">Footer</div>
  7. </body>
  8. </html>

No i na koniec troszeczkę jQuery:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function(){
  2. $('#menu a').click(function(e){
  3. e.preventDefault();
  4. var href = $(this).attr('href');
  5. $('#content').load(href); /* może być też $.ajax w celu obsłużenia błędów czy przesłania większej ilości parametrów */
  6. /* dla drugiego przykładu w php wywołanie wyglądałoby: */
  7. var sitename = $(this).attr('rel);
  8. $.get('index.php',
  9. { site: sitename, ajax: 'true' },
  10. function(data){
  11. $('#content').html(data);
  12. });
  13. });
  14. });
[JAVASCRIPT] pobierz, plaintext


Wszystko pisane z palca więc mogą być błędy.
Kuba707
Hmmm ciekawe rozwiązanie, rozumiem teraz o co chodzi smile.gif Tylko że na http://www.php.net/manual/en/reserved.variables.server.php nie ma 'HTTP_X_REQUESTED_WITH', co z tym?
vokiel
Patrz: druga opcja
Kuba707
No dobra, doskonale rozumiem o co chodzi winksmiley.jpg Poradzę sobie z napisaniem tego kodu od nowa, dzięki winksmiley.jpg
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.