Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Odwolanie do strony wyswietlanej bez przeladowania
Forum PHP.pl > Forum > XML, AJAX > AJAX
kubatur0
Witam, otoz chcialbym sie dowiedziec o jedna rzecz. Ostatnio zrobilem na jednej stronie (powiedzmy 1.html) wyswietlanie kolejnych podstron w divie "content" bez przeladowania. Teraz chcialbym ze strony glownej stworzyc hiperlacze do tej podstrony 1.html i zeby w tym oknie "content" wyswietlila mi sie zawartosc odpowiednia dla tego hiperlacza. Czyli np klikam na "Regulamin" i odnosi mnie do strony 1.html zakladki regulamin. W jaki sposob wykonac cos takiego ? Dzieki z gory za pomoc.
ziqzaq
Do przeczytania: link i link2.
Działający przykład dość znanej strony winksmiley.jpg : google.pl (wyszukaj sobie jakąś frazę i zobacz jak wygląda link z włączonym i wyłączonym JS).

// Edit. Tak mi się wydawało, że były już takie tematy na forum winksmiley.jpg
kubatur0
no wlasnie... tzn moze ja wytlumacze dokladniej tongue.gif

moja strone glowna mam podzielona na naglowek, menu, tresc, stopke...
w menu mam nawigacje poprzez id i w tresci mam tylko includowane kolejne podstrony.
Jedna taka podstrona jest pomoc ktora ma zrobione przy pomocy ajaxa menu po lewej stronie i po prawo taka jakby kolejna tresc (powiedzmy pomoc_content)
i teraz w zaleznoci od tego co klikne w tym menu po lewej stronie to zmienia sie to pomoc_content. Ale.. w tym moim poczatkowym menu na gorze mam odnosnik ktory rowniez znajduje sie w tym menu po lewej stronie i chcialbym zeby ten odnosnik z menu na gorze przenosil do odpowiedniego linka (tego z menu po lewej stronie)
Kurcze moze za bardzo lopatologicznie tongue.gif ale tak chyba bylo najlatwiej tongue.gif
ziqzaq
No właśnie... czyli w stronie "regulamin" masz np. 5 zakładek i każda ma określone id i to id przekazujesz w url czyli dokładnie to o czym pisałem.
Przykład?
jquery ui tabs:
http://www.stilbuero.de/jquery/tabs_3/#fragment-1
http://www.stilbuero.de/jquery/tabs_3/#fragment-3
Już jaśniej się nie da tongue.gif
kubatur0
No dobra ale ciagle mi sie wydaje ze to nie to tongue.gif

to jest glowny skrypt

  1. <script defer="defer">
  2. XMLHttpObj=false;
  3. if(window.XMLHttpRequest)
  4. {
  5. XMLHttpObj=new XMLHttpRequest();
  6. }
  7. else
  8. if(window.ActiveXObject)
  9. {
  10. XMLHttpObj=new ActiveXObject('Microsoft.XMLHTTP');
  11. }
  12. function Load(targetId,Datasource)
  13. {
  14. if(XMLHttpObj)
  15. {
  16. XMLHttpObj.open('GET',Datasource);
  17. XMLHttpObj.onreadystatechange=function()
  18. {
  19. if((XMLHttpObj.readyState==4)&&(XMLHttpObj.status==200))
  20. {
  21. var obj=document.getElementById(targetId);
  22. obj.innerHTML=XMLHttpObj.responseText;
  23. }
  24. }
  25. XMLHttpObj.send(null);
  26. }
  27. }
  28. </script>


a tu jest funkcja wywolujaca odpowiednie strony na danej postronie (w tym wypadku pomoc.html)

  1. java script:Load('content_pomoc_srodek','regulamin.html');"


Teraz chcialbym z zewnetrznej strony. Powiedzmy ze strony glownej nak torej jest link "blabla" zeby ten link mnie odniosl do tej funkcji powyzej na podstronie "pomoc.html"
ziqzaq
Cytat
Teraz chcialbym z zewnetrznej strony. Powiedzmy ze strony glownej nak torej jest link "blabla" zeby ten link mnie odniosl do tej funkcji powyzej na podstronie "pomoc.html"

Przeczytałem chyba z dwadzieścia razy powyższy tekst i chyba skumałem o co ci chodzi.
Przykładowo.
Główny plik:
  1. <div id="main-menu">
  2. menu
  3. <ul>
  4. <li><a href="" onclick="return getData('main-content', 'glowna.html', '');">glowna</a></li>
  5. <li><a href="" onclick="return getData('main-content', 'o-nas.html', '');">o nas</a></li>
  6. <li><a href="" onclick="return getData('main-content', 'pomoc.html', 'pomoc1');">pomoc</a></li>
  7. <li><a href="" onclick="return getData('main-content', 'pomoc.html', 'pomoc2');">pomoc &gt; pomoc2</a></li>
  8. </ul>
  9. </div>
  10. <div id="main-content">
  11. </div>

