Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Stała zmiana strony.
Forum PHP.pl > Forum > Przedszkole
MeGusta
Witam, chce oby po refreshu strony zostawało na danej zakładce a nie tak jak teraz wrzucało na główną.

kod:

  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.  
Comandeer
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
MeGusta
Niestety nie pomogło mi to, zalezy mi na tym aby wczytywało się to bez refresha strony tak jak w obecnym kodzie.
Comandeer
A pokaż kod po zmianach
MeGusta
Nie zmieniałem nic bo uznalem ze nic z tamtąd nie pomoże.
Comandeer
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 loadPagehttps://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ń
MeGusta
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ę.

  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>
Daimos
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:
  1. var hash = window.location.hash.substr(1);
  2. if(hash)
  3. {
  4. // tutaj wyszukujesz link według hasha i wczytujesz go, wiesz już jak
  5. }


To co sam już dopisałeś, musisz zrobić poza funkcją pageLoad, aby wczytało się zaraz po uruchomieniu strony
MeGusta
Niestety zero reakcji po kliknieciu na button.

  1. var hash = window.location.hash.substr(1);
  2. if(hash)
  3. {
  4. loadPage('/pages/' + location.hash.substring(1) + '.php');
  5. }
Comandeer
Wszystko zostaw tak, jak było po staremu i po prostu dodaj ten kod sprawdzający hash na końcu skryptu i tyle.
MeGusta
Nadal po odświezaniu wrzuca na strone startową.
  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');
Comandeer
Pokaż to całe, najlepiej gdzieś online
MeGusta
188.68.238.224/test.php
Daimos
Daj Twój javascript pod div page:
  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');
MeGusta
W zakładkach nie mam żadnego js.
Comandeer
Eh, ale nam chodzi o stronę główną. Przenieś JS na koniec i powinno działać.
MeGusta
Dziękuję wszystkim za pomoc.
tzm
history pushstate do zmiany urla robisz? jak nie to poczytaj.
Comandeer
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
tzm
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.
Comandeer
Owszem, ma wady, bo to History API uproszczone do granic możliwości. Ale na początek IMO się nada - do poznania tej technologii. Pamiętam, że jego kod był dobrym punktem wyjściowym do własnego przerabiania.
MeGusta
Okej, jeszcze tylko mam mały problemik z innej beczki. Co jest nie tak z tym zapytaniem? Zmienna uzytkownik jest pełna.

  1. $czas = mysql_query("INSERT INTO player SET ostatnio_zalogowany=now() WHERE login='$uzytkownik'");
Comandeer
http://www.capaciouscore.pl/artykuly/podst...nych-zapytania/

INSERT nie bierze WHERE. Chodzi Ci o UPDATE
MeGusta
Kurcze, czy czasem nie ma jakiejś zależności pamiedzy tymi zakładkami a zwykłymi? ponieważ nie mogę nic z bazy pobrać.

W głównym pliku gdzie wyswietlam podstrony mam zdefioniowane w nagłówku linki do połaczenia z baza i funkcjami. Lecz w wczytywanej zakładce gdy chciałem pobrać jakiekolwiek dane z bazy to zakładka się włącza lecz pusta. Dodam że sprawdzałem zapytanie i otrzymałem po var_dump($zapytanie) zwróciło bool(false) (czemu?). A jak na górze podstrony umieszczę require_once('connect.php'); to zakładka się nie włącza.

ref
Daimos
Musisz załączać wszystkie bilbioteki (np. Twoje connect.php, które domyślam się, że odpowiada za połączenie w bazie), bo strona, którą pobierasz ajaxem jest zupełnie odrębną sprawą, wykonuje się po stronie serwera.
Jak dajesz require, to sprawdź czy nie ma błędów error_reporting
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.