• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Podmiana posta na stronie

Object Storage Arubacloud
0 głosów
207 wizyt
pytanie zadane 19 września 2016 w JavaScript przez bugs55 Obywatel (1,090 p.)

Cześć.
Piszę stronę, która będzie służyła jako blog książkowy, ale mam pewien problem.
Chciałbym umieścić na niej galerię,w której będą pokazane odnośniki do innych recenzji. Do tego celu użyłem funkcji .load() (każdy post jest zapisany w osobnym pliku). Na początku ta funkcja działała, lecz, kiedy dopisałem skrypt który po najechaniu myszką na odnośnik zmienia jego wygląd, ten pierwszy przestał działać. Próbowałem na 2 przeglądarkach (Firefox, Chrome), wrzuciłem go na serwer i nadal nic. Byłem bardzo zdziwiony... Biblioteka jQuery dodana, według mnie teoretycznie powinien działać...
Mógłby mi ktoś wytłumaczyć dlaczego to nie działa?
Ewentualnie zaproponować inne rozwiązanie.
Z góry dziękuję ;)

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|Raleway&subset=latin-ext" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="jquery.scrollTo.min.js"></script>
        <title>MikBooks - recenzje</title>
        
        <style rel="stylesheet" type="text/css"></style>
    </head>
    
    <body>
        <div id="gora" style="display: none;"></div>
        <div id="header">
            <div id="logo">MikBooks</div>
        </div>
        
       <div id="post">
            <div id="naglowek">
                <div id="tytulposta">
                    <div id="tytul">Miecz Lata</div>
                    <div id="autor">Rick Riordan</div>
                </div>
           </div>
           
           <div id="tresc">
                <span>Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus ex vitae ante iaculis, non finibus enim tempus. Cras consequat dui erat, quis ornare nisi rhoncus at. Donec vulputate tempus purus vitae aliquet. Quisque accumsan diam at accumsan fermentum. Sed purus lectus, mollis nec risus at, commodo hendrerit odio. Curabitur dui sapien, condimentum et porta quis, pharetra et nulla. Phasellus sollicitudin nibh nunc, quis gravida massa consectetur a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consectetur vel diam sed mollis. Phasellus sit amet condimentum urna. Nullam dictum dolor eget enim sollicitudin feugiat.<br />

                Vestibulum orci dui, faucibus quis blandit et, porta nec purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pellentesque in nunc vitae elementum. Fusce consequat urna et tellus rutrum, sed ultricies enim pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec at bibendum nunc, at pretium turpis. Phasellus interdum metus neque, at molestie massa facilisis vel. Praesent nec tortor non diam tincidunt porta. Nam ac blandit arcu. Sed ac neque eu metus varius congue eu non nunc. Duis ut ligula vestibulum, commodo nulla in, luctus magna.<br />

                Donec quis semper nisi. Nam ultrices odio vitae nulla tincidunt, id ullamcorper enim consequat. Phasellus molestie tellus et est sollicitudin, ut elementum dui efficitur. Proin molestie odio ut est dapibus, et molestie ipsum rhoncus. Etiam purus enim, rhoncus quis eros sed, pretium commodo elit. Donec vel mauris varius, efficitur neque eu, rutrum sapien. In commodo risus quis elit lobortis imperdiet. Proin sollicitudin vitae lorem et interdum. Morbi ac mi neque. Maecenas in est enim. Praesent vel suscipit erat, id vestibulum orci. Pellentesque libero sem, scelerisque ac ex nec, dictum condimentum ligula. Integer at nulla massa. Aenean semper dui id magna consectetur, sed blandit ligula rutrum. Sed id luctus magna. Nullam et massa sollicitudin magna mattis lobortis.<br />

                In aliquam varius nisl ac facilisis. Quisque vestibulum, eros a bibendum rhoncus, ipsum sapien mattis risus, et pellentesque metus neque in quam. Nullam scelerisque enim lectus, non malesuada massa gravida id. Nunc volutpat, mauris eu semper suscipit, lorem mi fermentum magna, eu blandit tortor arcu a sem. Donec et ex sed libero gravida convallis ut sit amet diam. Maecenas at justo magna. Donec nunc arcu, congue ut condimentum sit amet, lacinia ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer hendrerit.
           </div>
        </div>
        
        <div id="galeria">
            <div id="porwana" class="miniatura">
                <div class="inter" style="display: none;">
                    <div id="tytul-min">Porwana Pieśniarka</div>
                    <div id="autor-min">Danielle L. Jensen</div>
                    <div id="klik">CZYTAJ</div>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $(".miniatura").click(function(){
                    var x = document.activeElement.id;
                    
                    $("style").load(x + ".html style");
                    $("#post").load(x + ".html #post");
                });
                
                $(".miniatura").mouseenter(function(){
                    $(".inter").fadeIn(200);
                });
                
                $(".miniatura").mouseleave(function(){
                    $(".inter").fadeOut(200);
                });
            });
            
            jQuery(function($){
                $.scrollTo(0); //reset scrolla
                $('.miniatura').click(function() { $.scrollTo($('#gora'), 1000); });
            });
        </script>
        <noscript>Włącz obsługę Javascript w przeglądarce internetowej</noscript>
    </body>
</html>

 

komentarz 19 września 2016 przez Miszo Bywalec (2,100 p.)
A nie lepiej by ci było trzymać wszystkie posty w jednym pliku? Jeżeli będziesz miał tych postów 1000, to będziesz miał 1000 plików i trochę bałaganu. Ewentualnie możesz zapisać treść tych postów w bazie danych.
komentarz 19 września 2016 przez bugs55 Obywatel (1,090 p.)
No spoko, tylko dlaczego dlaczego ta funkcja nie działa?
komentarz 19 września 2016 przez Miszo Bywalec (2,100 p.)
A czy konsola zwraca ci jakieś błędy? Jak tak. to jakie?
1
komentarz 19 września 2016 przez bugs55 Obywatel (1,090 p.)
jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/Konrad/Desktop/strony%20internetowe/Blog%20ksi%C4%85%C5%BCkowy/.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Z tego co widzę to chyba nie czyta mi tej zmiennej w funkcji .load(), bo próbuje wczytać plik ".html", który nie istnieje.
komentarz 19 września 2016 przez bugs55 Obywatel (1,090 p.)
Komunikat powyżej wyświetla się tylko w chrome, a w firefoxsie już nic nie wyświetla...

1 odpowiedź

0 głosów
odpowiedź 21 września 2016 przez tymon_rogowski Bywalec (2,960 p.)

W treści błędu masz hint w czym jest problem. Domyślnie przeglądarka nie pozwala na odczytywanie plików z dysku ze względów bezpieczeństwa. Poczytaj o same origin policy. Jeśli koniecznie chcesz w ten sposób developować to zainstaluj sobie chrome cannary, zrób skrót i w właściwościach w "element docelowy" dodaj --disable-web-security.

A tak serio to polecam hostować to z jakiegoś prostego serwera. np. https://www.npmjs.com/package/http-server.

Jak SOP będziesz miał z głowy to może jakiś sensowniejszy błąd poleci z jQuery... albo zadziała.

 

 

Podobne pytania

0 głosów
1 odpowiedź 352 wizyt
pytanie zadane 5 listopada 2019 w JavaScript przez Dawid89 Obywatel (1,120 p.)
0 głosów
3 odpowiedzi 627 wizyt
pytanie zadane 3 września 2016 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 109 wizyt
pytanie zadane 5 września 2017 w JavaScript przez Tomson Początkujący (440 p.)

92,570 zapytań

141,422 odpowiedzi

319,643 komentarzy

61,958 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

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!

...