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

pytanie zadane 25 lutego 2021 w JavaScript przez Kshyhoo Użytkownik (750 p.)
otwarte ponownie 25 lutego 2021 przez ScriptyChris

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");
			}
		});
	});
});

komentarz 25 lutego 2021 przez Kshyhoo Użytkownik (750 p.)

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

komentarz 25 lutego 2021 przez Kshyhoo Użytkownik (750 p.)

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

komentarz 25 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż aktualny kod.

Konsola pokazuje, że nie wybiera danych z DIVa

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

komentarz 25 lutego 2021 przez Kshyhoo Użytkownik (750 p.)
edycja 25 lutego 2021 przez Kshyhoo

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.

komentarz 25 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 25 lutego 2021 przez Kshyhoo Użytkownik (750 p.)

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.

komentarz 25 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

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?

komentarz 25 lutego 2021 przez Kshyhoo Użytkownik (750 p.)

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>

1 odpowiedź

odpowiedź 25 lutego 2021 przez VBService Ekspert (253,120 p.)

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) ?

Pokaż 20 poprzednich komentarzy

komentarz 26 lutego 2021 przez VBService Ekspert (253,120 p.)

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

itd.

komentarz 26 lutego 2021 przez Kshyhoo Użytkownik (750 p.)

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.

komentarz 26 lutego 2021 przez Kshyhoo Użytkownik (750 p.)

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

komentarz 26 lutego 2021 przez Kshyhoo Użytkownik (750 p.)

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.

komentarz 26 lutego 2021 przez Kshyhoo Użytkownik (750 p.)

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");
            }
        });
});