Jak się odwołać do poszczególnego elementu w ajax?

pytanie zadane 3 października 2016 w JavaScript przez Madar Obywatel (1,560 p.)
edycja 3 października 2016 przez ScriptyChris

Witam
Nie mogę nigdzie znaleźć rozwiązania a już jakiś czas męczę się z tym problemem.
Aplikacja pobiera z pliku url dane i wyświetla je w tabeli z bootstrapa. Wszystko się fajnie wyświetla, ale po wyświetleniu modala wyświetlają się wszystkie elementy, ktore posiadają id a chciałbym żeby po kliknięciu pierwszego elementu wyświetliło się 1, po kliknięciu w kolejnego 2 itp... Jak to zrobić? Jak chwycić każdy element osobno? Poniżej podaje kod.
Pozdrawiam

<!DOCTYPE html>
<html>
  
  <head>
  <title>Data</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
  </head>
  
  <body>

     <table class="table table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>button</th>
        </tr>
      </thead>
      <tbody id="data">
        
      </tbody>
    </table> 

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal</h4>
          </div>
          <div class="modal-body">  
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <script src="jquery-3.1.1.min.js"></script>
    <script src="js.js"></script>
  </body> 

</html>

$(function (){

	var $list = $('#data');
	var $modalList = $(".modal-body");	
	$.ajax({
		type: 'GET',
		url: 'https://jsonplaceholder.typicode.com/users',

		success: function(array) {
			$.each(array, function(i/*numer elementu*/, data) {
				
				for (j=0; j<10; j++) {
					 var divsToAppend = "";
					 divsToAppend += '<tr id="nr' + (i) + '"><td><p>'+data.name +'</p></td><td><p>'+data.username+ '</p></td><td><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" class="show__more__info">Show more info</button><button class="delete">X</button></td></tr>';
				}
				$list.append(divsToAppend);
				$modalList.append(data.id);
			});
		},
		error: function() {
			alert('error loading name');
		}
	});



});

komentarz 3 października 2016 przez ScriptyChris Mędrzec (190,190 p.)

Chyba coś źle klikam, bo nie wyświetla mi się żaden modal po kliknięciu w niebieski przycisk "Show more info". Zatem nie rozumiem za bardzo z czym masz problem.

Czy ta lista 10 elementowa to jest ten modal, czy po kliknięciu w poszczególne przyciski "Show more info" ma się wyświetlić modal dla danego wiersza (elementu) - jeśli tak to co ma on zawierać?

Przy okazji, dlaczego w <head> podpinasz jQuery w wersji "zwykłej", a pod koniec </body> podpinasz zminifikowane? Bez sensu podpinać więcej niż raz dany skrypt (czy to zminifikowany, czy nie). Więc zdecyduj się, albo podpinasz zminifikowany albo "pełny" :)

Jeszcze odnośnie $.ajax() lub też metod, które korzystają z XHR - przyjęło się, że do funkcji, która odpala się przy sukcesie przesyłamy parametr o nazwie response (taka niepisana zasada - wiadomo wtedy, że to odpowiedź z serwera lub RESTa), aczkolwiek głowy nie dam za każdą bibliotekę i framework - tak tylko zaznaczam. Ty zaś przekazałeś sobie array. Nie zawsze otrzymasz tablicę z AJAXa, więc bezpieczniej i bardziej czytelnie napisać response (bo, gdy dostaniesz obiekt, to będziesz miał do dyspozycji pola i metody, a nie po prostu tablicę elementów).

1 odpowiedź

odpowiedź 3 października 2016 przez PiotrBajer Mądrala (5,300 p.)
wybrane 3 października 2016 przez ScriptyChris

Najlepsza

Żeby wyświetlić zawartość w modalu za każdym razem inną gdy klikasz na przycisk musisz tę zawartość najpierw podmienić (chyba że stworzysz wiele obiektów modal - osobny dla każdego przycisku). Zobacz cały kod pod tym linkiem: http://codepen.io/Piotr-Bajer/pen/jraWZg

Przypisałem każdemu przyciskowi atrybut data-content, zawartość tego atrybutu jest wpisywana do modalu przy okazji kliknięcia na przycisk.

Zmieniłem linijkę 14 z JS na:

divsToAppend += '<tr id="nr' + (i) + '"><td><p>'+data.name +'</p></td><td><p>'+data.username+ '</p></td><td><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" class="show__more__info" data-content="'+data.id+'">Show more info</button><button class="delete">X</button></td></tr>';

Oraz dodałem zmianę zawartości modalu podczas kliknięcia za pomocą:

$(document).on('click', '[data-toggle="modal"]', function(event){
      var $bt = $(this);
      var content = $bt.data('content');
      
      if(content) {
        $modalList.html(content);
      }
    });

Oczywiście zawartość modal nie musisz podmieniać za pomocą atrybutu, możesz ją wczytywać z np. tablicy, chodziło mi o pokazanie idei, że tworzysz jeden modal jako szablon, a jego zawartość podmieniasz w locie w czasie kliknięcia na przycisk.