Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PROBLEM] Strona bez przeładowania
Forum PHP.pl > Forum > XML, AJAX
Erbeen
28.03.2013, 08:08:52
Witam.
Mam problem odnośnie AJAX'a.

Moja strona internetowa wygląda tak: http://screenshooter.net/0358939/28_03_2013__07_58_08

Mam zamiar umieścić muzykę w tle, ale jest problem, ponieważ po każdym przejściu na inną podstronę muzyka gra od początku, a to jest co najmniej nie przyjemne dla ucha.
Ktoś mi podpowiedział, aby użyć do tego AJAX'a. Zamierzałem pobrac ajax ze strony "producenta" i wmontować to w swoją stronę, ale niestety tak jak widać tu (link) menu do zmieniania treści jest wbudowane z zawartość. Mój problem polega na tym, jak zrobić kiedy menu mam na zewnątrz. Tak jak na obrazku: http://screenshooter.net/0358939/28_03_2013__08_05_45
StrefaPi
28.03.2013, 08:39:43
AJAX nie ma producenta, to technologia asynchronicznego "tworzenia stron"...
Rozwiązań Twojego problemu jest wiele...
Poczytaj jest sporo o tym...

Ja nie widzę problemu na Twojej stronie (przynajmniej w zrzucie ekranu), nie ma totalnie znaczenia gdzie znajduje się menu... Fajnie jakbyś zamieszczał kod i problem w kodzie zaznaczał...

Ale: zobacz bibliotekę jQuery http://jquery.com/ poczytaj tam o funkcjach html() http://api.jquery.com/html/, i/lub http://api.jquery.com/jQuery.get/...
Erbeen
28.03.2013, 08:42:39
Mógłbys mnie nakierowac na jakieś jedno rozwiązanie z tych wielu aby strona nie przeładowywała sie cała?
StrefaPi
28.03.2013, 08:44:36
Podałem jedno rozwiązanie...

jQuery + get (najlepsze w Twoim wypadku)
Erbeen
28.03.2013, 08:48:10 
[HTML] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  2.     <head>
  3.             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.             <title>Ajaxy Demo - Why?</title>
  5.             <link type="text/css" rel="stylesheet" href="css/main.css" />
  6.  
  7.  
  8.             <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
  9.             <script src="js/ajaxy.js" type="text/javascript"></script>
  10.  
  11.     </head>
  12.     <body>
  13.         <div id="container">
  14.  
  15.             <h1>Why Ajaxy?</h1>
  16.  
  17.             <ul id="nav">
  18.                 <li><a href="index.html">Ajaxy</a></li>
  19.                 <li><a href="how-it-works.html">How Ajaxy Works</a></li>
  20.                 <li><a href="why.html">Why?</a></li>
  21.             </ul>
  22.  
  23.             <div id="content">
  24.                 TEKST TEKST
  25.             </div>  
  26.  
  27.         </div>
  28.  
  29.     </body>
  30. </html>
[HTML] pobierz, plaintext



Czyli nie ma znaczenia czy "<ul id="nav">" jest wewnątrz content czy na zewnątrz, a ajax itak bedzie poprawdzie zaczytywał z której podstrony ma pobierac zawartość?
StrefaPi
28.03.2013, 08:51:26
Cytat
Czyli nie ma znaczenia czy "<ul id="nav">" jest wewnątrz content czy na zewnątrz, a ajax itak bedzie poprawdzie zaczytywał z której podstrony ma pobierac zawartość?


Ogólnie jak #nav będzie wewnątrz #content to będzie podmieniony, więc musi być poza...
Erbeen
28.03.2013, 09:32:51
Cytat(StrefaPi @ 28.03.2013, 08:51:26 ) *
Ogólnie jak #nav będzie wewnątrz #content to będzie podmieniony, więc musi być poza...


Niewiem czy dobrze rozumiem. #nav jest teraz wewnatrz #content i wszystko ładnie działa. Ale kiedy bedę wstawiał to do mojej strony manu czyli #nav bedzie musiało być na zewnątrz #content. Czy wtedy też bedzie łądnie działać?
StrefaPi
28.03.2013, 10:36:16
wszystko zależy od tego jaką masz budowę strony, podaj normalny kod Swojej strony to dostaniesz konkretną odpowiedź...

