I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this.
Below is the ajax method I have implemented:
$.ajax({
url: "/get_messages",
type: "post",
dataType: "json",
data: {user_id: UserId},
success: function(response) {
if (response.success == true && response.messages.length > 1) {
$("#user_" + UserId).html("");
var Length = response.messages.length;
//alert(Length);
$.each([response.messages], function(index, value) {
for (var i = 0; i < Length; i++) {
var NewMessage = '<div class="para-repeat inner"><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['date'] + '</h4><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['truck'] + '</h4><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['name'] + '</h4><p class="h4_"' + value[i]['user_id'] + '>' + value[i]['content'] + '</p><a href="#new" class="mail-icon"></a></div>';
$("#user_" + UserId).append(NewMessage).show('slow');
}
});
} else {
//$("#One").show();
$("#One").css("display", "block").delay(2000).slideUp("slow");
}
}, error: function(xhr, txt) {
console.log("Something went wrong ", xhr.status);
}
});
Here is a snippet of my HTML structure:
<% @new_users.each do |message| %>
<div class="para-repeat outer" id="user_<%= message[:user_id]%>">
<h4><%= message[:date] %></h4>
<h4><%= message[:truck] %></h4>
<h4><%= message[:name] %></h4>
<p><%= message[:content] %></p>
<a href="#new" class="mail-icon"></a>
</div>
<a id="<%= message[:user_id]%>" href="javascript:void(0);" onclick="getMessages(this.id)" class="expand">Expand All</a>
<% end %>