Drukowana wersja tematu

Napisany przez: viking 28.09.2021, 06:02:57

A po co tam tabele?

Napisany przez: Blasius 28.09.2021, 20:11:53

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

Napisany przez: trueblue 28.09.2021, 20:40:55

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

Napisany przez: Blasius 28.09.2021, 21:42:49

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.

Napisany przez: Pyton_000 29.09.2021, 20:32:37

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

Napisany przez: Blasius 1.10.2021, 19:01:55

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.
http://php.net/ajax/content1.php, plaintext

Napisany przez: trueblue 1.10.2021, 19:09:30

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

Napisany przez: Blasius 1.10.2021, 22:01:11

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 

Napisany przez: trueblue 2.10.2021, 07:00:04

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

Napisany przez: Blasius 2.10.2021, 18:57:12

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 

Napisany przez: trueblue 3.10.2021, 08:24:59

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

Napisany przez: Blasius 3.10.2021, 19:18:49

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 

Napisany przez: trueblue 3.10.2021, 21:26:34

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

Napisany przez: Blasius 3.10.2021, 21:56:42

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!

Napisany przez: trueblue 4.10.2021, 07:33:25

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 

Napisany przez: Blasius 4.10.2021, 19:51:23

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 

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

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

[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 

Napisany przez: trueblue 5.10.2021, 06:59:14

Cytat(Blasius @ 4.10.2021, 20:51:23 )

Napisany przez: Blasius 5.10.2021, 20:09:20

Zrobiłem tak:
zmieniłem tabelę

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

[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 

[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 

Napisany przez: trueblue 6.10.2021, 10:00:15

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?

Napisany przez: Blasius 6.10.2021, 21:59:49

Zmieniłem

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

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

Napisany przez: viking 7.10.2021, 05:24:07

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?

Napisany przez: Blasius 7.10.2021, 19:55:56

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

[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 

[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 

Napisany przez: trueblue 7.10.2021, 20:44:06

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

Napisany przez: Blasius 7.10.2021, 20:48:43

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 

Napisany przez: trueblue 8.10.2021, 09:19:01

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

Napisany przez: Blasius 11.10.2021, 20:23:44

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.

Napisany przez: trueblue 12.10.2021, 10:34:57

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

Napisany przez: Blasius 12.10.2021, 19:06:20

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 

[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 

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

DZIĘKI !

Napisany przez: trueblue 13.10.2021, 08:07:53

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

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/script.html>
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);
</http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext 

Napisany przez: Blasius 14.10.2021, 21:33:26

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