Jak zmniejszyć rozmiar DOM ładując tylko pierwszą stronę tabeli ?, Jak ładować pierwszą stronę tabeli, a pozostałe po kolejnym kliknięciu Opcje

[Blasius]

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?

[viking]

A po co tam tabele?

[Blasius]

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

[trueblue]

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

[Blasius]

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.

[Pyton_000]

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

[Blasius]

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ź.

[trueblue]

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

[Blasius]

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?

[trueblue]

#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

[Blasius]

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.

[trueblue]

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

[Blasius]

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 

[trueblue]

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

[Blasius]

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!

[trueblue]

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 

[Blasius]

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 

(IMG:style_emoticons/default/puke.gif) Sorry za moją niewiedzę! (IMG:style_emoticons/default/puke.gif)

[trueblue]

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

[Blasius]

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.

[trueblue]

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?

[Blasius]

Zmieniłem

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

na

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

[viking]

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

[Blasius]

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:

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

do tego

[JAVASCRIPT] pobierz, plaintext 
<script>
function onClick(event) {
if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
 
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 

plus

[CSS] pobierz, plaintext 
a.hotel:link,
a.hotel:visited {
background-color: transparent;
color: navy;
text-decoration: underline;
}
a.hotel:hover,
a.hotel:focus,
a.hotel:active {
background-color: red;
}
.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 

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.

[trueblue]

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

[Blasius]

Ten?

[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 

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...

[trueblue]

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

[Blasius]

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.

[trueblue]

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

[Blasius]

Wymęczyłem (czytaj - znalazłem i trochę zmieniłem) takie dwa skrypty:

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

W "ajax/content1.php do "ajax/content8.php
zostawiłem kod:

[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 

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?

[HTML] pobierz, plaintext 
<div id="tabs">
<ul>
<li><a class="hotel" href="#tabs-1" >Al-Aq</a></li>
<li><a class="hotel" href="ajax/content1.php" >Aq-D</a></li>
<li><a class="hotel" href="ajax/content2.php" >E-Ha</a></li> itd...
[HTML] pobierz, plaintext 

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 (IMG:style_emoticons/default/exclamation.gif) !

Ten post edytował Blasius 12.10.2021, 19:08:50

[trueblue]

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

[HTML] pobierz, plaintext 
<script>
function onClick(event) {
 if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
  return;
 }
 event.preventDefault();
 window.open(event.target.href, 'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');
}
 
const pagination = document.querySelector('#tabs');
pagination.addEventListener('click', onClick);
</script>
[HTML] pobierz, plaintext 

[Blasius]

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 
<script>
function onclick(event) {
if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) {
}
 
event.preventDefault();
const url = event.target.href;
console.log('Fetching results at ' + url);
 
}
const pagination = document.querySelector('html');
pagination.addEventListener('click', onclick);
 
</script>
<script>
var myHTML = document.querySelector('html');
myHTML.onclick = 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 

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! (IMG:style_emoticons/default/thumbsupsmileyanim.gif)