Drukowana wersja tematu

Napisany przez: Kubik93 4.04.2020, 15:00:46

Cześć wszystkim!

Mam taki o to problem ( z góry dziękuję za odpowiedzi )

Otwieram za pomocą input type="button" okno popup.
Js wybiera kontener za pomocą id elementu.

A więc wymyśliłem sobie aby wyciągnąć popup z pętli ( jeden kontener Popup dla każdego rekordu ).
A więc idąc dalej, pomyślałem, że będę musiał zmieniać ID Popup w zależności od id buttona ( tak aby rekordy w Popupie pochodziły od konkretnego ID )

No to przecież nie problem, piszemy Jquery.

[PHP] pobierz, plaintext 
		$(".button-class").click(function(){
			  var newid = this.id;
			$(".popup").attr("id", newid);
		});
[PHP] pobierz, plaintext 

No i id okna popup faktycznie się zmienia aczkolwiek już okno się nie pojawia.
To jakiś typowo techniczny problem czy raczej szukać rozwiązania w skrypcie Popupu ?

Napisany przez: trueblue 4.04.2020, 15:12:23

Wartość atrybutu id powinna być unikalna - czyli nie może być dwóch lub więcej elementów (tu przycisku i okna) o tej samej wartości id.

W jakim celu ustawiasz id dla okna?

Napisany przez: Kubik93 4.04.2020, 15:19:49

Racja!
JS pobiera value z data-modal-target.

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/input.html data-modal-target="#modalresult{$target_row['id']}" onClick="check_click(this.id)" type="button" class="phone phone-off" name="call">
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
		$(".phone-off").click(function(){
			 var newid = this.id;
			$(".modal").attr("id", newid);
		});
[PHP] pobierz, plaintext 

To teraz pytanie jak Jquery pobrać wartość z data-modal-target.

Sorki za trywialne problemy.

Napisany przez: trueblue 4.04.2020, 15:24:09

Warto przeglądać manual: https://api.jquery.com/data/

Napisany przez: Kubik93 4.04.2020, 18:04:23

Hmm.. no dobra.

[PHP] pobierz, plaintext 
		$(".phone-off").click(function(){
			 var modal = $(this).attr('data-modal-target');
			 var newid = modal.replace(/#/, '');
			$(".modal").attr("id", newid);
		});
[PHP] pobierz, plaintext 

Ładnie zamienia wartość data-modal-target na id i ustawia wartość ID Kontenera Popup.
Popup się odpala ale z ostatnim wyszukiwanym rekordem z bazy :/

Pętla {
Rekordy z inputem data-modal-target
.
.
.
Ostatni rekord
}
Popup wyświetla ostatni rekord.

:/

Napisany przez: trueblue 4.04.2020, 18:13:47

Ale jak się ma Twój kod do zawartości popupa? Tu ustawiasz mu wyłącznie id po kliknięciu na jakiś element.

Napisany przez: Kubik93 4.04.2020, 18:30:05

[PHP] pobierz, plaintext 
const openModalButtons = document.querySelectorAll('[data-modal-target]')
 
openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})
 
function openModal(modal) {
  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}
[PHP] pobierz, plaintext 

Powyżej kod Popupa.
Jeśli chodzi o przekazywanie zawartości rekordu to sugerowałem się:

http://forum.php.pl/MySQLCSSPHPOkno_POP_UP_i_rekordy_z_bazy_t264567.html

Wszystkie rokordy pobierać Query i też skryptem wrzucać je do Popup'a ?

Napisany przez: viking 4.04.2020, 19:11:20

Po pierwsze robisz gigantyczny błąd czyli przypinasz zdarzenie to każdego elementu zamiast jednego rodzica (delegacja). Po drugie dlaczego raz piszesz w jquery a raz w czystym js. Możesz na klik albo podstawić na żywo treść, albo np wczytać dynamicznie.

Napisany przez: Kubik93 4.04.2020, 20:53:28

No nie będę ukrywać, że nie jestem ogarnięty jeśli chodzi o JS czy Jquery. Raczej podstawy.

1) Przeczytałem twój artykuł? o propagacji i delegacji.
Kontener przechowujący Button jest tak samo powielany co ilość buttonów. W pętli.
Następny kontener to Box, który już nie jest powielany, z niego powinien delegować do potomka?

Poważnie, teraz to bardziej szukanie rozwiązania po omacku.

2) Dlaczego nie umieszczać w dokumencie zarówno skryptów Jquery jak i czysty JS ? - z ciekawości.

Btw. problem rozwiązany ale po co uczyć się złych praktyk

Napisany przez: viking 5.04.2020, 06:04:40

1. Tak
2. A po co sobie utrudniać życie? Mimo wielu ułatwień sporo rzeczy łatwiej zrobić w jquery. Chyba że celem nauki.

To jak w końcu zrobiłeś bo trueblue też ma wątpliwości co tworzysz.

Napisany przez: Kubik93 5.04.2020, 22:23:03

Jeśli chodzi o nadwanie warości id to:

[PHP] pobierz, plaintext 
	$(function(){
		$(".main").on('click','.target > .phone-off',function(){
 
			var modal = $(this).attr('data-modal-target');
			var newid = modal.replace(/#/, '');
			$(".mmain").attr("id", newid);
			var clearid = newid.replace(/[^0-9]/gi, ''); 
			$(".id-none").val(clearid);		
		});
	});
[PHP] pobierz, plaintext 

Z tego co wyczytałem o delegowaniu, tak to powinno wyglądać.
z tym, że teraz skrypt Jquery najperw ustawia ID a za drugim kliknieciem popup się otwiera.

Poprzedni skrypt działał okay

[PHP] pobierz, plaintext 
 
$(function(){
		$(".phone-off").click(function(){
			var modal = $(this).attr('data-modal-target');
			var newid = modal.replace(/#/, '');
				$(".mmain").attr("id", newid);
			var clearid = newid.replace(/[^0-9]/gi, ''); 
				$(".id-none").val(clearid);
		});
	});
[PHP] pobierz, plaintext 

Zabijcie mnie Panowanie ale staram się czegoś nauczyć