[JavaScript]Stała zmiana strony. Opcje

[MeGusta]

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 
<a href="#home" onClick="loadPage('/pages/home.php');">Strona Główna</a>
<script type="text/javascript">
         function loadPage(file) {
            $('#page').load(file);
}
</script>
 
[HTML] pobierz, plaintext 

Ten post edytował MeGusta 7.07.2015, 22:07:34

[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 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ń

[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ę.

[PHP] pobierz, plaintext 
<a href="#home" onClick="loadPage('/pages/home.php');">Strona Główna</a>
<script type="text/javascript">
 
         function loadPage(file) {
            if(location.hash.length > 1)
             loadPage('/pages/' + location.hash.substring(1) + '.php');
          }
      </script>
[PHP] pobierz, plaintext 

[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:

[HTML] pobierz, plaintext 
<script>
var hash = window.location.hash.substr(1);
if(hash)
{
// tutaj wyszukujesz link według hasha i wczytujesz go, wiesz już jak
}
</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

[MeGusta]

Niestety zero reakcji po kliknieciu na button.

[HTML] pobierz, plaintext 
<script>
var hash = window.location.hash.substr(1);
if(hash)
{
loadPage('/pages/' + location.hash.substring(1) + '.php');
}
</script>
[HTML] pobierz, plaintext 

[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ą.

[HTML] pobierz, plaintext 
<script type="text/javascript">
         function loadPage(file) {
            $('#page').load(file);
 
}
if(location.hash.length > 1)
    loadPage('/pages/' + location.hash.substring(1) + '.php');
</script>
[HTML] pobierz, plaintext 

[Comandeer]

Pokaż to całe, najlepiej gdzieś online

[MeGusta]

188.68.238.224/test.php

[Daimos]

Daj Twój javascript pod div page:

[HTML] pobierz, plaintext 
<div id="menu">
		<ul>
			<li><a href="#home" onClick="loadPage('pages/home.php');">Strona Główna</a></li>
			<li><a href="#wyprawa" onClick="loadPage('pages/wyprawa.php');">Wyprawa</a></li>
			<li><a href="#medyk"  onClick="loadPage('pages/praca.php');">Medyk</a></li>
		</ul>
	</div>
 
	<div id="page">
			Treœć
	</div>
 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
<script type="text/javascript">
         function loadPage(file) {
            $('#page').load(file);
            console.log(file);
 
}
console.log(location.hash.length);
if(location.hash.length > 1)
    loadPage('pages/' + location.hash.substring(1) + '.php');
</script>
[HTML] pobierz, plaintext 

[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.