Resizing A Div/Class With New AJAX Appended Content Height, When Height Of Page Already Set OnLoad

I've spent nearly 24 hours on this issue, so I'm hoping I can rely on someone that has a better handle of javascript and jquery to help.

The situation is this. I have a slideshow-type setup (coda slider 2 by Niall Doherty) that essentially auto-adjusts the height of each panel/page based on the content that is on the page. That works great, except for when I have dynamic data coming in, in this specific case, I am appending a div via jquery POST Ajax so comments can appear without a reload needed. The problem I'm running into is that since the height is already pre-set onload, the new content doesn't appear, or rather appears below the visible content (overflow is hidden), so I need to resize the main div/class to take into account the new info - and all on the press of the "new comment" button.

I think I came up with a solution where I use the jquery height function to measure the height of the container div I am using for the slide and then adjust the height of that div accordingly, but I bel开发者_开发知识库ieve the js is executing as the button is pused, and thus when the new comment is finally appended via the ajax call, it used the old height and not the new height.

Any help would be appreciated in either getting my rough hack to work, or if you have better ideas on how to handle this more gracefully.

THANKS!!!!

I'm shooting blind without some code, but my guess would be that you'll want to execute the solution you came up with after the ajax call completes. So,

$.post("action", {
    data
}, function () {
    // DO THE CALCULATION HERE
});

That will execute after the AJAX call has completed.

One simple way of doing this would be to call the height adjustment function from a script tag inside loaded html. If the content loaded via ajax is also in your control, that is.

Without seeing the relevant bits of your JavaScript, it's difficult to know what you are aiming to do. However, you can execute a function once the AJAX call has completed successfully by using the "success:" option on the $.ajax() function call. e.g.

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

This callback function is where you should put your resize code.

Sorry, just noticed you were using $.post(). That too has a callback function where you should put your resize code.