Pobranie danych z dwóch plików za pomocą AJAX

Question

Próbuję pobrać dane ze skryptu i wyświetlić w modal - działa pięknie. Pomyślałem, żeby dodać kolejną funkcjonalność i wywołać kolejny modal (to również już działa), ale nie wiem jak pobrać dane do tego drugiego modala. I stąd moje pytanie, jak?

$(document).ready(function(){
	$('.view_data').click(function(){
		var employee_id_i = $(this).attr("id");
		$.ajax({
			url:"include/item.php",
			method:"post",
			data:{employee_id_i:employee_id_i},
			success:function(data){
				$('#employee_detail_i').html(data);
				$('#dataModal_i').modal("show");
			}
		});
	});
});

 

Comments

OK, dałem radę, wystarczyło zdublować funkcję i zmienić nazwy zmiennych i nazwę pliku. Zbyt proste, żeby wpaść od razu :)

---

Zamknęliście wątek a moje nadzieje były zbyt szybkie. Okazało się, że drugi modal pobiera tylko jedne i te same dane. Konsola pokazuje, że nie wybiera danych z DIVa ale jakieś przypadkowe ID, nie wiem jeszcze skąd...

---

Pokaż aktualny kod.

Konsola pokazuje, że nie wybiera danych z DIVa

A są jakieś błędy przy okazji? 

---

Otwierają się modale poprawnie, Problem jest w przekazaniu ID do drugiego skryptu, zauważyłem, że drugi skrypt dostaje ID tego pierwszego. Jeżeli zmienię nazewnictwo (ID na coś innego, np IDC), do modala nic się nie ładuje.

Wywołanie pierwszego modala:

<tr data-toggle="modal" data-target="#myModal" class="text-center align-middle view_data" style="cursor: pointer;" title="<?php echo $itemName." ".$itemNumr ?>" id="<?php echo $itemID?>">

I to działa poprawnie. Wywołanie drugiego modala z poziomu pierwszego:

<div data-toggle="modal" data-target="#myModal2" cid="'.$sub_row["id_colour"].'" class="card rounded m-1 p-2" style="cursor: pointer; background-color: #'.$sub_row['c_hex'].'; color: #'.getContrastYIQ($sub_row['c_hex']).'">'."\r\n";

JS:

$(document).ready(function(){
	$('.view_data').click(function(){
		var employee_id_i = $(this).attr("id");
		$.ajax({
			url:"include/item.php",
			method:"post",
			data:{employee_id_i:employee_id_i},
			success:function(data){
				$('#employee_detail_i').html(data);
				$('#dataModal_i').modal("show");
			}
		});
	});
	
	$('.view_data').click(function(){
		var employee_id_c = $(this).attr("cid");
		$.ajax({
			url:"include/colour.php",
			method:"post",
			data:{employee_id_c:employee_id_c},
			success:function(data){
				$('#employee_detail_c').html(data);
				$('#dataModal_c').modal("show");
			}
		});
	});
});

Zamiana cid na id skutkuje ładowaniem danych o ID z pierwszego modala.

---

Pokaż proszę jak wyglądają oba elementy modali z poziomu DOM strony (może być jako screen), bo niektóre atrybuty tworzysz przez konkatenację kodu PHP i pytanie co wyjściowo jest na stronie.

Czy click handlery nie uruchamiają się podwójnie, gdy klikasz na jeden modal? Pokaż też co znajduje się w zmiennych employee_id_i oraz employee_id_c.

---

employee_id_i  to dane wyciągane z pliku item.php po ID i to działa.

employee_id_c to mają być dane z pliku colour.php też po ID, ale nie umiem ich pobrać, bo przecież jest identyczne ID w obu linkach. Jak zamienię pliki to pokazują się dane z drugiego pliku, więc wszystko działa poza przekazaniem ID do drugiego skryptu. Nie wiem, jak to skonstruować.