wszystko co umieścisz w elemencie, który będzie się podmieniał... (w przypadku kodu powyżej w #content) to przy zmianie zostanie to podmienione na inną zawartość... czyli jeżeli element zawiera podelementy to po "załadowaniu" zawartości nie będą one już dostępne...
Erbeen
28.03.2013, 10:59:35
Jest to kod podstrony "O mnie". Miejsce które chce aby było podmieniane bez przeładowania strony to zawartość <div class="strona"> a menu znajduje sie w <div class="menu">


Kod
<!--/* Autorem grafiki, kodu XHTML i CSS jest:
    Kamil "Erbeen" Świątkowski        */
/* Wszelkie prawa zastrzezone!
    Usuwanie autora - ZABRONIONE!        */
-->        

<head>
            <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
            <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <link rel="stylesheet" type="text/css" href="css/glowny.css" />
                <title>A b o u t _ m e ?</title>
            
            
            <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
    <script src="js/prototype.js" type="text/javascript"></script>
        <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
            
</head>
    
  
<body>
<div class="naglowek">
            <div class="logo"></div>
            <div class="kontakt">
                    <div class="kontakt_tytul"><img src="images/znajdz.png"/></div>
                    <a href="http://www.youtube.com/user/KaSwiatkowski"><img src="images/youtube.png" alt="youtube" /></a>
                    <a href="http://steamcommunity.com/profiles/76561198054832641"><img src="images/steam.png" alt="steam" width="24" height="24"/></a>
                    <a href="https://www.facebook.com/kamil.swiatkowski.56"><img src="images/fb.png" alt="facebook" width="24" height="24"/></a>
                    <a href="mailto:kaswiatkowski@gmail.com"><img src="images/mail.png" alt="mail" width="24" height="24"/></a>
                    <a href="skype:kaswiatkowski?userinfo"><img src="images/skype.png" alt="skype" width="24" height="24"/></a>
                    <a href="gg:6393393"><img src="images/gg.png" alt="gadugadu" width="24" height="24"/></a>
            </div>
</div>


    
<div class="zawartosc">
    <div class="zawartosc_gora"></div>
    <div class="zawartosc_srodek">
                    <div class="zawartosc_lewa">
                            <div class="menu">
                                    <ul>
                                    <li><a href="index.html"><img src="images/menu/home.gif" onmouseover="this.src = 'images/menu/homeh.gif'" onmouseout="this.src = 'images/menu/home.gif'" alt="Home"/></a></li>
                                    <li><a href="omnie.html"><img src="images/menu/omnieh.gif" onmouseover="this.src = 'images/menu/omnieh.gif'" onmouseout="this.src = 'images/menu/omnieh.gif'" alt="O mnie"/></a></li>
                                    <li><a href="portfolio.html"><img src="images/menu/portfolio.gif" onmouseover="this.src = 'images/menu/portfolioh.gif'" onmouseout="this.src = 'images/menu/portfolio.gif'" alt="Portfolio"/></a></li>
                                    <li><a href="download.html"><img src="images/menu/download.gif" onmouseover="this.src = 'images/menu/downloadh.gif'" onmouseout="this.src = 'images/menu/download.gif'" alt="Portfolio"/></a></li>
                                    <li><a href="kontakt.html"><img src="images/menu/kontakt.gif" onmouseover="this.src = 'images/menu/kontakth.gif'" onmouseout="this.src = 'images/menu/kontakt.gif'" alt="Kontakt"/></a></li>
                                    </ul>            
                                    </div>
                            <div class="umiejetnosci">
                <div style="overflow: hidden;">
                                        <div class="umiejetnosci_tytul"><img src="images/umiejetnosci.png" /></div>
                                </div>
                                        <div class="umiejetnosci_kropki">xHTML 3/5<br /><img src="images/kolka/3.png" alt="4 kółka" style="margin-top: 5px;"/></div>
                                        <div class="umiejetnosci_kropki">CSS 2/5<br /><img src="images/kolka/2.png" alt="4 kółka" style="margin-top: 5px;"/></div>
                                        <div class="umiejetnosci_kropki">Grafika 2/5<br /><img src="images/kolka/2.png" alt="3 kółka" style="margin-top: 5px;"/></div>
                                        <div class="umiejetnosci_kropki">PHP 1/5<br /><img src="images/kolka/1.png" alt="2 kółka" style="margin-top: 5px;"/></div>
                            </div>
                    </div>
                    <div class="zawartosc_prawa">
                            
                                    <div class="naglowek"><h2> </h2></div>
                            <div class="strona">
                                        <img src="images/moje_zdj.png" alt="zdjecie" align="left" class="zdjecie"/><br>
                                        <img src="images/about_me.png" /> </br></br>
                                        Jo! Nazywam się Kamil Świątkowski, w sieci ukrywam się pod pseudonimem <strong>Erbeen</strong>.
                                        Pochodzę z miałej miejscowości w woj. Łódzkim. Leży ona na wschód od miasta Kutno.
                                        <p>Na co dzień chodzę do II klasy Zespołu Szkół Nr 3 im. Władysława Grabskiego w Kutnie o profilu Informatycznym.
                                        <p>Naukę pisania stron internetowych rozpocząłem stosunkowo niedawno, nie licząc oczywiście zabawy w gimnazjum.
                                        Książką, która pomogła mi opanować podstawy była elektroniczna wersja "XHTML, CSS i JavaScript - pierwsza pomoc" wydawnictwa Helion,
                                        na którą przypadkowo natknąłem sie w internecie i mnie zaciekawiła. Dzięki tej książce poznałem podstawy xHTML'a.
                                        Oczywiście było to jakiś czas temu, więc należało co nieco odświerzyć. Ta wiedza pozwoliła mi na stworzenie pierwszego "poważnego" projektu.
                                        Małe demo tej strony można ujrzeć poniżej. Z biegiem czasu coraz bardziej interesowały mnie techniki tworzenia stron i poświęcołem temu odpowiednio caraz więcej czasu.
                                        Kodując kolejne strony nabieram doświadczenia i uczę się nowych rzeczy. Staram się, aby w każdej nowej pracy dodać coś innego, coś czego wcześniej nie robiłem.
                                        To co robię staram się robić jak najlepiej.<p></p>
    
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="images/demo/demo1.jpg" rel="lightbox[roadtrip]"><img src="images/demo/demo1m.png" alt="" title="erbeen.ugu.pl - Strona Główna"></a>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="images/demo/demo2.jpg" rel="lightbox[roadtrip]"><img src="images/demo/demo2m.png" alt="" title="erbeen.ugu.pl - Formularz Wontaktowy"></a>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="images/demo/demo3.jpg" rel="lightbox[roadtrip]"><img src="images/demo/demo3m.png" alt="" title="erbeen.ugu.pl - D Day Hel 2012"></a>

</div>
                          
                    </div>
    </div>
    <div class="zawartosc_dol"></div>
</div>
<div class="stopka">
           <div class="lewa_stopka"><img src="images/prawa.png" alt="prawa" /></div>
</div>

</body>

</html>
StrefaPi
28.03.2013, 11:20:02
zaimportuj bibliotekę jQuery... i do dzieła

[HTML] pobierz, plaintext 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>   
  2. <script type="text/javascript" >
  3. $(window).load(function () {
  4. 	$(".menu").find("li a").click(function(event) {
  5. 		event.preventDefault();
  6. 		$.get($(this).attr("href"), function(data) {
  7. 			$('.strona').html(data);
  8. 		});
  9. 	});
  10. });
  11. </script>
[HTML] pobierz, plaintext


w tych html'ach (co są ładowane przez get() ) powinieneś mieć tylko treść, bez nagłówków... (tekst i obrazki)

dodatkowo wywal ze strony prototype, bo to chyba (już od 2 lat) nie jest rozwijane oprogramowanie... pod jQuery też jest lightbox ;)

