Logowanie

dynamiczne linkowanie podstron

pytanie zadane 6 czerwca 2015 w JavaScript przez Pan Kulomb Pasjonat (18,630 p.)
edycja 6 czerwca 2015 przez Pan Kulomb

Próbuję linkować podstrony na podstawie stronki: http://niekrytykretek.16mb.com/

<!DOCTYPE HTML>
<html lang="pl">

  <head>
    <title> ... </title>

    <meta http-equiv="Content-Language" content="pl" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="description" content="..." />
    <meta name="keywords" content="..." />

    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="css/fontello.css" />

    <script type="text/javascript" src="loadPage.js"></script>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

  </head>

  <body onload = "slideshow();"
        background="gun_metal.png"> <!-- This pattern is from www.subtlepatterns.com -->

    <div id="head">
      ...
    </div>

    <div id="menu">

      <a href="#" onclick="loadPage('info.html')">
        <div class="option">Strona główna</div>
      </a>

      <a href="#" onclick="loadPage('galeria.html')">
        <div class="option">Galeria</div>Galeria
      </a>

      <a href="#" onclick="loadPage('referencje.html')">
        <div class="option">Referencje</div>
      </a>

      <a href="#" onclick="loadPage('kontakt.html')">
        <div class="option">Kontakt</div>
      </a>

      <div class="clear"></div>
    </div>

    <div id="body">

      <div id="content"><!-- podstrona !-->
           <body onload="loadPage('galeria.html')">
           </body>
      </div>

      </div>

    </div>

    <div id="footer">
        ...
    </div>

  </body>

</html>

function loadPage(file) {
		  $('#content').load(file);
}

Co robię źle, dlaczego href="#"?

1 odpowiedź

odpowiedź 6 czerwca 2015 przez Comandeer Guru (602,340 p.)
wybrane 6 czerwca 2015 przez Pan Kulomb

Najlepsza

Najlepiej wykorzystać History API - wówczas strona będzie się wczytywać dynamicznie, a adres będzie się zmieniał. Każde inne rozwiązanie jest daremne z punktu widzenia UX. Najłatwiej wykorzystać pjax: https://github.com/defunkt/jquery-pjax

Poza tym linków się w taki sposób nie tworzy - warto poczytać https://pornel.net/onclick Zresztą jak użyjesz pjaxa to problem zniknie sam

No i funkcja obecnie nie działa, bo najpierw powinieneś dołączyć jQuery a dopiero później plik z nią (no bo skąd skrypt ma wiedzieć co oznacza $?).

komentarz 6 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

Tamten skrypt nadal nie działa.

komentarz 6 czerwca 2015 przez Comandeer Guru (602,340 p.)

A konsola coś rzuca?

BTW teraz widzę: masz dwa elementy body. Powinieneś mieć jeden i tam w [onload] mieć obydwie funkcje

komentarz 6 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

Już nie mam.

komentarz 6 czerwca 2015 przez Comandeer Guru (602,340 p.)

I dalej nie działa? Sprawdzałeś czy coś nie ma w konsoli (w chrome F12)?

komentarz 6 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

Failed to load resource: net::ERR_FILE_NOT_FOUND
index.html:22 Uncaught ReferenceError: $ is not defined

komentarz 6 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

chodzi o <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

komentarz 6 czerwca 2015 przez Comandeer Guru (602,340 p.)

Odpalasz to z dysku, a // oznacza protokół relatywny, czyli ten sam, którym posłano stronę - zatem próbuje pobrać plik file://code.jquery.com/jquery-1.11.2.min.js. Zamiast // ustaw tam https://

komentarz 6 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

XMLHttpRequest cannot load file:///home/kulomb/Dokumenty/Atom/kontakt.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

komentarz 6 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

Na firefoxie działa, na chrome nie ;/

komentarz 6 czerwca 2015 przez Comandeer Guru (602,340 p.)

Bo Ajaks nie działa bez serwera. Najlepiej zainstalować xamppa i z niego odpalać http://miroslawzelent.pl/kurs-php/instalacja-pakietu-xampp

BTW dziwię się, że na lisku działa… IMO to jego błąd.

komentarz 6 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

Mam już XAMPP. Nadal nie działa w Chrome.

jquery-1.11.2.min.js:4 XMLHttpRequest cannot load file:///home/kulomb/Dokumenty/Atom/pdr-info.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.m.ajaxTransport.send @ jquery-1.11.2.min.js:4m.extend.ajax @ jquery-1.11.2.min.js:4m.fn.load @ jquery-1.11.2.min.js:4loadPage @ index.html:21onload @ index.html:55

komentarz 6 czerwca 2015 przez Comandeer Guru (602,340 p.)

Ale po Ci xampp skoro i tak odpalasz uparcie pliki z dysku?

Musisz przenieść pliku do katalogu htdocs tam, gdzie zainstalowałeś xamppa i odpalać je przez adresy typu http://localhost/plik.html

komentarz 6 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

Nie mogę skopiować do katalogu /opt/lampp/htdocs

komentarz 6 czerwca 2015 przez Comandeer Guru (602,340 p.)

Hm… szczerze mówiąc na Linuksie to lepiej jednak zainstalować Apache + PHP + bazę osobno. Myślałem, że jesteś na windowsie

sudo i skopiuj. A najlepiej nadaj odpowiednie chmody dla wszystkich, żeby zwykły user też mógł wykorzystywać ten katalog

komentarz 8 czerwca 2015 przez Pan Kulomb Pasjonat (18,630 p.)

pjax wymaga bower, a to z koleji Node and npm and Git. Naprawdę to najłatwiejszy sposób?

komentarz 8 czerwca 2015 przez Comandeer Guru (602,340 p.)

https://github.com/defunkt/jquery-pjax#standalone → to jest najłatwiejszy sposób :P

A node i tak trza obecnie znać

Podobne pytania

–3 głosów

1 odpowiedź 366 wizyt

Linkowanie podstron

pytanie zadane 13 września 2015 w HTML i CSS przez Duduś Początkujący (380 p.)

0 głosów

1 odpowiedź 107 wizyt

linkowanie podstrony w html

pytanie zadane 28 października 2023 w HTML i CSS przez maciek2 Nowicjusz (240 p.)

0 głosów

1 odpowiedź 348 wizyt

Linkowanie i htaccess

pytanie zadane 27 stycznia 2021 w PHP przez Maciek06 Użytkownik (680 p.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...