Jak pobiorę powiedzmy dane z item.php o ID=63,  to z colour.php też mam dane o ID=63. Więc problem dotyczy przekazania odpowiedniego ID do drugiego pliku - tego nie umiem.

---

Nie odpowiedziałeś na to:

Pokaż proszę jak wyglądają oba elementy modali z poziomu DOM strony (może być jako screen), bo niektóre atrybuty tworzysz przez konkatenację kodu PHP i pytanie co wyjściowo jest na stronie.

 

Czy click handlery nie uruchamiają się podwójnie, gdy klikasz na jeden modal?

---

Wygenerowany plik główny:

<tr data-toggle="modal" data-target="#myModal" class="text-center align-middle view_data" style="cursor: pointer;" title="111Db " id="63">
  <td>111Db</td>
  <td>a</td>
  <td>a</td>
  <td>aaa</td>
  <td class="text-center"><img ...></td>
  <td>b</td>
</tr>

Wygenerowana treść pierwszego modala:

<div class="modal fade show" id="myModal" style="z-index: 1040; display: block; padding-right: 17px;" aria-modal="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Wybrany tabor</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body" id="employee_detail_i"> 
				<div class="table-responsive-xl mt-2">

					<table id="employee_data" class="table-sm table-striped table-bordered table-hover" style="height: 100px; width: 100%">
						<tbody>
							<tr class="text-center align-middle view_data" style="cursor: pointer;">
								<td style="width: 120px">111Db</td>
								<td style="width: 120px">a</td>
								<td style="width: 100px">a</td>
								<td style="width: 150px">aaa</td>
								<td>bbb</td>
							</tr>
							<tr>
								<td colspan="5" class="text-center"><img ...></td>
							</tr>
							<tr>
								<td colspan="5" class="text-center">

								</td>
							</tr>
						</tbody>
					</table>
					<div class="row no-gutters">
						<div class="col-md-4 col-sm-8">
							<div data-toggle="modal" data-target="#myModal2" cid="148" class="card rounded m-1 p-2" style="cursor: pointer; background-color: #8A9597; color: #000">
								<h4 class="card-title">RAL C 7001</h4>
								<p class="card-text">RGB: 138-149-151</p>
								<p class="card-text">HEX: 8A9597</p>
								<p class="card-text">CMYK: 9%, 1%, 0%, 41%</p>
							</div>
						</div>
						<div class="col-md-4 col-sm-8">
							<div data-toggle="modal" data-target="#myModal2" cid="86" class="card rounded m-1 p-2" style="cursor: pointer; background-color: #20214F; color: #fff">
								<h4 class="card-title">RAL C 5002</h4>
								<p class="card-text">RGB: 032-033-079</p>
								<p class="card-text">HEX: 20214F</p>
								<p class="card-text">CMYK: 59%, 58%, 0%, 69%</p>
							</div>
						</div>

					</div><!--row-->
				</div><!-- table -->
			</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Zamknij</button>
      </div>
    </div>
  </div>
</div>

Drugi modal pusty:

<div class="modal fade show" id="myModal2" style="z-index: 1050; display: block; padding-right: 17px;" aria-modal="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Wybrany kolor</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body" cid="employee_detail_c">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Zamknij</button>
      </div>
    </div>
  </div>
</div>

 

Answer 1

Z analizy podanego przez Ciebie kodu (w komentarzach też) nie mogę wywnioskować dlaczego "pobierasz" zdarzenie click z jednego (tego samego) elementu o klasie '.view_data' i oczekujesz różnych wyników. 

czy w drugim przypadku, czasem nie powinno być zdarzenie click ustawione na inny element (modal) ?

Comments

Być może, nie jestem zbyt biegły w JS, dlatego założyłem wątek. Nie jestem do końca przekonany, co do Twojego pomysłu, bo dane są przekazywane do drugiego modala, ale z błędnym ID.

---

bo dane są przekazywane do drugiego modala, ale z błędnym ID.

Po Twoim komentarzu Mój pomysł chyba, jest jak najbardziej trafny.  

Czerwone kwadraty - to ten sam element html (zgaduje, że div - <div class="view_data">...</div>), z którego próbujesz pobrać wartość atrybutów raz id, raz cid (zielone kwadraty) wysyłasz zapytanie do 2 różnych skryptów php (żółte kwadraty) i umieszczasz dane wygenerowane przez te skrypty php w dwóch różnych elementach html (niebieskie kwadraty) . Masz odwołanie do zdarzenia click tego samego elementu 2 razy (czerwone kwadraty), z każdy razem gdy klikasz te dwie funkcje są wywoływane jednocześnie. Proszę pokaż jeśli możesz cały wygenerowany kod html tzn. <div class="view_data"> i to co jest w "środku"</div>

---

Mówisz o pliku głównym? Z którego wywołuję modale?

---

Nie znam struktury Twoich plików  , jeżeli to jest plik "główny" to chyba tak, chodzi o tę część kodu z przeglądarki najlepiej go skopiować (F11), gdzie znajduje się <div class="view_data"> i cały kod, który jest w środku, aż do znacznika zamykającego </div> (<div class="view_data">)

coś jak;

---

Dane ładowane są do tabeli jej wiersz jest odnośnikiem do wywołania modala:

 <tr data-toggle="modal" data-target="#myModal" class="text-center align-middle view_data" style="cursor: pointer;" title="" id="63">

Natomiast w pierwszym modalu tak:

<div data-toggle="modal" data-target="#myModal2" id="148" class="card rounded m-1 p-2 xxx" style="cursor: pointer; background-color: #8A9597; color: #000"></div>

To xxx teraz dałęm zamiast view_data.

---

Zobacz w ramach testu, dlaczego Twój kod działa nieprawidłowo.

<br><br>

<tr data-toggle="modal" data-target="#myModal" class="text-center align-middle view_data" style="cursor: pointer;" title="" id="63"><td>TR-view_data</td></tr>

<br><br>

<div data-toggle="modal" data-target="#myModal2" id="148" class="card rounded m-1 p-2 view_data" style="cursor: pointer; background-color: #8A9597; color: #000">DIV-view_data</div>

$(document).ready(function(){
    $('.view_data').click(function(){
        console.log($(this).attr("id"));
    });
});

Wejdź na Codepen

---

Z tych "kawałków" kodu, które pokazujesz niestety jest ciężko udzielić Tobie pomocy. Jedynie ciągle zgaduję, że potrzebujesz coś bardziej na wzór querySelectorAll in Jquery, żeby prawidłowo "obsłużyć" kliknięcia na poszczególnych wierszach <tr> w elemenicie class="view_data"  

---

@VBService,
 pierwsza część nie działa a druga działa, po zmianie tr an div działają obie.

U mnie pierwszy kod działa, drugi otwiera okno modal ale nie ładuje danych. Nie wiem, jak to ugryźć. Pierwszy modal poprawnie ląduje dane wraz z ID...

---

drugi otwiera okno modal ale nie ładuje danych 

Czyli poniższy kod pokazuje okno, ale w jakim sensie nie ładuje danych? Zmienna data nic nie zawiera, czy jak?

           success:function(data){
                $('#employee_detail_c').html(data);
                $('#dataModal_c').modal("show");
            }

Z tych "kawałków" kodu, które pokazujesz niestety jest ciężko udzielić Tobie pomocy.

Zgadzam się, z @VBService, że z tych fragmentów kodu i Twojego tłumaczenia trudno zrozumieć co się dzieje. Wygodniej by było, gdybyś udostępnił np. na CodePen demo kodu (tylko część, której faktycznie dotyczy problem). Dane mogą być sztuczne, byle tylko można było odtworzyć problem.

---

Już o tym myślałem ale ładuję dane dynamicznie i nie wiem jak to ogarnąć.

Pierwszy modal ma wszystkie dane, łącznie z ID potrzebnymi do kolejnego modala. Ale teraz modal jest pusty, tzn nie ma żadnych danych, poza nagłówka i stopki modala.

https://jsfiddle.net/msq6oa7y/4/

---

Myślę, że teraz nie pobiera mi danych z drugiego pliku, bo w konsoli na zakładce sieć nie wyświetla się żądanie do pliku colour.php.

---

Gdy klika się w <tr> o klasie view_data, to wysyłany jest request item.php i otwiera się okno z modalami. Gdy wewnątrz kliknie się w któryś modal, to wysyłany jest request colour.php i pokazuje się okno z nagłówkiem "Wybrany kolor" bez danych - bo request nie zwrócił danych, bo nie ma połączenia z właściwym serwerem.

Gdzie tu jest problem?

---

I identycznie jest na localhost. Ja myślę, że nie wysyła requestu do colour.php i nie wiem, jak to ogarnąć, za krótki jestem w JS.

---

Pokaż screen z zakładki Network devtoolsów przeglądarki dla tego requesta colour.php będąc na localhost. Upewnij się, że na serwerze istnieje plik include/colour.php

---

Plik istnieje, wcześniej nawet (o czym pisałem) uzyskiwałem dane w drugim modalu ale o błędnym ID. Poza tym, jak pisałem, w tej chwili nie pyta colour.php bo na zakładce sieć nie ma go na liście (o czym również pisałem).

---

To czym Twój faktyczny kod różni się od tego, który udostępniłeś na JSFiddle, skoro tam działa a u Ciebie nie?

---

Tak działa tak jak u mnie, bo wkleiłem kod wynikowy. Pierwszy modal ładuje dane, a drugi nie. Nie wiem, jak mam to wytłumaczyć lepiej. Bo JSFiddle raczej nie pozwala ładować danych dynamicznie.

Na samym początku drugi modal ładował dane, tylko że z ID z pierwszego modala.

---

Tylko, że na JSFiddle wysyłane są oba requesty (item.php i colour.php), a twierdzisz że na localhost jest wysyłany tylko jeden. Więc jest tu rozbieżność.

---

No właśnie. Nie wiem, jakie wnioski mam wyciągnąć. Chyba się poddam i wrócę za kolejne pół roku...

---

Przeanalizuj różnice w kodzie między tym co uruchamiasz lokalnie a tym co jest na JSFiddle.

---

Wygląda na to, że działa po stronie jquery (ajax), możliwe, że po stronie php-a jest problem.

itd.

---

To jest akurat dobrze, z końcówką "c" są kolory i rekordów może być więcej niż jeden. Z końcówką "i" są przedmioty i to jest jeden rekord.

---

Jak zmienię nazwę zmiennej/klasy w pierwszym modalu w linku wywołującym drugi modal na z view_data2 na view_data, wtedy jest request do colour.php i drugi modal ładuje dane ale z błędnym ID (pobiera ID z pierwszego modala).

---

Do treści drugiego modala dodałem taki kod:

<input type="text" name="testId" value=""/>

I potem zmiana w JS:

$('#myModal2').on('show.bs.modal', function(e) {
    var testId = $(e.relatedTarget).data('id');
    $(e.currentTarget).find('input[name="testId"]').val(testId);
});

w linku wywołującym drugiego modala:

data-id="..."

I drugi modal ładuje w inpucie dane ID z tych kolorowych paneli, więc coś jest nie tak z tą klasą view_data2, że nie wywołuje pliku colour.php.

---

No dobra, działa. Cieszę się, że to ogarnąłem, bo o JS wiem tyle, że istnieje ;)

$('#myModal2').on('show.bs.modal', function(e) {
    var employee_id_c = $(e.relatedTarget).data('id');
        $.ajax({
            url:"include/colour.php",
            method:"post",
            data:{employee_id_c:employee_id_c},
            success:function(data){
                $('#employee_detail_c').html(data);
                $('#dataModal_c').modal("show");
            }
        });
});