EOT?
Erbeen
28.03.2013, 11:27:37
Znaczy cały ten kod mam wkleić do <head>, a $('.strona').html(data); oznacza, że mam utworzyc plik strona.html w którym bede miał samą treść "o mnie", bez żadnych nagłówków etc.
StrefaPi
28.03.2013, 11:38:11
tak cały skrypt jest w head, ale nie...

u Ciebie każdy element menu jest zbudowany na zasadzie <li><a href="./plik.html"></a></li>, skrypt pobiera wartość z href i na jej podstawie pobiera stronę o tej nazwie, którą wpisałeś w href

skrypt działa... nic nie musisz w nim zmieniać, stwórz strony "index.html", "omnie.html", "portfolio.html", "download.html" i "kontakt.html" z treścią (bo takie masz menu)... i one będą ładowane,

[HTML] pobierz, plaintext 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>   
  2. <script type="text/javascript" >
  3. $(window).load(function () {
  4. 	$(".menu").find("li a").click(function(event) { //przypisanie zdarzenia click do każdego elementu a z listy wypunktowanej w klasie menu
  5. 		event.preventDefault(); //wyłączenie defaultowego zdarzenia czyli przeładowania strony
  6. 		$.get($(this).attr("href"), function(data) { // wysłanie zapytania i załadowanie strony o nazwie podanej a atrybucie href <a href="coś.html">
  7. 			$('.strona').html(data); // wstawienie do zancznika określonego klasą .strona danych pobranych przez ajax
  8. 		});
  9. 	});
  10. });
  11. </script>
