Including file with jQuery and getting it's content length - php

Question

Is it even possible to do things like this with jQuery:
I have almost empty html file index.php (with no content, only the important tags), also I have file content.php in which inside there are all the web-page content, for example this: blablabla, a lot of tags, divs and other content. For example, all this content is 700px long.
Now the thing I would like to do is with jQuery do this: in file index.php between tags input this command and after this add one more jQuery thing that puts .content.heigth() into any variable (so that it will show, how long is all the content that was in file content.php (in this example it was 700px)).
I have tried to do these things and everything goes fine until the place where I have to put into a variable that file's content length.
Here is my code. Probably someone could fix it, but in my opinion it is all wrong.
All jQuery commands are written in index.php file.
$(document).ready(function() {
$('body').append("<?php include ('content.php'); ?>");
$length = $('.content').length;
});
$length shows me 0 but it should be more than 0 ^_^
The most important thing is to know how long is the length of content in content.php file from index.php file with jQuery or any other language's help. The file including is also possible with .load('content.php') command, but this command doesn't see the included file's content length.
Thanks for help! :)

Answer 1

$('body').append("<?php include ('content.php'); ?>");
Don't do that! There is no good reason to do it, and most likely you'll hit a problem with line breaks and/or unescaped quotes. Just add <?php include ('content.php'); ?> directly at the end of the body, then grab the height from document.ready (you were almost there):
$(document).ready(function() {
var height = $('.content').height();
alert(height) // or do something with it
});
You mentioned .load('content.php') in the question. If the direct php include I suggested doesn't suit your needs, do something like this:
$(document).ready(function() {
// You probably want a more specific container instead of body
$(body).load('content.php', function(){
// You can only read the height inside this callback
var height = $('.content').height();
alert(height) // or do something with it
// Continue your program flow from here
// (for example, call a function)
});
// CAUTION: here the content probably didn't load yet.
// If you need to refer to it, do it from the callback above.
});
And finally: if you really get 0 for $('.content').length, that's because there is no element with class "content" in the DOM at the moment you're calling that. The length property of a jQuery object tells you how many elements match the selector you used, so zero is none.

Answer 2

Thanks. The problem was that I have to alert the height into (body).load code not next to that code.
Correct:
$(document).ready(function() {
$('body').load('content.php', function(){
alert($('.content').height());
});
});
Wrong:
$(document).ready(function() {
$('body').load(content.php', function(){})
alert($('.content').height());
});

Answer 3

From what I understand, you want the actual height (in pixels) of the content? In that case, take Malcolm's advice and use .height() instead of .length.
$(document).ready(function() {
$('body').append("<?php include ('content.php'); ?>");
$length = $('.content').length;
});
If instead you want to see how many characters are in the block, you can do something like this.
$(document).ready(function() {
$('body').append("<?php include ('content.php'); ?>");
$length = $('.content').html().length;
});