javascript - New height is not accounted for when using scrollTop after reloading a div within a Bootstrap modal -

javascript - New height is not accounted for when using scrollTop after reloading a div within a Bootstrap modal -

i have bootstrap-based modal allows users add together , view posts:

<div class="modal fade hide" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="prodcommentmodallabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <div class="modal-title">comments</div> </div> <div class="modal-body" data-no-turbolink> <span id="modal-body-span"> <%= render partial: 'posts/getposts' %> </span> </div> <div class="modal-footer"> <%= form_for(@micropost) |f| %> <div class="field" id="post-box"> <%= f.text_area :content, placeholder: "write post..." %> </div> <div class="post-submit"> <%= f.submit "post", id: "post_button", class: "btn btn-primary" %> </div> <% end %> </div> </div> </div> </div>

in order leave modal open when new post added, have next javascript:

$(document).ready(function() { $('#post_button').click(function (e) { e.preventdefault(); $.post('/posts', $('#new_post').serialize(), function (data, status, xhr) { $('.modal-body').load(document.url+' #modal-body-span'); $('.modal-body').scrolltop($('.modal-body').prop("scrollheight")); $('#post_content').val(''); }); }); });

the modal done in chat style newest posts added bottom. i've got separate javascript automatically scrolls modal-body area bottom when modal first opened. can't work scroll bottom after new post submitted (while modal still open). i've observed few things:

if print $('.modal-body').prop("scrollheight") before , after load, value unchanged. if scroll posts , instead utilize big value, $('.modal-body').scrolltop(10000), scrolls downwards after submitting, bottom of previous post.

it seems scrollheight gets updated later , until is, scrolltop scroll @ old value. ideas?

after many, many tries, found works (ajaxcomplete event). needed solve problem new posts may have been added since lastly time page/modal reloaded , wanted latest , greatest content in modal.

$(document).ready(function() { $('#post_button').click(function (e) { e.preventdefault(); $.post('/posts', $('#new_post').serialize(), function (data, status, xhr) { $('.modal-body').load(document.url+' #modal-body-span'); $('#post_content').val(''); }); }); $(document).on('show.bs.modal', '.modal', function () { $('.modal-body').load(document.url+' #modal-body-span'); }); $(document).ajaxcomplete(function() { $('.modal-body').scrolltop($('.modal-body').prop("scrollheight")); }); $('#mymodal').on('shown.bs,modal', function () { $('.modal-body').scrolltop($('.modal-body').prop("scrollheight")); }); });

if improve or more elegant solutions out there, still love hear them.

javascript jquery ajax twitter-bootstrap