I currently have an activity stream available for users to use, as well as a site-wide view. When a user posts an update, it displays a default bootstrap success alert. However, I have noticed that other websites slide down existing items and append the newest post to the top of the list.
Attempting to implement this feature myself, I am facing challenges in adding all the necessary styling. I have tried incorporating the required <div> tags that form one activity item in my feed, but with no success.
In short - Is there a way to use ajax to clone the current top activity item and add it to the top? This would improve the dynamism of the code and eliminate the need for CSS within the .js file.
jQuery(document).ready(function ($) {
$('form#postActivity').submit(function (event) {
event.preventDefault();
$postActivityNow = $(this);
var subject = $('#activity_subject').val();
var message = $('#activity_content').val();
var data = {
'action': 'postAnActivity',
'subject': subject,
'message': message,
}
$.ajax({
type: 'post',
url: postAnActivityAjax.ajaxurl,
data: data,
error: function (response, status) {
alert(response);
},
success: function (response) {
if (response.success) {
bootstrap_alert.success('Activity Added');
} else {
if (response.data.loggedIn == false) {
bootstrap_alert.warning('you are NOT logged in');
console.log('you are not logged in')
}
if (response.data.userExists == false) {
console.log(response);
bootstrap_alert.warning(response.data.alertMsg);
console.log(response.data.alertMsg)
}
}
}
});
});
});