jQuery在document.ready（）上无法正确运行；

Question

I have placed this inside of my jsp file:

<script>
    jQuery( document ).ready(function() {
        jQuery('#resrcTypesTree').height(jQuery('.secondColumn').innerHeight() - 10);
    });
</script>

If I run this directly in Chrome's console, it works with no problems. If I load the page, the #resrcTypesTree id is set to 10px (a css default). I cannot figure this out as to why it appears to not be setting the height of the resrcTypesTree to the secondColumn's height. Is there something else that I am missing? I could put in a pause to check the page after a unit of time goes past, I just feel that is hacky.

The $ for jQuery is being overridden by another library in the project that is why I called jQuery instead of the '$'.

Can someone point me in the right direction please? Thank you in advance!

• RR

Answer 1

Depending content you are targeting but as a simple fix, you should wait all content to be loaded:

jQuery(window).on('load',function () {
    jQuery('#resrcTypesTree').height(jQuery('.secondColumn').innerHeight() - 10);
});

Answer 2

This ended up being an ajax issue. I had to write a mediator function since there are more than one ajax call being ran. 95% of the time the re-size works once put into the ajax script, however the 5% of the time, the secondary ajax call would get done first, causing the page not to re-size the gradient correctly.