Forum PHP.pl > Dynamiczne chodzenie po stronie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Dynamiczne chodzenie po stronie

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Kuba707

14.01.2011, 18:52:58

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

14.01.2011, 20:53:53

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

14.01.2011, 21:28:28

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

vokiel

14.01.2011, 22:11:17

To skoro już świta to postaram się rozjaśnić

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

[PHP] pobierz, plaintext 
<?php
$sites = array('start','o-nas','kontakt');
if (!empty($_GET['site']) && in_array($_GET['site'],$sites){
    $content=$_GET['site'].'.php';
}else{
    $content='start.php';
}
 
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
// druga opcja:
//if (empty($_GET['ajax']) || $_GET['ajax']!='true'){
    include 'header.php';
    include 'menu.php';
    include $content;
    include 'footer.php';
}else{
    include $content;
}
?>
[PHP] pobierz, plaintext

Teraz menu generujesz na zasadzie:

[HTML] pobierz, plaintext 
<a href="index.php?site=start" rel="start" title="START">START</a>
<a href="index.php?site=o-nas" rel="o-nas" title="O NAS">O NAS</a>
<a href="index.php?site=kontakt" rel="kontakt" title="KONTAKT">KONTAKT</a>
[HTML] pobierz, plaintext

A całość strony

[HTML] pobierz, plaintext 
<html><head></head><body>
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
    <div id="menu"><!-- tutaj te menu --></div>
    <div id="content"><!-- tutaj zostanie wklejona zawartość ajaxem --></div>
</div>
<div id="footer">Footer</div>
</body>
</html>
[HTML] pobierz, plaintext

No i na koniec troszeczkę jQuery:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
    $('#menu a').click(function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $('#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 */
        /* dla drugiego przykładu w php wywołanie wyglądałoby: */
        var sitename = $(this).attr('rel);
        $.get('index.php', 
            { site: sitename, ajax: 'true' },
            function(data){
                $('#content').html(data);
            });
        });
});
[JAVASCRIPT] pobierz, plaintext

Wszystko pisane z palca więc mogą być błędy.

Kuba707

14.01.2011, 23:43:03

Hmmm ciekawe rozwiązanie, rozumiem teraz o co chodzi

Tylko że na http://www.php.net/manual/en/reserved.variables.server.php nie ma 'HTTP_X_REQUESTED_WITH', co z tym?

vokiel

15.01.2011, 15:22:58

Patrz: druga opcja

Kuba707

15.01.2011, 16:09:37

No dobra, doskonale rozumiem o co chodzi

Poradzę sobie z napisaniem tego kodu od nowa, dzięki

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.