Forum PHP.pl

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:

[HTML] pobierz, plaintext 
<div id="tabs">
<ul><li><a href="#tabs-1" >Al-Ar</a></li>
<li><a href="#tabs-2" >Ar-D</a></li>
<li><a href="#tabs-3" >E-Ha</a></li>
<li><a href="#tabs-4" >Ha-J</a></li>
<li><a href="#tabs-5" >K-Mo</a></li>
<li><a href="#tabs-6" >Mo-Ro</a></li>
<li><a href="#tabs-7" >Ro-So</a></li>
<li><a href="#tabs-8" >So-Su</a></li>
<li><a href="#tabs-9" >Su-Z</a></li></ul>
<table class="tablica_X">
<tbody>
<tr class="tr1"><td></td></tr>
<tr class="tr"><td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Al..Ar</td></tr>
<tr> <td class="td1"><a href="hotel1.html">hotel 1</a></td>
<td class="td2">1</td></tr>
<tr> <td class="td1"><a href="hotel2.html">hotel 2</a></td>
<td class="td2">2</td></tr>
...
<tr> <td class="td1"><a href="hotel20.html">hotel 20</a></td>
<td class="td2">20</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel21.html">hotel 21</a></td>
<td class="td2">21</td></tr>
...
<tr> <td class="td1"><a href="hotel30.html">hotel 30</a></td>
<td class="td2">30</td></tr>
</tbody>
</table>
</div>
<div id="tabs-2">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Ar...D</td></tr>
<tr> <td class="td1"><a href="hotel31.html">hotel 31</a></td>
<td class="td2">31</td></tr>
...
<tr> <td class="td1"><a href="hotel51.html">hotel 51</a></td>
<td class="td2">51</td></tr>
</tbody>
</table>
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel52.html">hotel 52</a></td>
<td class="td2">52</td></tr>
...
<tr> <td class="td1"><a href="hotel105.html">hotel 105</a></td>
<td class="td2">105</td></tr>
</tbody>
</table>
<div id="tabs-9">
<table class="pol">
<tbody>
<tr> <td class="td10" colspan="4">Su-Z</td></tr>
<tr> <td class="td1"><a href="hotel231.html">hotel 231</a></td>
<td class="td2">231</td></tr>
...
<tr> <td class="td1"><a href="hotel301.html">hotel 301</a></td>
<td class="td2">301</td></tr>
</tbody>
</table>
</div>
...
<table class="pol">
<tbody>
<tr> <td class="td1"><a href="hotel302.html">hotel 302</a></td>
<td class="td2">302</td></tr>
...
<tr> <td class="td1"><a href="hotel355.html">hotel 355</a></td>
<td class="td2">355</td></tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1"><td></td>
</tr>
</tbody>
</table>
</div>
[HTML] pobierz, plaintext 

Do tego skrypty:

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

plus skrypt do otwierania poszczególnych stron z hotelami:

[JAVASCRIPT] pobierz, plaintext 
<script>
<!--
onload=function(){
  for(i=0;d=document.getElementsByTagName('a')[i++];){
   if (d.href.match(/.*hotel\d+\.html/)){
     d.onclick=function(){window.open(this.href,'a','width=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');return false}
   }
  }
}
//-->
</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?

A po co tam tabele?

A dlaczego nie?
Po prostu taka tabelka ładnie wygląda.
A mogę poprosić o odpowiedzi na moje pytania?

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

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.

Przecież pod spodem jest " view source" z przykładem

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 
<script>
<!--
onload=function(){
for(i=0;d=document.getElementsByTagName('a')[i++];){
if (d.href.match(/.*hotel\d+\.html/)){
d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false}
}
}
}
//-->
</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ź.

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

Dodałem ten skrypt:

[JAVASCRIPT] pobierz, plaintext 
function onClick(event) {
   // Prevent the default action
   event.preventDefault();
 
   // Store the link of the clicked anchor
   const url = event.target.href;
 
   // Update the results by sending an Ajax request
   // to the URL specified in the "url" variable
 
   // Update the anchors in the pagination widget
   // and remove the event listener on the deleted anchors
 
   console.log('Fetching results at ' + url);
}
 
const anchors = document.querySelectorAll('.#tab a');
 
