Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX]Menu bez przeładowania strony
Zyggmunt
post 30.05.2009, 17:29:03
Post #1





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 28.04.2009

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

Witam. Chciałem zrobić stronę, która po wciśnięciu jakiegoś linka z menu wczyta jakiś dokument bez przeładowania całego dokumentu. Użyłem w tym celu AJAX'a, lecz nie mam pojęciu czemu skrypt, który napisałem nie działa:

[XML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl" dir="ltr">
  3.  <head>
  4.  <title>Moja pierwsza strona w XHTML</title>
  5.  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
  6.  <meta http-equiv="Content-Language" content="pl"/>
  7.  
  8.  <style type="text/css">
  9.  #container 
  10.  {
  11.  width: 804px;
  12.  height: 600px;
  13.  margin: 1em auto;
  14.  border: 1px solid red;
  15.  overflow: hidden;
  16.  }
  17.  #menu
  18.  {
  19.  float: left;
  20.  width: 300px;
  21.  border: 1px solid red;
  22.  height: 600px;
  23.  }
  24.  
  25.  #content
  26.  {
  27.  float: right;
  28.  width: 500px;
  29.  height: 600px;
  30.  border: 1px solid red;
  31.  }
  32.  
  33.  </style>
  34.  
  35.  <script type="text/javascript">
  36.  var r;
  37.  var e;
  38.  
  39.  function onClickFunction(link,id)
  40.  {
  41.  if (r = getXMLHttpRequest()) {
  42.  e = document.getElementById(id);
  43.  r = new HMLHttpRequest();
  44.  r.open('GET',link);
  45.  r.onreadystatechange = odbierzDane;
  46.  r.send(null);
  47.  }
  48.  }
  49.  
  50.  function odbierzDane()
  51.  {
  52.  if(r.readyState == 4){
  53.  if(r.status == 200 || r.status == 304){
  54.  e.innerHTML = r.responseText;
  55.  }
  56.  }
  57.  }
  58.  </script>
  59.  
  60.  </head>
  61.  <body>
  62.  <div id="container">
  63.  
  64.  <div id="menu">
  65.  <ul>
  66.  <li><a onclick="onClickFunction('text.xhtml','content');" href="#">Link1</a></li>
  67.  <li><a onclick="" href="#">Link2</a></li>
  68.  </ul>
  69.  </div>
  70.  
  71.  <div id="content">
  72.  
  73.  </div>
  74.  
  75.  </div>
  76.  </body>
  77.  </html>
[XML] pobierz, plaintext


Dokument, który ma się wczytać to:

[XML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2.  
  3.  <p>Jakis text</p>
[XML] pobierz, plaintext



Proszę o pomoc.

Ten post edytował Zyggmunt 30.05.2009, 21:45:54
Go to the top of the page
+Quote Post
skowron-line
post 30.05.2009, 17:32:40
Post #2





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

Ostatnio dla kogoś z forum napisałem
http://skowronline.pl/j/b.php
zobacz w źródło i sobie skopiuj jak będzie Ci pasować.


--------------------
I'm so fast that last night I turned off the light switch in my hotel room and was in bed before the room was dark - Muhammad Ali.
Peg jeżeli chcesz uprawiać sex to dzieci muszą wyjść, a jeżeli chcesz żeby był dobry ty też musisz wyjść - Al Bundy.

QueryBuilder, Mootools.net, bbcradio1::MistaJam
http://www.phpbench.com/
Go to the top of the page
+Quote Post
Zyggmunt
post 30.05.2009, 21:42:26
Post #3





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 28.04.2009

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

Chodzi mi raczej o to aby się nauczyć po części AJAX'a, dlatego pytam co jest źle w kodzie, który sam napisałem, ponieważ nie mam pojęcia dlaczego to nie działa.

P.s. A może trzeba zaimplementować bibliotekę ajax.js ? Nie wiem już w końcu jak to jest.

Ten post edytował Zyggmunt 30.05.2009, 22:18:28
Go to the top of the page
+Quote Post
luniak
post 1.06.2009, 12:13:07
Post #4





Grupa: Zarejestrowani
Postów: 171
Pomógł: 36
Dołączył: 12.01.2008
Skąd: Puszcza Mariańska

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

Ja osobiście polecam bibliotekę AdvAjax smile.gif

tą samą której użył poprzednik w swoim przykładzie


--------------------
Jeżeli ktoś na forum Ci pomógł, możesz mu podziękować klikając w opcje "Pomógł" pod jego postem!
--------------------
Go to the top of the page
+Quote Post
kamil4u
post 1.06.2009, 14:39:26
Post #5





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

a) po co chcesz tak zrobić? Rozwiązanie to ma same wady - zalet nie widzę...
b ) Jak już chcesz się nauczyć AJAX-a to: http://www.xul.fr/en-xml-ajax.html
c) IMO jak Ajax będzie Ci potrzebny tylko w tym wypadku nie używaj biblioteki smile.gif

Ten post edytował kamil4u 1.06.2009, 14:39:37


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
skowron-line
post 1.06.2009, 14:50:27
Post #6





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

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

