Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [JavaScript]Stała zmiana strony.
MeGusta
post
Post #1





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

Witam, chce oby po refreshu strony zostawało na danej zakładce a nie tak jak teraz wrzucało na główną.

kod:

[HTML] pobierz, plaintext 
  1. <a href="#home" onClick="loadPage('/pages/home.php');">Strona Główna</a>
  2. <script type="text/javascript">
  3.          function loadPage(file) {
  4.             $('#page').load(file);
  5. }
  6. </script>
  7.  
[HTML] pobierz, plaintext


Ten post edytował MeGusta 7.07.2015, 22:07:34
Go to the top of the page
+Quote Post
Comandeer
post
Post #2





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

https://pornel.net/onclick → zawiera wszystkie odpowiedzi, jakich szukasz (chociaż w jQuery się przyjemniej przypina kliki: http://api.jquery.com/click/ )

BTW brakuje Ci klamerki zamykającej w funkcji loadPage


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
MeGusta
post
Post #3





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

Niestety nie pomogło mi to, zalezy mi na tym aby wczytywało się to bez refresha strony tak jak w obecnym kodzie.
Go to the top of the page
+Quote Post
Comandeer
post
Post #4





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

A pokaż kod po zmianach


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
MeGusta
post
Post #5





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

Nie zmieniałem nic bo uznalem ze nic z tamtąd nie pomoże.
Go to the top of the page
+Quote Post
Comandeer
post
Post #6





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Kod
<a href="#home" onClick="loadPage('/pages/home.php');return false">Strona Główna</a>
<script type="text/javascript">
         function loadPage(file) {
            $('#page').load(file);
}
</script>

Taki zapis powinien zablokować odpalenie się linku po kliknięciu i wywołałaby się tylko funkcja loadPage → https://pornel.net/onclick#sec30

Idealnie to powinno wyglądać mniej więcej tak:
Kod
<a href="/pages/home.php">Strona główna</a>
<script>
$('a').on('click', function(e)
{
    e.preventDefault();

    $('#page').load($(this).attr('href'));
});
</script>


A jak dalej nie działa i odświeża stronę, to być może coś w reszcie kodu na to wpływa, albo skrypt wali błędem i warto sprawdzić konsolę.

Czekaj, czekaj… Tobie chodzi o to, że po kliknięciu na tego typu link doczytuje Ci dynamicznie stronę i zmienia hash w adresie, ale jak ktoś wbije na taki adres to i tak jest wyświetlana domyślna treść?

Jeśli tak, to sprawdzaj co jest w location.hash i następnie wywołuj loadPage:
Kod
if(location.hash.length > 1)
    loadPage('/pages/' + location.hash.substring(1) + '.php');

Coś w taki deseń


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
MeGusta
post
Post #7





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

Niestety takie coś nie działa. Poprzedni skrypt tej mój działał, wczytywał dynamicznie zawartość danego pliku do diva #page, jedynie nie zapamiętywał na której zakładce był i po odswiezeniu strony wrzucało na pusta strone i ponownie trzeba było wybrac zakładkę.

[PHP] pobierz, plaintext 
  1. <a href="#home" onClick="loadPage('/pages/home.php');">Strona Główna</a>
  2. <script type="text/javascript">
  3.  
  4.          function loadPage(file) {
  5.             if(location.hash.length > 1)
  6.              loadPage('/pages/' + location.hash.substring(1) + '.php');
  7.           }
  8.       </script>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
Daimos
post
Post #8





Grupa: Zarejestrowani
Postów: 1 319
Pomógł: 118
Dołączył: 26.11.2003
Skąd: Lublin

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

Jak chcesz zrobić "pamięć" aktualnie wczytanej zawartości przez javascript, to albo skorzystaj z cookies, albo lepiej, dodaj do adresu url to co masz w linku, czyli np. #home.
Przy każdym wczytaniu strony, sprawdzasz w javascript, czy istnieje jakiś hesz po adresie i na jego podstawie, pobierasz zawartość, np:
[HTML] pobierz, plaintext 
  1. <script>
  2. var hash = window.location.hash.substr(1);
  3. if(hash)
  4. {
  5. // tutaj wyszukujesz link według hasha i wczytujesz go, wiesz już jak
  6. }
  7. </script>
[HTML] pobierz, plaintext