Każdy plik html w wywołaniu funkcji getData ma jakąś treść nas interesuje tylko pomoc.html:
  1. Treść "pomoc".
  2. <div id="pomoc-menu">
  3. <a href="" onclick="return getData('subpage-content', 'pomoc1.html', '');">pomoc1</a> |
  4. <a href="" onclick="return getData('subpage-content', 'pomoc2.html', '');">pomoc2</a>
  5. </div>
  6. <div id="subpage-content">
  7. </div>

I poprostu dodaje argument do funkcji pobierającej stronę.
[JAVASCRIPT] pobierz, plaintext
  1. var xhr = false;
  2. function getXhr() {
  3. if (window.XMLHttpRequest) {
  4. xhr = new XMLHttpRequest ();
  5. }else if (window.AtiveXObject) {
  6. xhr = new ActiveXObject("Microsoft.XMLHTTP");
  7. }
  8. }
  9. function getData(dest, url, subpage) {
  10. getXhr();
  11. var el = document.getElementById(dest);
  12. if(xhr) {
  13. xhr.onreadystatechange = function () {
  14. if (xhr.readyState == 4 ) {
  15. if (xhr.status == 200) {
  16. el.innerHTML = xhr.responseText;
  17. if(subpage.length > 0) {
  18. loadSubpage(subpage);
  19. }
  20. }
  21. else {
  22. el.innerHTML = 'Nie uzyskano danych';
  23. }
  24. }
  25. else {
  26. el.innerHTML = "Loading...";
  27. }
  28. }
  29. xhr.open("GET", url, true);
  30. xhr.send(null);
  31. }
  32. return false;
  33. }
  34. function loadSubpage(subpage){
  35. subpage = subpage + '.html';
  36. getData('subpage-content', subpage, '');
  37. }
[JAVASCRIPT] pobierz, plaintext

Nie jestem specem od js, więc może da się to zrobić ładniej. W każdym razie powyższy kod działa na FF i Operze (IE nie mam pod ręką).
kubatur0
Dobra nie wiem ... tongue.gif pogubilem sie biggrin.gif poczytam kurs ajaxa i sprobuje sam to rozkminic ... bo to co Ty mi napisales to tez mi sie wydaje ze to nie to ... :/
tongue.gif wiem natret ze mnie biggrin.gif
no ale kurcze ...
jest strona

Strona Glowna | Regulamin | blabla | Pomoc

po wcisnieciu pomoc przenosi do podstrony pomoc.html na ktorej to stronie operuje juz ajaxem ( korzystam z nawigacji przez switcha) id=1 = 2 itp
Teraz na tej podstronie pojawia sie menu po lewej strone.
-blabla1
-b;lab;a2
-Regulamin
-blabla4

Po wcisnieciu ktoregokolwiek z nich to po prawo od nich wyswietla sie tresc danego blabla bez przeladowania.
I teraz tutaj korzystam z tego co napisalem wyrzej z tej funkcji java script: Load... (domyslnie wyswietlane jest pierwsze z listy czyli w tym wypadku "blabla1")

I teraz to o co mi chodzi biggrin.gif
Na stronie glownej byl sobie do wyboru regulamin procz pozostalych opcji. Tenze regulamin chcialbym zeby przenosil do strony tej co pomoc.html tylko ze zamiast domyslnego "blabla1" wyswietlal "Regulamin".
Bardziej obrazowo nie pokaze o co mi chodzi biggrin.gif
ziqzaq
Sie normalnie nie dogadamy smile.gif
Czyli wychodzi na to, że na początku zrozumiałem dobrze.
Dajesz zdecydowanie za mało kodu i za dużo próbujesz wyjaśniać swoimi słowami.

Na razie masz tak (tak to zrozumiałem):
1. Klik na link pomoc.html i przechodzimy do pomoc.html
2. Ładuje się dokument i wywołujesz Load("kontener", "blabla1") - czyli ładujesz domyślną treść.

Chcesz:
1. Klik na link np. pomoc.html#regulamin i przechodzimy do pomoc.html
2. Ładuje się pomoc.html
3. Jest hash?
3a. Tak. Ładujemy treść na podstawie hasha np. Load('kontener', 'regulamin.html')
3b. Nie. Ładujemy domyślną treść pomocy.

Zakładam (bo tego nie napisałeś), że treść pobierana ajaxem to zwykłe pliki html a nie php.
Dajesz sobie na głównej stronie link "pomoc.html#regulamin". Link ten przekieruje na stronę "pomoc.html".
Przy ładowaniu domyślnej zawartości pomocy sprawdzasz czy window.location.hash.length > 0. Jeśli tak to przekazujesz do funkcji Load() parametr window.location.hash + '.html' zamiast np. "blabla1.html".
kubatur0
  1. <div id="tresc">
  2.  
  3. <?php
  4. switch($_GET['id'])
  5. {
  6. case "1": { include('glowna.html');break; }
  7. case "2": { include('register.html');break; }
  8. case "3": { include('pomoc.html');break; }
  9. default: { include('glowna.html');break; }
  10. }
  11. ?>
  12.  
  13. </div>


tak wyglada moj fragment pliku index.php

Menu wyglada tak ze jest wywolywane index.php?id=1 id=2 ....