Wyższość korzystania z bibliotek jest taka że odchodzi Ci testowanie swojego kodu w rożnych przeglądarkach ktoś już zadbało to.
A biblioteka advAJAX jest na tyle lekka że nie obciąży działania aplikacji nie to co jQuery lub inne.


--------------------
I'm so fast that last night I turned off the light switch in my hotel room and was in bed before the room was dark - Muhammad Ali.
Peg jeżeli chcesz uprawiać sex to dzieci muszą wyjść, a jeżeli chcesz żeby był dobry ty też musisz wyjść - Al Bundy.

QueryBuilder, Mootools.net, bbcradio1::MistaJam
http://www.phpbench.com/
Go to the top of the page
+Quote Post
kamil4u
post 1.06.2009, 14:57:21
Post #7





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Cytat
Wyższość korzystania z bibliotek jest taka że odchodzi Ci testowanie swojego kodu w rożnych przeglądarkach ktoś już zadbało to.
A biblioteka advAJAX jest na tyle lekka że nie obciąży działania aplikacji nie to co jQuery lub inne.
Tak, ale kod jest dłuższy i wolniejszy(wykonywanie operacji, które w wielu przypadkach są niepotrzebne) (oczywiście jak ktoś umie już dobrze programować, dla początkujących to też dobra nauka tongue.gif ) - ale jest dział już na ten temat gdzieś to nie róbmy OT smile.gif ja wyrażam tylko swoją opinię


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Zyggmunt
post 1.06.2009, 16:05:25
Post #8





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 28.04.2009

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

Roumiem, ale tak właściwie to co jest źle w tym przykładzie ? Czemu całość nie działa ?
Go to the top of the page
+Quote Post
kamil4u
post 1.06.2009, 16:50:02
Post #9





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Dałem Ci kurs - przeczytaj go smile.gif :
Kod
if (r = getXMLHttpRequest()) {

Nie ma czegoś takiego jak getXMLHttpRequest() - a jak jest to nie w FF - dalej nie sprawdzałem smile.gif
Naucz się debugować:
- powstawiaj alerty i sprawdzaj, który się nie wyświetla (pomiędzy 2 alertami(ostatnim wyświetlonym, a niewyświetlonym) najprawdopodobniej jest błąd)
- korzystaj z konsoli błędów

Aha Twój kod nie będzie działał pod IE - przeczytaj kurs

Ten post edytował kamil4u 1.06.2009, 16:52:11


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Zyggmunt
post 6.06.2009, 19:46:24
Post #10





Grupa: Zarejestrowani
Postów: 53
Pomógł: 0
Dołączył: 28.04.2009

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

Witam. Mam skrypt:

[XML] pobierz, plaintext 
  1. function submitForm(ktora,naw1,naw2)
  2.     { 
  3.         var req = null; 
  4.  
  5.         
  6.         if(window.XMLHttpRequest)
  7.             req = new XMLHttpRequest(); 
  8.         else if (window.ActiveXObject)
  9.             req  = new ActiveXObject(Microsoft.XMLHTTP); 
  10.                 
  11.                 var e,n;
  12.                 
  13.                 n1 = document.getElementById("nawigacja1");
  14.                 n2 = document.getElementById("nawigacja2");
  15.                 
  16.                 if(naw1 == "none")
  17.                 n1.style.display = "none";
  18.                 if(naw1 == "block")
  19.                 n1.style.display = "block";
  20.                 
  21.                 if(naw2 == "none")
  22.                 n2.style.display = "none";
  23.                 if(naw2 == "block")
  24.                 n2.style.display = "block";
  25.                 
  26.                 e = document.getElementById("szablony");
  27.                 e.innerHTML = "<img id='ladowanie' alt='ladowanie' src='pliki/images/loading.gif' />";
  28.         req.onreadystatechange = function()
  29.         { 
  30.             
  31.             if(req.readyState == 4)
  32.             {
  33.                 if(req.status == 200)
  34.                 {
  35.                     e.innerHTML = req.responseText;    
  36.                 }    
  37.                 else    
  38.                 {
  39.                     e.innerHTML="Error I can't get more galery";
  40.                 }    
  41.             } 
  42.         }; 
  43.         req.open("GET", "pliki/"+ktora, true); 
  44.         
  45.         req.send(null); 
  46.     }
[XML] pobierz, plaintext


Wszystko działa poprawnie, lecz po kliknięciu przycisku cała strona przerzucana jest na początek. Co zrobić aby została w miejscu ? Próbowałem sposobu z tablicami i również ten sam efekt. Możliwe jest też ukrywanie warstw, ale niezbyt mi się to podoba, ponieważ cały czas musi się wczytywać cała strona z każdą warstwą.

P.s. poza tym w Validatorze wyskakuje błąd o następującej treści:

document type does not allow element "img" here …ie' src='pliki/images/loading.gif' />";


The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Go to the top of the page
+Quote Post
« Następny starszy · AJAX · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 23.07.2025 - 21:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn