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 27.09.2021, 19:55:53
Post #1





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

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


Posiadam stronę z prawie 2000 elementami DOM (węzłów), na której znajduje się między innymi prosta tabela napisana za pomocą jQuery z ponad 300 linkami do innych podstron (wzorowana na:)
https://jqueryui.com/tabs/#default
Oto jej układ:
  1. <div id="tabs">
  2. <ul><li><a href="#tabs-1" >Al-Ar</a></li>
  3. <li><a href="#tabs-2" >Ar-D</a></li>
  4. <li><a href="#tabs-3" >E-Ha</a></li>
  5. <li><a href="#tabs-4" >Ha-J</a></li>
  6. <li><a href="#tabs-5" >K-Mo</a></li>
  7. <li><a href="#tabs-6" >Mo-Ro</a></li>
  8. <li><a href="#tabs-7" >Ro-So</a></li>
  9. <li><a href="#tabs-8" >So-Su</a></li>
  10. <li><a href="#tabs-9" >Su-Z</a></li></ul>
  11. <table class="tablica_X">
  12. <tr class="tr1"><td></td></tr>
  13. <tr class="tr"><td>
  14. <div id="tabs-1">
  15. <table class="pol">
  16. <tr> <td class="td10" colspan="4">Al..Ar</td></tr>
  17. <tr> <td class="td1"><a href="hotel1.html">hotel 1</a></td>
  18. <td class="td2">1</td></tr>
  19. <tr> <td class="td1"><a href="hotel2.html">hotel 2</a></td>
  20. <td class="td2">2</td></tr>
  21. ...
  22. <tr> <td class="td1"><a href="hotel20.html">hotel 20</a></td>
  23. <td class="td2">20</td></tr>
  24. <table class="pol">
  25. <tr> <td class="td1"><a href="hotel21.html">hotel 21</a></td>
  26. <td class="td2">21</td></tr>
  27. ...
  28. <tr> <td class="td1"><a href="hotel30.html">hotel 30</a></td>
  29. <td class="td2">30</td></tr>
  30. </div>
  31. <div id="tabs-2">
  32. <table class="pol">
  33. <tr> <td class="td10" colspan="4">Ar...D</td></tr>
  34. <tr> <td class="td1"><a href="hotel31.html">hotel 31</a></td>
  35. <td class="td2">31</td></tr>
  36. ...
  37. <tr> <td class="td1"><a href="hotel51.html">hotel 51</a></td>
  38. <td class="td2">51</td></tr>
  39. <table class="pol">
  40. <tr> <td class="td1"><a href="hotel52.html">hotel 52</a></td>
  41. <td class="td2">52</td></tr>
  42. ...
  43. <tr> <td class="td1"><a href="hotel105.html">hotel 105</a></td>
  44. <td class="td2">105</td></tr>
  45. <div id="tabs-9">
  46. <table class="pol">
  47. <tr> <td class="td10" colspan="4">Su-Z</td></tr>
  48. <tr> <td class="td1"><a href="hotel231.html">hotel 231</a></td>
  49. <td class="td2">231</td></tr>
  50. ...
  51. <tr> <td class="td1"><a href="hotel301.html">hotel 301</a></td>
  52. <td class="td2">301</td></tr>
  53. </div>
  54. ...
  55. <table class="pol">
  56. <tr> <td class="td1"><a href="hotel302.html">hotel 302</a></td>
  57. <td class="td2">302</td></tr>
  58. ...
  59. <tr> <td class="td1"><a href="hotel355.html">hotel 355</a></td>
  60. <td class="td2">355</td></tr>
  61. </div>
  62. </tr>
  63. <tr class="tr1"><td></td>
  64. </tr>
  65. </div>
  66. </tr>
  67. <tr class="tr1"><td></td>
  68. </tr>
  69. </div>

Do tego skrypty:
[JAVASCRIPT] pobierz, plaintext
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  2. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  3. <script>
  4. $( function() {
  5. $( "#tabs" ).tabs();
  6. } );
  7. </script>
[JAVASCRIPT] pobierz, plaintext

plus skrypt do otwierania poszczególnych stron z hotelami:
[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=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');return false}
  7. }
  8. }
  9. }
  10. //-->
  11. </script>
[JAVASCRIPT] pobierz, plaintext

Wszystko ładnie działa, ale podczas sprawdzania, np. w PageSpeed Insights pojawia się ostrzeżenie - "Unikaj zbyt dużego DOM - 1795 elementów".
Ponieważ na stronie startowej wyświetla się tylko tablica "#tabs-1", a pozostałe i tak trzeba później kliknąć żeby je zobaczyć, to tablice od "#tabs-2" do "#tabs-9" nie muszą się ładować od razu. I tu prośba o pomoc.
W jaki najprostszy sposób można zoptymalizować rozmiar DOM? Jak zmusić resztę kodu od #tabs-2" do nie ładowania się przy starcie?
I czy JavaScript rzeczywiście opłacalnie przyspieszy ładowanie i działanie strony? Czy sensowniej jest zostawić kod taki jak jest bez JS?
Go to the top of the page
+Quote Post
viking
post 28.09.2021, 06:02:57
Post #2





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

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


A po co tam tabele?


--------------------
Go to the top of the page
+Quote Post
Blasius
post 28.09.2021, 20:11:53
Post #3





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

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


A dlaczego nie?
Po prostu taka tabelka ładnie wygląda.
A mogę poprosić o odpowiedzi na moje pytania?
Go to the top of the page
+Quote Post
trueblue
post 28.09.2021, 20:40:55
Post #4





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

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


Odpowiedzi są w manualu, do którego zresztą podałeś link.
https://jqueryui.com/tabs/#ajax


--------------------
Go to the top of the page
+Quote Post
Blasius
post 28.09.2021, 21:42:49
Post #5





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

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


Tak, wiem, ale żeby załadować kolejne tablice musi być dodany jakiś kod Java Script.
Ja zaś JS w ogóle nie znam, stąd prośba o pomoc.
Wiem, że w głównym katalogu ma być tylko pierwsza tablica - <li><a href="#tabs-1" >Al-Ar</a></li>
A cała reszta w kolejnym lub kolejnych tablicach, ale jak dodać resztę to już nie wiem.
I we wzorcu podają między innymi link do swojej strony "demos", którego ja nie dodaję do swojej strony.

Poza tym chciałbym aby zawsze nowe podstrony otwierały sięw określonej skryptem wielkości.
Go to the top of the page
+Quote Post
Pyton_000
post 29.09.2021, 20:32:37
Post #6





Grupa: Zarejestrowani
Postów: 8 044
Pomógł: 1410
Dołączył: 26.10.2005

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


Przecież pod spodem jest " view source" z przykładem
Go to the top of the page
+Quote Post
Blasius
post 1.10.2021, 19:01:55
Post #7





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

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