for (let i = 0; i < anchors.length; i++) {
   anchors[i].addEventListener('click', onClick);
}
[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?

#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

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 
<script>
function onClick(event) {
// If the event is not triggered on one of the anchors,
// there is nothing we want to do
if (event.target.nodeName !== 'A') {
}
 
// Prevent the default action
event.preventDefault();
 
// Store the link of the clicked anchor
const url = event.target.href;
 
// Update the results by sending an Ajax request
// to the URL specified in the "url" variable
 
// Update the anchors in the pagination widget
 
console.log('Fetching results at ' + url);
}
 
const pagination = document.querySelector('#tabs');
 
pagination.addEventListener('click', onClick);
}
<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.

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

Normalnie, w css...

[CSS] pobierz, plaintext 
.td1 {
border-bottom: 1px solid black;
border-left: 1px solid #482306;
color: #482306;
font: 16px Tahoma, 'Courier New CE', 'Times New Roman', Times, serif;
padding:5px 0 5px 2px;
text-align : left;
text-decoration: none;
width: 97%;
}
[CSS] pobierz, plaintext 

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

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!

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:

[HTML] pobierz, plaintext 
if (event.target.nodeName !== 'A' && !event.target.classList.contains('nadana_klasa')) {
}
 
i tu kod otwierania okna
[HTML] pobierz, plaintext 

Zrobiłem tak:

[JAVASCRIPT] pobierz, plaintext 
<script>
function onClick(event) {
if (event.target.nodeName !== 'A' && !event.target.classList.contains('this.href,.match(/.*hotel\d+\.html/')) {
 
return;
}
event.preventDefault();
const url = event.target.href;
console.log('Fetching results at ' + url);
}
const pagination = document.querySelector('#tabs');
pagination.addEventListener('click', onClick);
}
</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 
if (event.target.nodeName !== 'A' && !event.target.classList.contains('this.href,'a'')) {
[JAVASCRIPT] pobierz, plaintext 

lub

[JAVASCRIPT] pobierz, plaintext 
   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 :

[CSS] pobierz, plaintext 
a {
background-color: transparent;
text-decoration: none;
}
.td1 {
border-bottom: 1px solid black;
border-left: 1px solid #482306;
color: #482306;
font: 16px Tahoma, 'Courier New CE', 'Times New Roman', Times, serif;
padding:5px 0 5px 2px;
text-align : left;
text-decoration: none;
width: 97%;
}
.td1 a {
background-color: transparent;
text-decoration: none;
}
[CSS] pobierz, plaintext 

Sorry za moją niewiedzę!

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

Zrobiłem tak:
zmieniłem tabelę

[HTML] pobierz, plaintext 
<div id="tabs">
<ul class="site-tabs">
<li class="site-tabs-item"><a href="#tabs-1" >Al-Aq</a></li>
<li class="site-tabs-item"><a href="ajax/content1.php" >Aq-D</a></li>
<li class="site-tabs-item"><a href="ajax/content2.php" >E-Ha</a></li>
<li class="site-tabs-item"><a href="ajax/content3.php" >Hi-J</a></li>
<li class="site-tabs-item"><a href="ajax/content4.php" >K-Mi</a></li>
<li class="site-tabs-item"><a href="ajax/content5.php" >Mo-Ro</a></li>
<li class="site-tabs-item"><a href="ajax/content6.php" >Ro-Sp</a></li>
<li class="site-tabs-item"><a href="ajax/content7.php" >St-Su</a></li>
<li class="site-tabs-item"><a href="ajax/content8.php" >T-Z</a></li></ul>
[HTML] pobierz, plaintext 

i kod JS:

[JAVASCRIPT] pobierz, plaintext 
<script>
    function onClick(event) {
    if (event.target.nodeName !== 'A' && !event.target.classList.contains('.site-tabs-item ')) {
 
    return;
    }
    event.preventDefault();
    const url = event.target.href;
    console.log('Fetching results at ' + url);
    }
    const pagination = document.querySelector('#tabs');
    pagination.addEventListener('click', onClick);
 
</script>
[JAVASCRIPT] pobierz, plaintext 

Do tego w arkuszu stylów dodałem kontrolnie byle jakie parametry klasy:

[CSS] pobierz, plaintext 
.site-tabs {
  background-color: LightCyan;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid LightBlue;
}
.site-tabs .site-tabs-item {
  border-bottom: 1px solid LightBlue;
  padding: 5px;
}
.site-tabs .site-tabs-item:last-child {
  border-bottom: 0;
}
.site-tabs .site-tabs-item a {
  color: black;
  text-decoration: none;
}
.site-tabs .site-tabs-item a:hover {
  text-decoration: underline;
}
[CSS] pobierz, plaintext 

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.

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?