[HTML] pobierz, plaintext


przetestuj najpierw jak to działa, a potem pisz ok?
Erbeen
28.03.2013, 12:22:08
Mam jeszcze pytanie jedno. Skąd ten skrypt bedzie wiedział w którym miejscu podmienić treść na inna z np. pliku omnie.html.

I czy w tym pliku ma byc cos jeszcze (<head> etc.) czy tylko:
[HTML] pobierz, plaintext 
  1. <div class="strona">
  2.                                         tekst                                                                         
  3. </div> 
[HTML] pobierz, plaintext
StrefaPi
28.03.2013, 12:24:59
w pliku nie musi być nic więcej... a naprawdę powiedziałbym, że powinna zostać w nim tylko treść, bez zancznika <div class="strona"></div>

czyli np.
[HTML] pobierz, plaintext 
  1. <img src="images/moje_zdj.png" alt="zdjecie" align="left" class="zdjecie"/><br><img src="images/about_me.png" /> </br></br>Jo! Nazywam się Kamil Świątkowski, w sieci ukrywam się pod pseudonimem <strong>Erbeen</strong>. Pochodzę z miałej miejscowości w woj. Łódzkim. Leży ona na wschód od miasta Kutno.<p>Na co dzień chodzę do II klasy Zespołu Szkół Nr 3 im. Władysława Grabskiego w Kutnie o profilu Informatycznym...
[HTML] pobierz, plaintext

$('.strona').html(data); podmienia zawartość elementu, który ma przypisaną kalsę .strona czyli <div class="strona"></div> i umieszcza w niej zmienną data, która jest pobrana przez get()

durga sprawa
[HTML] pobierz, plaintext 
  1. nie </br> tylko <br />
[HTML] pobierz, plaintext
Erbeen
28.03.2013, 22:27:41
Czy wie ktoś w jaki sposób zrobić, żeby działały treści zawarte w dwóch sekcjach wewnątrz siebie które operuje ajax?

tzn.

<div class="strona">
tekst1
<div class="wewnatrz">
tekst2
</div>
</div>

Bo z tego co próbowałem, #wewnatrz nie bedzie czytał ajax przy skrypcie:
[HTML] pobierz, plaintext 
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>   
  2. <script type="text/javascript" >
  3. $(window).load(function () {
  4. 	$(".menu").find("li a").click(function(event) { //przypisanie zdarzenia click do każdego elementu a z listy wypunktowanej w klasie menu
  5. 		event.preventDefault(); //wyłączenie defaultowego zdarzenia czyli przeładowania strony
  6. 		$.get($(this).attr("href"), function(data) { // wysłanie zapytania i załadowanie strony o nazwie podanej a atrybucie href <a href="coś.html">
  7. 			$('.strona').html(data); // wstawienie do zancznika określonego klasą .strona danych pobranych przez ajax
  8. 		});
  9. 	});
  10. });
  11. </script>
[HTML] pobierz, plaintext
StrefaPi
28.03.2013, 23:38:17
piersza sprawa:
nie "#wewnatrz" ale ".wewnatrz" - element oznaczony id wywołuje się z "#", a jeżeli chcemy wywołać elementy oznaczone klasą to stosujemy "." przed nazwą

druga sprawa:
co chcesz osiągnąć? możesz formułować zapytanie jaśniej?

przeanalizowaleś cały kod i wiesz czemu jest tak a nie inaczej?
podejrzewam, że chcesz podmienić element ".wewnatrz" więc wystarczy zmodyfikować 7 linia kodu...
[HTML] pobierz, plaintext 
  1. $('.wewnatrz').html(data);
[HTML] pobierz, plaintext
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.