Dzięki za "otworzenie oczu".
Pokombinowałem i udało się adaptować przykład do moich celów, ale pozostał jeszcze jeden problem.
Otóż nowe okno z wybranym hotelem otwiera się w określonym miejscu i określonych wymiarach TYLKO na pierwszej tablicy, która otwiera się na głównej stronie.
Na kolejnych, dołączanych stronach, powiedzmy wg przykładu, np.
ajax/content1.php
gdy do strony dołączam ten sam skrypt:
[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

poszczególne hotele otwierają się na pełnym ekranie, a chciałbym zachować efekt, jak na pierwszej tablicy, czyli wymiary okna i położenie.
Przyznam szczerze, że tego nie rozumiem.
Mogę prosić o jeszcze jedną podpowiedź.

Go to the top of the page
+Quote Post
trueblue
post 1.10.2021, 19:09:30
Post #8





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

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


https://www.audero.it/blog/2018/05/16/event...-in-javascript/
i ogólnie:
https://www.google.com/search?q=javacript+d...+events+anchors


--------------------
Go to the top of the page
+Quote Post
Blasius
post 1.10.2021, 22:01:11
Post #9





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

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


Dodałem ten skrypt:
[JAVASCRIPT] pobierz, plaintext
  1. function onClick(event) {
  2. // Prevent the default action
  3. event.preventDefault();
  4.  
  5. // Store the link of the clicked anchor
  6. const url = event.target.href;
  7.  
  8. // Update the results by sending an Ajax request
  9. // to the URL specified in the "url" variable
  10.  
  11. // Update the anchors in the pagination widget
  12. // and remove the event listener on the deleted anchors
  13.  
  14. console.log('Fetching results at ' + url);
  15. }
  16.  
  17. const anchors = document.querySelectorAll('.#tab a');
  18.  
  19. for (let i = 0; i < anchors.length; i++) {
  20. anchors[i].addEventListener('click', onClick);
  21. }
[JAVASCRIPT] pobierz, plaintext

zmieniłem .pagination a
na '.#tab a (nie wiem czy dobrze)
ale gdzie dodać info o wymiarach i położeniu, bo jak poprzednio otwierają się okna na cały ekran?
Go to the top of the page
+Quote Post
trueblue
post 2.10.2021, 07:00:04
Post #10





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

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


#tabs

To ma być selektor CSS określający, który nadrzędny element (nieładowany poprzez Ajax) będzie przechwytywał zdarzenia, a nie wartość atrybutu href.
Czyli ten drugi skrypt w przykładzie.
Tam oprócz sprawdzania tagu, należy dodać sprawdzanie klasy (musisz nadać klasy elementom <a> w tabeli, aby odróżnić je od elementów <a> w zakładkach.

Porównaj swoją procedurę z nową, dokładnie widać gdzie ma być otwieranie okna.

Ten post edytował trueblue 2.10.2021, 08:24:57


--------------------
Go to the top of the page
+Quote Post
Blasius
post 2.10.2021, 18:57:12
Post #11





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

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


Może zadaję banalne pytania, ale kompletnie nie znam JavaScript, stąd prośba o pomoc.
Zgodnie z poradą zmieniłem skrypt:
[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. function onClick(event) {
  3. // If the event is not triggered on one of the anchors,
  4. // there is nothing we want to do
  5. if (event.target.nodeName !== 'A') {
  6. }
  7.  
  8. // Prevent the default action
  9. event.preventDefault();
  10.  
  11. // Store the link of the clicked anchor
  12. const url = event.target.href;
  13.  
  14. // Update the results by sending an Ajax request
  15. // to the URL specified in the "url" variable
  16.  
  17. // Update the anchors in the pagination widget
  18.  
  19. console.log('Fetching results at ' + url);
  20. }
  21.  
  22. const pagination = document.querySelector('#tabs');
  23.  
  24. pagination.addEventListener('click', onClick);
  25. }
  26. <script>
[JAVASCRIPT] pobierz, plaintext


Ale nie wiem jak mam nadać klasy elementom <a> w tabeli, aby odróżnić je od elementów <a> w zakładkach?
Mam plik css do głównej strony, ale tam mam klasy jak w przykładzie na górze strony - #tabs, tbody, .tr, .td i całą resztę.
Do stron ajax/content1.php do ajax/content8.php nie mam żadnych stylów.
No i nadal, jak poprzednio otwierają się okna na cały ekran.
Go to the top of the page
+Quote Post
trueblue
post 3.10.2021, 08:24:59
Post #12





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

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


A jak komórkom w tabeli nadałeś klasę td1?


--------------------
Go to the top of the page
+Quote Post
Blasius
post 3.10.2021, 19:18:49
Post #13





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

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


Normalnie, w css...
  1. .td1 {
  2. border-bottom: 1px solid black;
  3. border-left: 1px solid #482306;
  4. color: #482306;
  5. font: 16px Tahoma, 'Courier New CE', 'Times New Roman', Times, serif;
  6. padding:5px 0 5px 2px;
  7. text-align : left;
  8. text-decoration: none;
  9. width: 97%;
  10. }

Go to the top of the page
+Quote Post
trueblue
post 3.10.2021, 21:26:34
Post #14





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

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


A nie wydaje Ci się, że klasy nadałeś w HTML?


--------------------
Go to the top of the page
+Quote Post
Blasius
post 3.10.2021, 21:56:42
Post #15





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

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


Nie. Są w pliku*.css

Nie bardzo rozumiem pytanie.
Mam plik *.php i plik *.css ze stylami.
A nie wydaje Ci się, że klasy nadałeś w HTML?
Może nie rozumiem pytania?
Może bardziej łopatologicznie? Nie jestem programistą! A na JS nie znam się kompletnie!
Go to the top of the page
+Quote Post
trueblue
post 4.10.2021, 07:33:25
Post #16





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

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


Jeśli uważasz, że nadałeś klasy dla tych elementów <td> w CSS, to spróbuj nadać w CSS klasy dla elementów <a>, które chcesz, aby po kliknięciu otwierały okno.

Podpowiem Ci już dalszy krok, po rozwiązaniu powyższego:

  1. if (event.target.nodeName !== 'A' && !event.target.classList.contains('nadana_klasa')) {
  2. }
  3.  
  4. i tu kod otwierania okna


--------------------
Go to the top of the page
+Quote Post
Blasius
post 4.10.2021, 19:51:23
Post #17





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

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


Zrobiłem tak:

[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. function onClick(event) {
  3. if (event.target.nodeName !== 'A' && !event.target.classList.contains('this.href,.match(/.*hotel\d+\.html/')) {
  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

Nie pokazuje się kliknięta strona a pojawia się komunikat: Fetching results at https://www.xxx/hotel116.html


Ale dodając w drugiej linii:
[JAVASCRIPT] pobierz, plaintext
  1. if (event.target.nodeName !== 'A' && !event.target.classList.contains('this.href,'a'')) {
[JAVASCRIPT] pobierz, plaintext

lub
[JAVASCRIPT] pobierz, plaintext
  1.    if (event.target.nodeName !== 'A' && !event.target.classList.contains('.td1','a'')) {
[JAVASCRIPT] pobierz, plaintext

pojawia się komunikat
Uncaught SyntaxError: missing ) after argument list
i pojawiają się tylko hotele ze strony głównej. Pozostałe mają komunikat jak wyżej - Fetching results at https://www.xxx/hotel116.html

Wstawiam nie to co trzeba?
w arkuszu stylów mam :
  1. a {
  2. background-color: transparent;
  3. text-decoration: none;
  4. }
  5. .td1 {
  6. border-bottom: 1px solid black;
  7. border-left: 1px solid #482306;
  8. color: #482306;
  9. font: 16px Tahoma, 'Courier New CE', 'Times New Roman', Times, serif;
  10. padding:5px 0 5px 2px;
  11. text-align : left;
  12. text-decoration: none;
  13. width: 97%;
  14. }
  15. .td1 a {
  16. background-color: transparent;
  17. text-decoration: none;
  18. }


puke.gif Sorry za moją niewiedzę! puke.gif

Go to the top of the page
+Quote Post
trueblue
post 5.10.2021, 06:59:14
Post #18





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

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


Cytat(Blasius @ 4.10.2021, 20:51:23 ) *
Wstawiam nie to co trzeba?

Wstawiasz nie to co trzeba.
Metoda contains przyjmuje jeden argument i jest to string (nazwa klasy).

Google Twoim przyjacielem: https://ferrante.pl/books/html/chapter7.html


--------------------
Go to the top of the page
+Quote Post
Blasius
post 5.10.2021, 20:09:20
Post #19





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

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


Zrobiłem tak:
zmieniłem tabelę
  1. <div id="tabs">
  2. <ul class="site-tabs">
  3. <li class="site-tabs-item"><a href="#tabs-1" >Al-Aq</a></li>
  4. <li class="site-tabs-item"><a href="ajax/content1.php" >Aq-D</a></li>
  5. <li class="site-tabs-item"><a href="ajax/content2.php" >E-Ha</a></li>
  6. <li class="site-tabs-item"><a href="ajax/content3.php" >Hi-J</a></li>
  7. <li class="site-tabs-item"><a href="ajax/content4.php" >K-Mi</a></li>
  8. <li class="site-tabs-item"><a href="ajax/content5.php" >Mo-Ro</a></li>
  9. <li class="site-tabs-item"><a href="ajax/content6.php" >Ro-Sp</a></li>
  10. <li class="site-tabs-item"><a href="ajax/content7.php" >St-Su</a></li>
  11. <li class="site-tabs-item"><a href="ajax/content8.php" >T-Z</a></li></ul>

i kod JS:
[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. function onClick(event) {
  3. if (event.target.nodeName !== 'A' && !event.target.classList.contains('.site-tabs-item ')) {
  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

Do tego w arkuszu stylów dodałem kontrolnie byle jakie parametry klasy:
  1. .site-tabs {
  2. background-color: LightCyan;
  3. list-style: none;
  4. padding: 0;
  5. width: 200px;
  6. border: 1px solid LightBlue;
  7. }
  8. .site-tabs .site-tabs-item {
  9. border-bottom: 1px solid LightBlue;
  10. padding: 5px;
  11. }
  12. .site-tabs .site-tabs-item:last-child {
  13. border-bottom: 0;
  14. }
  15. .site-tabs .site-tabs-item a {
  16. color: black;
  17. text-decoration: none;
  18. }
  19. .site-tabs .site-tabs-item a:hover {
  20. text-decoration: underline;
  21. }

No i znowu nie pojawiają się strony z hotelami tylko taki komunikat: Fetching results at https://www.xxx/hotel127.html
Czyli są pobierane, ale nie wyświetlane. Dlaczego - nie mam pojęcia.
Na pewno napiszesz, że znowu źle coś robię. I na pewno to będzie prawda... Niestety.
Go to the top of the page
+Quote Post
trueblue
post 6.10.2021, 10:00:15
Post #20





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

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


Klasę powinieneś nadać elementowi <a>, przecież od kilku postów o tym piszemy.

Funkcja wyświetla wyłącznie: "Fetchning...", bo taki jest jej kod.
Gdzie tam jest otwieranie okna?


--------------------
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 - 17:22