My ajax call is functioning properly, but I am experiencing an issue with the scrollTo plugin from JQuery. It is not positioning the content where I want it to be located below.
//This function reveals the email body when a list item is clicked.
jQuery("#list-item-"+username+"").click(function(){
jQuery(".reply-to-container").hide();
jQuery("#reply-to-"+username+"").toggle("slide", {direction: 'up'});
jQuery("#reply-input-"+username+"").val('');
jQuery(".display-reply-content").html("");
jQuery("#send-btn-ajax-"+username+"").hide();
jQuery("#reply-input-"+username+"").hide("slide", {direction: 'up'});
var myUsername = getUrlVars()['username'];
var messageID = <?php echo $this->message_id; ?>;
var dataString = 'messageID='+ messageID + '&friend=' + username + '&myUsername=' + myUsername;
$.ajax({
type: "POST",
url: "/friends/mark-read/",
data: dataString,
cache: false,
success: function(html)
{
jQuery("#mail-icon-"+username+"").replaceWith("<div id='mail-icon-"+username+"' class='ui-icon ui-icon-mail-open mail-closed'>");
jQuery("#display-reply-"+username+"").css({"display" : "none"}).html(html).fadeIn(2500);
console.log(jQuery("#display-reply-"+username+"")[0].scrollHeight);
jQuery("#display-reply-"+username+"").scrollTop(jQuery("#display-reply-"+username+"").scrollHeight);
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log(textStatus, errorThrown);
}
})
})
Here is the CSS for the Div
.display-reply-content{
max-height: 200px;
overflow: auto;
}