Meiner Meinung nach muss ich Benutzer nach ihrem Zustand wiederherstellen. (Es ist eine Zweigansicht, ich arbeite an einem Symfony-Projekt, aber hier sind die Back-End-Prozess bereits erstellt)leeren Sie den vorherigen Inhalt eines div um mit einem anderen zu ersetzen mit Ajax
Die Ansicht enthält 3 Schaltflächen (Tags genau) und eine Tabelle. Tatsächlich ist es so, als würde man einen Filter erstellen, um Benutzer in der Tabelle anzuzeigen, die ihrem Status folgen.
3 Zustände sind möglich:
- zur Validierung warten =>
pending_validation - gesperrt freigegeben
Dies ist mein Code in meiner HTML-Ansicht:
{# 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>
Also Wenn Sie auf die Schaltfläche klicken, muss die rechte Tabelle mit dem richtigen Status in Javascript mit jQuery angezeigt werden.
Ich schrieb diesen Code in Javascript Jquery mit:
<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>
Wie Sie verstehen können, ist die URL-Parameter meines Ajax-Request url: "{{ path('index_user_admin') }}" und Retuns die gesamte HTML-Ansicht, welche das div-Menü und die Tabelle enthält.
Die Ajax-Anfrage funktioniert gut, ich die Informationen meiner Benutzer wiederherstellen. Nur eine Sache ist passiert und ich weiß nicht wirklich, wie ich dieses Verhalten beheben kann.
Sobald ich auf einen Knopf geklickt habe, lädt es und zeigt meine Benutzerdaten an, aber es fügt es hinzu und revoming nicht das tatsächliche, das ich durch die neuen ersetzen möchte, die ich auf klicke.
Das möchte ich hier tun, um den tatsächlichen Inhalt durch den neuen Inhalt zu ersetzen, den ich anrufe, als ich auf einen Knopf klickte. Im Moment müssen meine vorherigen Daten entfernt werden, um durch die neuen Benutzerinformationen ersetzt zu werden, das ist nicht der Fall, tatsächlich werden keine Daten entfernt, sondern nur neue Daten werden zu den vorherigen hinzugefügt.