Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V  < 1 2  
Reply to this topicStart new topic
> Jak zmniejszyć rozmiar DOM ładując tylko pierwszą stronę tabeli ?, Jak ładować pierwszą stronę tabeli, a pozostałe po kolejnym kliknięciu
Blasius
post 6.10.2021, 21:59:49
Post #21





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 1.09.2021

Ostrzeżenie: (0%)
-----


Zmieniłem
[JAVASCRIPT] pobierz, plaintext
  1. if (event.target.nodeName !== 'A' && !event.target.classList.contains('.site-tabs-item ')) {
[JAVASCRIPT] pobierz, plaintext

na
[JAVASCRIPT] pobierz, plaintext
  1. ]if (event.target.nodeName !== 'A' && !event.target.classList.contains('.site-tabs .site-tabs-item a ')) {
[JAVASCRIPT] pobierz, plaintext

z kropką i bez. Próbowałem wszystkiego, co mi przyszło na myśl. I nic.
Pisałem wcześniej, że JavaScript jest mi kompletnie nieznany.
Nic więcej nie wymyślę.
Domyślam się, że próbujesz mnie naprowadzać, ale jak widzisz nie łapię JS za cholerę...
Go to the top of the page
+Quote Post
viking
post 7.10.2021, 05:24:07
Post #22





Grupa: Zarejestrowani
Postów: 6 049
Pomógł: 1042
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Classlist to taki worek na klasy (lista klas na elemencie). Contains sprawdza czy dana klasa jest w zbiorze (wystarczy poświęcić minutę na znalezienie czegokolwiek o tym). Czy według ciebie jakaś ścieżka do węzła "a" to klasa?

Ten post edytował viking 7.10.2021, 07:22:30


--------------------
Go to the top of the page
+Quote Post
Blasius
post 7.10.2021, 19:55:56
Post #23





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 1.09.2021

Ostrzeżenie: (0%)
-----


W końcu pojąłem...
Ale nie spotkałem się nigdzie wcześniej z klasą dla <a>. Może to mnie w jakimś stopniu tłumaczy.
Zrobiłem tak:
  1. <div id="tabs">
  2. <ul class="site-tabs">
  3. <li class="site-tabs-item"><a class="hotel" href="#tabs-1" >Al-Aq</a></li>
  4. <li class="site-tabs-item"><a class="hotel" href="ajax/content1.php" >Aq-D</a></li>
  5. <li class="site-tabs-item"><a class="hotel" href="ajax/content2.php" >E-Ha</a></li>
  6. <li class="site-tabs-item"><a class="hotel" href="ajax/content3.php" >Hi-J</a></li>
  7. <li class="site-tabs-item"><a class="hotel" href="ajax/content4.php" >K-Mi</a></li>
  8. <li class="site-tabs-item"><a class="hotel" href="ajax/content5.php" >Mo-Ro</a></li>
  9. <li class="site-tabs-item"><a class="hotel" href="ajax/content6.php" >Ro-Sp</a></li>
  10. <li class="site-tabs-item"><a class="hotel" href="ajax/content7.php" >St-Su</a></li>
  11. <li class="site-tabs-item"><a class="hotel" href="ajax/content8.php" >T-Z</a></li></ul>

do tego
[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. function onClick(event) {
  3. if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
  4.  
  5. return;
  6. }
  7. event.preventDefault();
  8. const url = event.target.href;
  9. console.log('Fetching results at ' + url);
  10. }
  11. const pagination = document.querySelector('#tabs');
  12. pagination.addEventListener('click', onClick);
  13.  
  14. </script>
[JAVASCRIPT] pobierz, plaintext

plus
  1. a.hotel:link,
  2. a.hotel:visited {
  3. background-color: transparent;
  4. color: navy;
  5. text-decoration: underline;
  6. }
  7. a.hotel:hover,
  8. a.hotel:focus,
  9. a.hotel:active {
  10. background-color: red;
  11. }
  12. .site-tabs {
  13. background-color: LightCyan;
  14. list-style: none;
  15. padding: 0;
  16. width: 200px;
  17. border: 1px solid LightBlue;
  18. }
  19. .site-tabs .site-tabs-item {
  20. border-bottom: 1px solid LightBlue;
  21. padding: 5px;
  22. }
  23. .site-tabs .site-tabs-item:last-child {
  24. border-bottom: 0;
  25. }
  26. .site-tabs .site-tabs-item a {
  27. color: black;
  28. text-decoration: none;
  29. }
  30. .site-tabs .site-tabs-item a:hover {
  31. text-decoration: underline;
  32. }

Ale nadal nie otwierają się okna, a pojawiają się:
komunikat: Fetching results at https://www.xxx/ajax/content8.php
oraz komunikat: Fetching results at https://www.xxx/hotel127.html
Wiem, że trzeba dodać polecenie otwarcia okna, ale nie umiem tego zrobić w przypadku tego kodu JS.
Go to the top of the page
+Quote Post
trueblue
post 7.10.2021, 20:44:06
Post #24





Grupa: Zarejestrowani
Postów: 6 260
Pomógł: 1713
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Przecież kod do otwierania okna jest we wcześniejszym skrypcie, który pokazałeś i stosowałeś.


--------------------
Go to the top of the page
+Quote Post
Blasius
post 7.10.2021, 20:48:43
Post #25





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 1.09.2021

Ostrzeżenie: (0%)
-----


Ten?
[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. <!--
  3. onload=function(){
  4. for(i=0;d=document.getElementsByTagName('a')[i++];){
  5. if (d.href.match(/.*hotel\d+\.html/)){
  6. d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false}
  7. }
  8. }
  9. }
  10. //-->
  11. </script>
[JAVASCRIPT] pobierz, plaintext

Mimo zastosowania pojawia się nadal:
komunikat: Fetching results at https://www.xxx/ajax/content8.php
oraz komunikat: Fetching results at https://www.xxx/hotel127.html
Nic nie rozumiem...
Go to the top of the page
+Quote Post
trueblue
post 8.10.2021, 09:19:01
Post #26





Grupa: Zarejestrowani
Postów: 6 260
Pomógł: 1713
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Nie chodzi o to, abyś ten kod jako całość wkleił znów na stronę, bo przecież przygotowałeś nowy skrypt od obsługi linków.
Chodzi tylko o otwieranie okna, a to jest dokonywane poprzez window.open


--------------------
Go to the top of the page
+Quote Post
Blasius
post 11.10.2021, 20:23:44
Post #27





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 1.09.2021

Ostrzeżenie: (0%)
-----


Poddaję się.
Wierz mi, że próbowałem. kilkadziesiąt różnych wariantów, ale efekt - żaden.
Jeszcze raz napiszę - KOMPLETNIE NIE ZNAM JAVASCRIPT.
Dla tego jednego skryptu nie będę uczył się całego kursu JS.

Jeśli możesz dać jakąś konkretną wskazówkę, będę wdzięczny, jeśli nie, to trudno. Strona będzie większa.
Go to the top of the page
+Quote Post
trueblue
post 12.10.2021, 10:34:57
Post #28





Grupa: Zarejestrowani
Postów: 6 260
Pomógł: 1713
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Podałem Ci wskazówkę w poprzednim poście.


--------------------
Go to the top of the page
+Quote Post
Blasius
post 12.10.2021, 19:06:20
Post #29





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 1.09.2021

Ostrzeżenie: (0%)
-----


Wymęczyłem (czytaj - znalazłem i trochę zmieniłem) takie dwa skrypty:
[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. function onclick(event) {
  3. if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
  4. }
  5.  
  6. event.preventDefault();
  7. const url = event.target.href;
  8. console.log('Fetching results at ' + url);
  9.  
  10. }
  11. const pagination = document.querySelector('a');
  12. pagination.addEventListener('click', onclick);
  13.  
  14. </script>
  15. <script>
  16. var myHTML = document.querySelector('html');
  17. myHTML.onclick = onload=function(){
  18. for(i=0;d=document.getElementsByTagName('a')[i++];){
  19. if (d.href.match(/.*hotel\d+\.html/)){
  20. d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false}
  21. }
  22. }
  23. }
  24. </script>
