Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Ustawienie atrybuty id elementu POPUO [JQUERY], Otwarcie Popup na podstawie id
Kubik93
post 4.04.2020, 15:00:46
Post #1





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 20.12.2019

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


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.

  1. $(".button-class").click(function(){
  2. var newid = this.id;
  3. $(".popup").attr("id", newid);
  4. });


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 ?
Go to the top of the page
+Quote Post
trueblue
post 4.04.2020, 15:12:23
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


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?


--------------------
Go to the top of the page
+Quote Post
Kubik93
post 4.04.2020, 15:19:49
Post #3





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 20.12.2019

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


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


  1. <input data-modal-target="#modalresult{$target_row['id']}" onClick="check_click(this.id)" type="button" class="phone phone-off" name="call">

  1. $(".phone-off").click(function(){
  2. var newid = this.id;
  3. $(".modal").attr("id", newid);
  4. });


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

Sorki za trywialne problemy.

Ten post edytował Kubik93 4.04.2020, 15:20:27
Go to the top of the page
+Quote Post
trueblue
post 4.04.2020, 15:24:09
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


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


--------------------
Go to the top of the page
+Quote Post
Kubik93
post 4.04.2020, 18:04:23
Post #5





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 20.12.2019

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


Hmm.. no dobra.

  1. $(".phone-off").click(function(){
  2. var modal = $(this).attr('data-modal-target');
  3. var newid = modal.replace(/#/, '');
  4. $(".modal").attr("id", newid);
  5. });


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

:/

Go to the top of the page
+Quote Post
trueblue
post 4.04.2020, 18:13:47
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


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


--------------------
Go to the top of the page
+Quote Post
Kubik93
post 4.04.2020, 18:30:05
Post #7





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 20.12.2019

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


  1. const openModalButtons = document.querySelectorAll('[data-modal-target]')
  2.  
  3. openModalButtons.forEach(button => {
  4. button.addEventListener('click', () => {
  5. const modal = document.querySelector(button.dataset.modalTarget)
  6. openModal(modal)
  7. })
  8. })
  9.  
  10. function openModal(modal) {
  11. if (modal == null) return
  12. modal.classList.add('active')
  13. overlay.classList.add('active')
  14. }


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

Temat: MySQLCSSPHPOkno POP UP i rekordy z bazy

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

Ten post edytował Kubik93 4.04.2020, 18:36:44
Go to the top of the page
+Quote Post
viking
post 4.04.2020, 19:11:20
Post #8





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

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


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.


--------------------
Go to the top of the page
+Quote Post
Kubik93
post 4.04.2020, 20:53:28
Post #9





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 20.12.2019

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


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

Ten post edytował Kubik93 4.04.2020, 21:26:58
Go to the top of the page
+Quote Post
viking
post 5.04.2020, 06:04:40
Post #10





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

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


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.


--------------------
Go to the top of the page
+Quote Post
Kubik93
post 5.04.2020, 22:23:03
Post #11





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 20.12.2019

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


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

  1. $(function(){
  2. $(".main").on('click','.target > .phone-off',function(){
  3.  
  4. var modal = $(this).attr('data-modal-target');
  5. var newid = modal.replace(/#/, '');
  6. $(".mmain").attr("id", newid);
  7. var clearid = newid.replace(/[^0-9]/gi, '');
  8. $(".id-none").val(clearid);
  9. });
  10. });


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

  1.  
  2. $(function(){
  3. $(".phone-off").click(function(){
  4. var modal = $(this).attr('data-modal-target');
  5. var newid = modal.replace(/#/, '');
  6. $(".mmain").attr("id", newid);
  7. var clearid = newid.replace(/[^0-9]/gi, '');
  8. $(".id-none").val(clearid);
  9. });
  10. });


Zabijcie mnie Panowanie ale staram się czegoś nauczyć smile.gif
Go to the top of the page
+Quote Post

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: 28.03.2024 - 09:34