'u kullanarak başka bir tane ile değiştirmek için bir div'in önceki içeriğini boşaltın. Benim görüşüme göre, kullanıcıları durumlarını takip etmek zorundayım. (Bu bir twind görünümü, ben bir symfony projesi üzerinde çalışıyorum, ama burada arka uç işlemi zaten inşa edilmiştir)ajax
Görünüm 3 düğmeyi (tam olarak etiketleri) ve bir tabloyu içerir. Aslında, kullanıcıları durumlarını takip eden tabloda görüntülemek için bir filtre oluşturmak gibi.
3 konum söz konusudur:
pending_validation- etkin => doğrulama için bekleyen
- engelli
Bu benim html görünümünde benim kodudur:
{# the div containing the menu #}
<div>
<ul class="nav navbar-nav navbar-right nav nav-pills link-right">
<li class="active getState" id="enabled">
<a href="#enabled">
<b>User enabled</b>
</a>
</li>
<li class="getState" id="disabled">
<a href="#disabled">
<b>User disabled</b>
</a>
</li>
<li class="getState" id="pending_validation">
<a href="#pending_validation">
<b>User attempting validation</b>
</a>
</li>
</ul>
</div>
{# the div containing the table of user #}
<div id="userInfo">
{% if (users|length == 0) %}
<p> <i>No users are availabled for the choosen statement you click on !</i></p>
{% else %}
<table class="table table-condensed">
<thead>
<tr>
<th>
USERS
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<table class="table table-striped">
<tbody>
{% for user in users %}
<tr>
<td>
<b>{{ user.id }}</b>
</td>
<td>
<b>{{ user.username }}</b>
</td>
<td>
<b>{{ user.email }}</b>
</td>
<td>
{{ user.created_at|date}}
</td>
<td>
</td>
<td>
<a href="{{path('edit', { 'slug': user.slug })}}">
<button>
EDIT
</button>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Yani anlayacağınız gibi, yönetici butona tıkladığında jQuery'yi kullanarak doğru kullanıcı tablosunu Javascript'te doğru durumla görüntülemem gerekiyor.
<script type="text/javascript" charset="utf-8" defer>
$('.getState').bind('click', function(){
var userInfoDiv = $('#userInfo');
$('.active').removeClass("active");
$(this).addClass("active");
$.ajax({
type: "GET",
cache: false,
url: "{{ path('index_user_admin') }}",
data: {
state: $(this).attr("id")
},
success: function(html){
userInfoDiv.html('');
var newuserInfoDiv = $(html).find('#userInfo');
userInfoDiv.replaceWith(newuserInfoDiv);
userInfoDiv = newuserInfoDiv;
}
});
});
</script>
Dikkat edilirse, benim ajax isteği url parametresi url: "{{ path('index_user_admin') }}" ve div menü ve tabloyu içeren tüm html görünümü retuns:
ajax isteği iyi çalışıyor, kullanıcı bilgilerimi kurtarıyorum. Bir şey olmamış ve bu davranışı nasıl düzelteceğimi bilmiyorum.
Bir düğmeye bastığımda, kullanıcı verilerimi yükler ve görüntüler, ancak eklediğim yenilerle değiştirmek istediğim gerçekleri değiştirmemek de ekledim.
Burada yapmak istediğim, gerçek içeriği bir düğmeyi tıklattığımda aradığım yeni içerikle değiştirmektir. Şimdilik, yeni kullanıcı bilgileriyle değiştirilmek üzere önceki verilerim kaldırılmalı, durum böyle değil, aslında hiçbir veri kaldırılmamış, sadece önceki yeni veriler eklenmiştir.