Dynamiczne ładowanie pliku.php do DIV-a za pomocą przycisków z menu.

pytanie zadane 19 czerwca 2015 w JavaScript przez artimal Gaduła (4,800 p.)

Witam, dręczy mnie taki oto problem.

Mam sobie menu z przyciskami i chciałbym, żeby po kliknięciu na jeden z nich do jednego z divów ładował się plik.php, oczywiście różny dla różnych przycisków. Chciałbym aby działo się to dynamicznie, bez odświeżania i bez zmieniania paska adresu.

Wiem, że będzie działał ajax i szukałem rozwiązania mojego problemu w google lecz niestety jest to tam tak (nie)wytłumaczone, że nic z tego nie rozumiem i już teraz zdałem sobie sprawę jaki potencjał jest na stworzenie z tego forum świetnej bazy wiedzy.

Pozdrawiam i liczę na pomoc :)

2 odpowiedzi

odpowiedź 19 czerwca 2015 przez Comandeer Guru (600,810 p.)
wybrane 21 czerwca 2015 przez artimal

Najlepsza

Najprościej jest wykorzystać jQuery z $.fn.load: http://api.jquery.com/load/

Natomiast całkowicie nie rozumiem czemu nie chcesz zmieniać paska adresu? Inna treść = inny adres. ZAWSZE. Każde inne rozwiązanie jest wadliwe z punktu widzenia UX: https://pornel.net/ramki

Z tego powodu proponuję trudniejsze rozwiązanie, które jednak zajmie się zmianą adresu: https://github.com/defunkt/jquery-pjax

Pokaż 10 poprzednich komentarzy

komentarz 21 czerwca 2015 przez Comandeer Guru (600,810 p.)

To też wygląda ok. Bardziej mnie zastanawia #container

komentarz 21 czerwca 2015 przez artimal Gaduła (4,800 p.)

<div id="container">

</div>

Terminarz.php :

<div id="zadanie">

</div>
<div id="wyjasnienie">

</div>
<div style="clear:both;"></div>

komentarz 21 czerwca 2015 przez Comandeer Guru (600,810 p.)

A klikasz w ikonkę czy napis? Bo teraz mnie olśniło, że przecież embed blokuje kliki z dokumentu (nie jest jego częścią).

Natomiast zadziała to bez problemu jak ikonka będzie bezpośrednio w HTML albo wstawiona jako img (nie embed)

komentarz 21 czerwca 2015 przez artimal Gaduła (4,800 p.)

Zmieniłem embed na img i nadal nie działa. Klikanie na tło, na ikonkę, na napis - nic. Nienawidzę takich sytuacji jak "wszystko jest dobrze ale nie działa" ;)

komentarz 21 czerwca 2015 przez Comandeer Guru (600,810 p.)

Pokaż to online - bo inaczej nie dojdziemy ;) Dopóki tego nie zrobisz mogę Ci powiedzieć jedynie SOA#1 - "u mnie działa"

odpowiedź 19 czerwca 2015 przez mowmiheniek Stary wyjadacz (11,900 p.)

Ja właśnie to odkryłem w bootstrapie:

div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                      <ul class="nav navbar-nav" role="tablist">
                          <li><a href="#zakladka1" data-toggle="tab">costam</a></li>
                          <li><a href="#zakladka2" data-toggle="tab">costam1</a></li>
                      </ul>
</div>

 <div class="tab-content">
                   <div class="tab-pane" id="zakladka1">
                    <?php
                        include 'costam.php';
                    ?>    
                  </div>
                 <div class="tab-pane" id="zakladka2">
                    <?php
                        include 'costam1.php';
                    ?>    
                  </div>
</div>

http://kursbootstrap.pl/zakladki-nav-tabs/

komentarz 19 czerwca 2015 przez Comandeer Guru (600,810 p.)

Z tym, że to nie ciągnie nic Ajaksem.

No i w żaden sposób nie da się dostać do tej zakładki, jedynie klikając - a to spore utrudnienie z punktu widzenia dostępności

komentarz 19 czerwca 2015 przez mowmiheniek Stary wyjadacz (11,900 p.)

hmmm... jeżeli ta strona ma tylko coś tylko wyliczać to myślę, że wystarczy tylko przez klikanie? a on nie chce aby po wpisaniu adresu przeskakiwało do innego zadania.
Myślę, że w niektórych (wąskich) zastosowaniach inny adres do podstron nie jest mile widziany. Jak np. admin chce aby zawsze użytkownik zaczynał od index i szedł po kolei po stronach.

Ekspertem nie jestem i pewnie teraz uświadomisz mi w jakim jestem w błędzie ;)

komentarz 19 czerwca 2015 przez Comandeer Guru (600,810 p.)

Brak zmiany adresu ma sens jeśli mówimy o aplikacjach, w których te taby np. są częścią jakiegoś okienka (jak choćby "Właściwości pliku" w Windowsie).

Natomiast jeśli służą do prezentacji treści zaciąganej z innej podstrony to tak naprawdę reprezentują taką podstronę - więc tutaj zmiana adresu winna być obecna.

Co do ochrony przed wczytaniem nowych pytań: równie dobrze mogę sam odpalić żądanie w konsoli, więc to żadne zabezpieczenie ;) Po prostu trza sprawdzać po stronie serwera czy user ma dostęp do danego zasobu.

komentarz 19 czerwca 2015 przez mowmiheniek Stary wyjadacz (11,900 p.)

No to ma sens

komentarz 19 czerwca 2015 przez mowmiheniek Stary wyjadacz (11,900 p.)

To jeszcze jedno pytanie.

Czyli jak mam logo, menu górne i inne pierdoły to muszę ładować kod tego do każdej z podstron?
Czy jest lepsze rozwiazanie?

komentarz 20 czerwca 2015 przez Comandeer Guru (600,810 p.)

Można sobie stworzyć szablon: http://www.forumweb.pl/poczatkujacy-webmaster/jak-ulatwic-sobie-zycie-menu-raz-zeby-bylo-caly-czas,271

komentarz 20 czerwca 2015 przez HaKIM Szeryf (87,590 p.)

Jest.

Model Widok Kontroloer. MVC.

Ładujesz w kontrolerze widok:

$this->load->view('templates/navbar',$data); // Navbar

I to tyle. :-)

http://www.codeigniter.com/.

http://www.codeigniter.org.pl/.

komentarz 20 czerwca 2015 przez HaKIM Szeryf (87,590 p.)

Comandeer, tak z ciekawości, na jakim frameworku piszesz?

Obstawiam Angular i Symfony/Zend.

komentarz 20 czerwca 2015 przez Comandeer Guru (600,810 p.)

Akurat CI jest dość przestarzałym frameworkiem. Z tych porządnych to poleciłbym Symfony.

komentarz 20 czerwca 2015 przez Comandeer Guru (600,810 p.)

Co do mnie i frameworków: w PHP pisuję dość rzadko i na razie starcza mi https://github.com/Comandeer/SHITTY chociaż do większych projektów na pewno pójdzie Symfony

Co do JS: absolutnie nie Angular, bo to najgorzej zaprojektowany framework JS! http://www.webkrytyk.pl/krytyka/my-truth-about-angular-js/
Raczej pisuję w BackBone, Taunusie albo mithrilu. Obecnie pracuję nad czymś własnym.