To co sam już dopisałeś, musisz zrobić poza funkcją pageLoad, aby wczytało się zaraz po uruchomieniu strony

Ten post edytował Daimos 8.07.2015, 10:27:14


--------------------
scriptun.com. Startup z poradnikami do gier ttp.zone i ttpzone.pl
Go to the top of the page
+Quote Post
MeGusta
post
Post #9





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

Niestety zero reakcji po kliknieciu na button.

[HTML] pobierz, plaintext 
  1. <script>
  2. var hash = window.location.hash.substr(1);
  3. if(hash)
  4. {
  5. loadPage('/pages/' + location.hash.substring(1) + '.php');
  6. }
  7. </script>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Comandeer
post
Post #10





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Wszystko zostaw tak, jak było po staremu i po prostu dodaj ten kod sprawdzający hash na końcu skryptu i tyle.


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
MeGusta
post
Post #11





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

Nadal po odświezaniu wrzuca na strone startową.
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.          function loadPage(file) {
  3.             $('#page').load(file);
  4.  
  5. }
  6. if(location.hash.length > 1)
  7.     loadPage('/pages/' + location.hash.substring(1) + '.php');
  8. </script>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Comandeer
post
Post #12





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Pokaż to całe, najlepiej gdzieś online


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
MeGusta
post
Post #13





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

188.68.238.224/test.php
Go to the top of the page
+Quote Post
Daimos
post
Post #14





Grupa: Zarejestrowani
Postów: 1 319
Pomógł: 118
Dołączył: 26.11.2003
Skąd: Lublin

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

Daj Twój javascript pod div page:
[HTML] pobierz, plaintext 
  1. <div id="menu">
  2. 		<ul>
  3. 			<li><a href="#home" onClick="loadPage('pages/home.php');">Strona Główna</a></li>
  4. 			<li><a href="#wyprawa" onClick="loadPage('pages/wyprawa.php');">Wyprawa</a></li>
  5. 			<li><a href="#medyk"  onClick="loadPage('pages/praca.php');">Medyk</a></li>
  6. 		</ul>
  7. 	</div>
  8.  
  9. 	<div id="page">
  10. 			Treœć
  11. 	</div>
  12.  
  13. 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  14.  
  15. <script type="text/javascript">
  16.          function loadPage(file) {
  17.             $('#page').load(file);
  18.             console.log(file);
  19.  
  20. }
  21. console.log(location.hash.length);
  22. if(location.hash.length > 1)
  23.     loadPage('pages/' + location.hash.substring(1) + '.php');
  24. </script>
[HTML] pobierz, plaintext


--------------------
scriptun.com. Startup z poradnikami do gier ttp.zone i ttpzone.pl
Go to the top of the page
+Quote Post
MeGusta
post
Post #15





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

W zakładkach nie mam żadnego js.
Go to the top of the page
+Quote Post
Comandeer
post
Post #16





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Eh, ale nam chodzi o stronę główną. Przenieś JS na koniec i powinno działać.


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
MeGusta
post
Post #17





Grupa: Zarejestrowani
Postów: 155
Pomógł: 0
Dołączył: 6.07.2015

Ostrzeżenie: (10%)
X----

Dziękuję wszystkim za pomoc.
Go to the top of the page
+Quote Post
tzm
post
Post #18





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

history pushstate do zmiany urla robisz? jak nie to poczytaj.
Go to the top of the page
+Quote Post
Comandeer
post
Post #19





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Jak już to poleciłbym https://github.com/defunkt/jquery-pjax → to samo, ale w ładnym wrapperze. Z tym, że raczej byłby mały problem przy odświeżaniu przy obecnej strukturze plików i trza by było dorobić dodatkowo odpowiednie przekierowanie w .htaccess


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
tzm
post
Post #20





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

pjax ma swoje wady. gdyby kolega chcial w przyszlosci dorobic animacje przy zmianach widokow to pjax sobie z tym nie poradzi. after, before startuja w zlych momentach... raczej unikalbym takich dziwacznych rozwiazan do stron internetowych. to jest fajne do pracy na gridzie i zmiany jego zawartosci gdzie a nie do zmian calych widokow. ale to moje odczucie.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

2 Stron V   1 2 >
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 Aktualny czas: 21.08.2025 - 08:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn