英文:
Ajax hide deleted element(object)
问题
在success:function(){}中，你可以使用以下代码来隐藏被删除的远程地址，而无需刷新页面：
success:function(){
$('[data-address="' + _aId + '"]').closest('.address').hide();
}
这段代码会找到具有与点击按钮关联的data-address属性相匹配的最接近的包含地址的容器，然后将其隐藏起来。这将在单击按钮后隐藏相应的地址，而不需要刷新整个页面。
英文:
Learning Django and can't find solution. How hide deleted object on page.
html
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main class="container my-4">
<h3 class="my-4 border-bottom pb-1">Адреса <a href="{% url 'add_address' %}" class="float-right btn btn-sm btn-success"><i class="fa fa-plus"> Add address</i></a></h3>
<div class="row">
<div class="col-md-3">
{% include 'user/user-sidebar.html' %}
</div>
<div class="col-md-9">
<div class="row">
{% for add in addbook %}
<div class="col-md-4">
<div class="card mb-3 {% if add.status %}border-secondary shadow{% endif %} address{{add.id}} address">
<div class="card-body">
<p class="box-element">{{add.address}}</p>
<p class="card-text">{{add.mobile}}</p>
</div>
{% if add.status %}
<div class="card-footer">
<i class="fa fa-check-circle text-success check{{add.id}} check"></i>
<button data-address="{{add.id}}" class="btn btn-sm btn-info activate-address btn{{add.id}} actbtn" style="display:none;" >Activate</button>
<button data-address="{{add.id}}" class="btn btn-sm btn-danger delete-address"><i class="fa fa-trash"></i></button>
<a href="{% url 'update-address' add.id %}" class="float-right"><i class="fa fa-edit"></i></a>
</div>
{% else %}
<div class="card-footer footer{{add.id}}">
<i style="display:none;" class="fa fa-check-circle text-success check{{add.id}} check"></i>
<button data-address="{{add.id}}" class="btn btn-sm btn-info activate-address btn{{add.id}} actbtn">Activate</button>
<button data-address="{{add.id}}" class="btn btn-sm btn-danger delete-address"><i class="fa fa-trash"></i></button>
<a href="{% url 'update-address' add.id %}" class="float-right"><i class="fa fa-edit"></i></a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</main>
{% endblock %}
<!-- end snippet -->
js
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).on('click','.delete-address',function(){
var _aId=$(this).attr('data-address');
var _vm=$(this);
// Ajax
$.ajax({
url:'/delete-address',
data:{
'id':_aId,
},
dataType:'json',
beforeSend:function (){
_vm.attr('disabled', true)
},
success:function(){
$("_aId").hide();
}
});
// End
})
<!-- end snippet -->
What I must put in success:function(){} to make the remote address disappear after the button is clicked, without page refresh?
答案1
得分: 1
你可以使用 .closest() 来定位 .card，.parent 来定位 .col-md-4，最后使用 .remove 从 DOM 中移除它。
将 JavaScript 部分更改为以下内容：
$(document).on('click','.delete-address',function(){
var _aId=$(this).attr('data-address');
var _vm=$(this).attr('disabled', true);
// Ajax
$.ajax({
url:'/delete-address',
data:{
'id':_aId,
},
dataType:'json',
success:function(){
_vm.closest('.card').parent().remove();
}
});
})
英文:
You can use .closest() to target the .card, .parent to target the .col-md-4 and finally .remove to remove it from the DOM.
Change the javascript part to something like this
$(document).on('click','.delete-address',function(){
var _aId=$(this).attr('data-address');
var _vm=$(this).attr('disabled', true);
// Ajax
$.ajax({
url:'/delete-address',
data:{
'id':_aId,
},
dataType:'json',
success:function(){
_vm.closest('.card').parent().remove();
}
});
})
答案2
得分: 0
.remove()会起作用。您必须选择正确的DOM元素。
success:function(){
$("_aId").remove();
}
英文:
.remove() will work. You have to select the right dom element.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
success:function(){
$("_aId").remove();
}
<!-- end snippet -->
答案3
得分: 0
你需要修改它
beforeSend:function (){
//_vm.attr('disabled', true)
$(_vm).attr('disabled', true)
},
因为"_vm"不对应于一个jQuery对象
英文:
you need modify it
beforeSend:function (){
//_vm.attr('disabled', true)
$(_vm).attr('disabled', true)
},
Because "_vm" does not correspond to a jquery object
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论