Pomoc.html wyglada tak jak dalem wyzej cyzliskrypt js + ajax, i wywolanie funkcji Load ladujaca strony.i Teraz nie wiem jak zrobic odnosnik zamiast przechodzic do oddzielnej strony register.html (case "2": { include('register.html');break; }) zeby przechodzilo do pomoc.html z podstrona zalaczona z rejestracja. Cos wspomniales o hashowaniu... cos czytalem o tym ale nie korzystalem tongue.gif to moze mnie na cos naprowadzic tez tongue.gif
ziqzaq
Czyli masz ogólny szablon w index.php (nagłówek, menu, treść i stopka) a pliki wczytywane idą do "treści".
Dzielisz sobie pomoc.html na: pomoc_menu.html + pomoc_dzial.html. Chodzi o to aby składać stronę "pomoc" z menu i treści pomocy.
Czyli mamy przykładowo:
pomoc_menu.html <- tu tylko menu
pomoc_regulamin.html <- tu tylko treść
pomoc_domyslna_tresc.html <- j.w.
pomoc_faq.html <- j.w.

Teraz twój index:
  1. <div id="tresc">
  2. <?php
  3. switch($_GET['id'])
  4. {
  5. case "1":
  6. include('glowna.html');
  7. break;
  8. case "2":
  9. include('register.html');
  10. break;
  11. case "3":
  12. include('pomoc_menu.html');
  13. echo '<div id="content_pomoc_srodek">';
  14. include('pomoc_domyslna_tresc.html');
  15. echo '</div>';
  16. break;
  17. case "4":
  18. include('pomoc_menu.html');
  19. echo '<div id="content_pomoc_srodek">';
  20. include('pomoc_regulamin.html');
  21. echo '</div>';
  22. break;
  23. default:
  24. include('glowna.html');
  25. break;
  26. }
  27. ?>
  28. </div>

Oczywiście kod javascript w menu pomocy zostaje aby można było ładować treść via ajax.
Tym sposobem masz banalny sposób na odwołanie się do regulaminu w pomocy poprzez link: index.html?id=4.
Ogólnie chodzi o to aby powtarzalne elementy podzielić sobie aby w razie potrzeby można było je sobie zaincludować.
Nie ma sensu bawić się tu we wczytywanie treści javascriptem skoro łatwo można zrobić to php'em.
kubatur0
zrobilem wszystko tak jak mowiles, oddzielilem pomoc_menu itp. W moim indexie tylko


  1. case "5":{ include('components/pomoc_menu.html');
  2. echo'<div id="pomoc_content">';
  3. echo'<div class="content_pomoc_gora"></div>';
  4. echo'<div class="content_pomoc_prawy"></div>';
  5. echo '<div id="content_pomoc_srodek">';
  6. include('onas.html');
  7. echo '</div>';
  8. echo'<div class="content_pomoc_lewy"></div>';
  9. echo'<div class="content_pomoc_dol"></div>';
  10. echo'</div>';
  11. break;}


musze wszystkie fragmenty srodka wpisac bo inaczej tak jakby Tworzyl nowy srodek pod tym ktory byl.
I teraz za to jest problem... bo w moim pliku w ktorym jest menu mam te skrypty Load ktore odnosza sie do content_pomoc_srodek ktory dla pliku pomoc_menu.html jest niewidoczne... bo jak tam wloze te same divy to zrobia mi sie 2 okienka z ta grafika.
ziqzaq
Cytat
[...]content_pomoc_srodek ktory dla pliku pomoc_menu.html jest niewidoczne[...]

Przecież generujesz jeden dokument złączając inne, jak zaincludujesz po kolei plik_menu.html i jakas_tresc.html to będą w jednym dokumencie.
Poza tym jakie skrypty? Przecież tam powinieneś mieć tylko wywołania funkcji Load() na zdarzeniu onclick elementów menu. To co pisałem, że "kod javascript zostaje[...]" to chodziło tylko o wywołania funkcji js, reszta powinna być w sekcji head dokumentu.
kubatur0
no to ja teraz mam tak:
w pliku index.php mam takie cuśki

  1. case "5":{ include_once('components/pomoc_menu.html');
  2. echo'<div id="pomoc_content">';
  3. echo'<div class="content_pomoc_gora"></div>';
  4. echo'<div class="content_pomoc_prawy"></div>';
  5. echo '<div id="content_pomoc_srodek">';
  6. include('onas.html');
  7. echo '</div>';
  8. echo'<div class="content_pomoc_lewy"></div>';
  9. echo'<div class="content_pomoc_dol"></div>';
  10. echo'</div>';
  11. break;}



W pliku pomoc_menu.html mam takie wywolania i caly skrypt javy
  1. <li><a href="java script:Load('content_pomoc_srodek','onas.html');">O nas</a></li>



no i w pozostalych plikach includowanych mam odpowiednio jakas tresc... i teraz wlasnie nie wiem do konca bo po kliknieciu z tegop pomoc_menu w onas to normalnie sie uruchamia a jak chce regulamin to nic...

Dobra poprobuje jesxzcze samemu... Dzieki wielkie za pomoc tongue.gif
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.