[JAVASCRIPT] pobierz, plaintext

W "ajax/content1.php do "ajax/content8.php
zostawiłem kod:
[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. <!--
  3. onload=function(){
  4. for(i=0;d=document.getElementsByTagName('a')[i++];){
  5. if (d.href.match(/.*hotel\d+\.html/)){
  6. d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false}
  7. }
  8. }
  9. }
  10. //-->
  11. </script>
[JAVASCRIPT] pobierz, plaintext

Działa jak chcę żeby działał.
Tylko dlaczego po naciśnięciu kolejnego tab/li cała tabela obniża się o około 40px (oczywiście tylko jej legenda zostaje na miejscu, a obniża się lista hoteli) skoro nic w *css nie zmieniałem?
  1. <div id="tabs">
  2. <ul>
  3. <li><a class="hotel" href="#tabs-1" >Al-Aq</a></li>
  4. <li><a class="hotel" href="ajax/content1.php" >Aq-D</a></li>
  5. <li><a class="hotel" href="ajax/content2.php" >E-Ha</a></li> itd...

Jest jakiś sposób aby to poprawić? Pewnie właśnie w css?


P.S. Wskazówkę dałeś, chociaż nie udało mi się chyba pójść Twoim torem myślenia... Ale - DZIĘKI exclamation.gif!

