french_dev french_dev - 4 months ago 6
Ajax Question

empty the previous content of a div in order to replace with another one using ajax

In my view, I have to recover users following their state. (it's a twig view, I work on a symfony project, but here the back-end process are already build)

The view contains 3 buttons ( tags exactly) and a table. In fact, it's like creating a filter in order to display users in the table following their state.

3 states are possible:


  • waiting for validation =>
    pending_validation

  • enabled

  • disabled



This is my code in my html view:

{# 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>


So, as you can understand, when admin clicks on button, I have to display the right users table with the right state in Javascript using jQuery.

I wrote this code in javascript using jquery:

<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>


As you can understand, the url parameter of my ajax request is
url: "{{ path('index_user_admin') }}"
and retuns the entire html view containing the div menu and the table.

The ajax request works well, I recover my users info. Except one thing happened and I don't really know how to fix this behavior.

Once I clicked on a button, it loads and display my user datas, but it add it and not revoming the actual I want to replaced by the new ones I call on click.

That I would like to do here is to replace the actual content by the new content I call when I clicked on a button.
For now, my previous datas have to be removed in order to be replaced by the new users info, it's not the case, in fact no data are removed, just new datas are added to the previous.

Answer

I found a solution, it seems like I made a rookie mistake herein my ajax calling.

In fact, instead of this userInfoDiv.replaceWith(newuserInfoDiv); in my ajax request, I replace this with userInfoDiv.append(newuserInfoDiv); and all is working well.

Comments