Добрый день! Вот код с использованием ajax для добавления и удаления записей в таблицу. Используется с Django. Если открыть страницу с данными, то можно и удалять и добавлять... Но! после добавления не работает удаление... id значение становится ''. Но если обновить страницу все опять работает. Может, подскажите в чем причина?
<script>
output='';
$('#post-form').on('submit',function(e){
event.preventDefault();
var self = this;
let _tlt=$("#idtitle").val();
let csr=$("input[name=csrfmiddlewaretoken]").val();
console.log($(this).attr('action'))
mydata={
title:_tlt,
csrfmiddlewaretoken:csr,
}
$.ajax({
url:$(this).attr('action'),
method:"POST",
data:mydata,
dataType:"json",
success:function(data){
x=data.unit_data;
if (data.status=='Save'){
for(i=0;i<x.length;i++){
output +='<tr><td class="align-middle" style="width:960px;">'+ x[i].title+'</td>'+
'<td class="text-center align-middle">'+'<input data-sid="{{item.pk}}" value="Update" type="image" src="../static/images/update.png" style="width:25px;">'+'</td>'
+
'<td class="text-center align-middle">'+'<input data-sid="{{item.pk}}" data-del="SprDelete" class="btn-del" value="Delete" type="image" src="../static/images/del.png" style="width:28px;">'+'</td></tr>'
}
$('#tbody').html(output)
output='';
$("form")[0].reset();
//location.reload();
}
if (data.status == 0){
alert('Запись не добавлена. Возможно, такая уже есть в справочнике...');
}
}
});
}
);
///////////////////////////////////////////////////////////////////////////////
/////////////////////////////Delete SPR
$('#tbody').on('click','.btn-del',function(){
let id=$(this).attr('data-sid');
alert(id);
let pth='/'+$(this).attr('data-del')+'/';
let csr=$("input[name=csrfmiddlewaretoken]").val();
mydata={sid:id, csrfmiddlewaretoken:csr,};
mythis=$(this);
$.ajax({
url:pth,
method:'POST',
data:mydata,
success:function(data){
if(data.status =='Del'){
$(mythis).closest("tr").fadeOut();
}
if(data.status ==0){
console.log('NO');
}
},
});
});
</script>