Ten post edytował Blasius 12.10.2021, 19:08:50
Go to the top of the page
+Quote Post
trueblue
post 13.10.2021, 08:07:53
Post #30





Grupa: Zarejestrowani
Postów: 6 260
Pomógł: 1713
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Nie wiem dlaczego uparcie wklejasz stary kod, skoro napisałem abyś tego nie robił.

  1. function onClick(event) {
  2. if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
  3. return;
  4. }
  5. event.preventDefault();
  6. window.open(event.target.href, 'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');
  7. }
  8.  
  9. const pagination = document.querySelector('#tabs');
  10. pagination.addEventListener('click', onClick);


--------------------
Go to the top of the page
+Quote Post
Blasius
post 14.10.2021, 21:33:26
Post #31





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 1.09.2021

Ostrzeżenie: (0%)
-----


A przeczytałeś, że KOMPLETNIE NIE ZNAM JAVASCRIPT?
Właśnie dlatego wklejałem na czuja ten kod. I udało się, bo na szczęście znalazłem w necie poniższy (ten drugi) skrypt:
[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. function onclick(event) {
  3. if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
  4. }
  5.  
  6. event.preventDefault();
  7. const url = event.target.href;
  8. console.log('Fetching results at ' + url);
  9.  
  10. }
  11. const pagination = document.querySelector('html');
  12. pagination.addEventListener('click', onclick);
  13.  
  14. </script>
  15. <script>
  16. var myHTML = document.querySelector('html');
  17. myHTML.onclick = onload=function(){
  18. for(i=0;d=document.getElementsByTagName('a')[i++];){
  19. if (d.href.match(/.*hotel\d+\.html/)){
  20. d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false}
  21. }
  22. }
  23. }
  24. </script>
[JAVASCRIPT] pobierz, plaintext

Ten działa jak chciałem.
Twój też, aczkolwiek nie działa otwieranie nowych okien o określonych wymiarach.
Wiem, że Twój jest elegancki i krótszy., a jeśli chce się Tobie poprawić, to byłoby fajnie.
Oczywiście dziękuję za pomoc! thumbsupsmileyanim.gif
Go to the top of the page
+Quote Post

2 Stron V  < 1 2
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 18.10.2021 - 18:52