jQuery $("#Div").height() returns undefined

user_3950168 0
Viewed 1314

The problem

It seems that jQuery is loaded and running but that the elements it's trying to work with (the <div>s) are not yet available so it just returns undefined. The issue might be that the project contains the AngularJS framework which also utilizes the $ symbol. Knowing this I modified my jQuery code to start with jQuery(document).ready(function($) { ... but it didn't seem to solve the problem. I also added the jQuery.noConflict(); which also didn't help. I also tried this pattern:

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    $j( "div" ).hide();
});

That didn't work as well. I tried moving the scripts around in the index.html putting jQuery and bootstrap.min.js(because bootstrap depends on jQuery) at the bottom, or at the top, or middle of the scripts. That changes the outcome but it is still the wrong outcome. I sometimes get undefined undefined undefined 0 as outcome from the console.log() about the heights of all the divs.

Very strange problem. Before I tried doing this with jQuery I actually just used JavaScript but then I tried jQuery because I read about the ready() method, because I thought that the HTML elements themselves weren't "ready" yet to be worked with.

Note: The $("#contentDivision") is the most important feature of the issue because it is dynamically populated thus its height changes as the document loads, meaning that the jQuery needs to load after the $("#contentDivision") has been filled up with all the text and pictures (it's a blog).

Another thing that leads me to this line of thinking is that writing the exact same jQuery code which is in my main.js in the chrome console produces the correct result.

I also need help with creating some kind of listener or something to dynamically re-run the jQuery script so the window resizes its height for each type of screen appropriately.

Any help is appreciated, thank you.

main.js (containing my jQuery code)

jQuery.noConflict();
jQuery(document).ready(function($) {
console.log('jQuery(document) is ready');
console.log($(window).height());   // returns height of browser viewport
console.log($(document).height()); // returns height of HTML document
console.log(
    $("#panelDivision").height() + " " +
    $("#scrollDivision").height() + " " +
    $("#contentDivision").height() + " " +
    $("#extraDivision").height()
);

var $max = Math.max($("#contentDivision").height(), $("#extraDivision").height());
console.log($max);

$("#scrollDivision").height($max - $("#panelDivision").height());
$("#contentDivision").height($max);
$("#extraDivision").height($max);
});

The output I'm getting from jQuery

jQuery(document) is ready
949
1299
75 0 undefined 800
NaN

index.html (css links and meta tags omitted)

<body ng-app="myApp">
<div class="main_container">
<navbar></navbar>
<div class="container-fluid page-wrap">
    <div class="row">
        <div id="leftDivision" class="col-md-3 paddingRemove side-posts">
            <posts></posts>
        </div>
        <div id="contentDivision" class="col-md-7 paddingRemove white-container" ng-view></div>
        <div id="extraDivision" class="col-md-2 paddingRemove white-container">
            <lorem></lorem>
        </div>
    </div>
</div>
<foobar></foobar>
</div>

<!-- Imported JavaScript Files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Local Angular-related JavaScript Files -->
<script src="client/js/app.js" type="text/javascript"></script>
<script src="client/js/main.controller.js" type="text/javascript"></script>
<script src="client/js/auth.controller.js" type="text/javascript"></script>
<script src="client/js/blog.controller.js" type="text/javascript"></script>
<script src="client/js/directives.js" type="text/javascript"></script>
<script src="client/js/filters.js" type="text/javascript"></script>
<script src="client/js/factories.js" type="text/javascript"></script>

<script src="client/js/main.js" type="text/javascript"></script>
</body>

</html>
angularjs html jquery
2 Answers

The problem with ng-view rendering concepts.

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

In your code, you are using ng-view on that div. So that div (Dom Element) will be rendered after any route changes are done. otherwise the div element will not rendered, which means you can't see the div tag in html page source. That's why you are getting undefined.

So you could try this below.

<div id="contentDivision" class="col-md-7 
paddingRemove white-container">
<div ng-view></div>
</div>
user_22186350

Load the jQuery script before the AngularJS script:

<!-- Imported JavaScript Files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>

Although I have to say, you don't even need the jQuery since AngularJS can do all of what you want anyway.

user_46272620
Related