jQuery еднакви стойности при submit

redbulldog

Registered
Здравейте. Изправям се пред голям проблем, тъй като не пиша на Java Script, а ми се налага да направя нещо малко, което обаче ми скъса нервите. Моля Ви някой ако има идея как да оправя нещата ще съм много благодарен за помощ.

Имам една таблица с неопределен брой редове за която се генерират автоматично бутони

HTML:
<button type="button" class="btn btn-pid btn-sm btn-kv btn-default btn-outline-secondary" title="Make primary" data-key="16">P</button>

Като за всеки ред на data-key се слага за стойност съответното ID.


[js]$(document).ready(function () {
$(function() {
$('.btn-pid').click(function() {
var pid = $(".btn-pid").attr('data-key');
$.post('/pages/default/photo/'+pid,
function(response,status){
alert("Response : " + response+"\n\n Status : " + status+" ID:"+pid);.
});
});
});
});[/js]

Идеята е като се кликне на даден ред тази стойност 16 (например) да се събмитне към URL, написан горе и ID-то се лепва отзад, като POST заявката е без нищо. Просто празна заявка към въпросният адрес с индекс накрая.

Проблема е обаче, че изпраща само първото ID. И винаги независимо къде се клика надолу, то винаги изпратеното ID е първото.

Например ако имам

HTML:
<button type="button" class="btn btn-pid btn-sm btn-kv btn-default btn-outline-secondary" title="Make primary" data-key="16">P</button>
<button type="button" class="btn btn-pid btn-sm btn-kv btn-default btn-outline-secondary" title="Make primary" data-key="17">P</button>
<button type="button" class="btn btn-pid btn-sm btn-kv btn-default btn-outline-secondary" title="Make primary" data-key="18">P</button>

то винаги това, което получава js е 16.

Нямам представа къде бъркам.
 
Проблема ти е в този ред:

Код:
var pid = $(".btn-pid").attr('data-key');

Трябва да използваш $(this), за да вземеш атрибута data-key на бутона, който СИ КЛИКНАЛ. По твоя начин взима първия бутон в ДОМ дървото, което е с този клас.

Също така може да ползваш .data().

Код:
$(document).ready(function() {
  $(function() {
    $('.btn-pid').click(function() {
      var pid = $(this).data('key');
      $.post('/pages/default/photo/' + pid, function(response, status) {
        alert("Response : " + response + "\n\n Status : " + status + " ID:" + pid);.
      });
    });
  });
});
 

Горе