jQuery .load() doesn't seem to see elements from window outside of loaded doc ...

if i have something that looks like this ...

main.html
<body>
  <div id='sample' style='height:100px';>Sample Content</div>
  <div id='loadObj' style='height:150px';></div>
</body>
<script type='text/javascript'>
  $(document).ready(function(){
    $('#loadObj').load('load.html');
  });
</script>

Open in new window


load.html
<body>
  <div id='mainObj'>Loaded Content</div>
</body>
<script type='text/javascript'>
  $(document).ready(function(){
    var h = $('#loadObj').height();
    $('#mainObj').css('height',$('#loadObj').height()+'px');
    alert(h); 
  });
</script>

Open in new window


This wont work. The loaded doc seems to have it's own, separate DOM. In this scenario, the alert would be null. Why ? And how do I get around it.

I'm working on a project, and it relies pretty heavily on ajax & loading documents. This is causing problems for me in a handful of locations ...

Please help Experts - Thanks !!!
LVL 1
ImaginxAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
what about :
<body>
  <div id='sample' style='height:100px';>Sample Content</div>
  <div id='loadObj' style='height:150px';></div>
</body>
<script type='text/javascript'>
  $(document).ready(function(){
    $.get('load.html', function(page) { $('#loadObj').html(page); });
  });
</script>

Open in new window

0
 
Gurvinder Pal SinghCommented:
try removing body tag and make it

<div id='mainObj'>Loaded Content</div>
<script type='text/javascript'>
    var h = $('#loadObj').height();
    $('#mainObj').css('height',$('#loadObj').height()+'px');
   //alert(h);
</script>
0
 
ImaginxAuthor Commented:
That was a great idea, I thought that was it ...
No changes though :(
0
 
Gurvinder Pal SinghCommented:
check this then

make main.html as

<body>
  <div id='sample' style='height:100px';>Sample Content</div>
  <div id='loadObj' style='height:150px';></div>
</body>
<script type='text/javascript'>
  $(document).ready(function(){
    $('#loadObj').load('load.html', function(){
         $('#mainObj').height( $('#loadObj').height() );
    });
  });
</script>

load.html should be simply
<div id='mainObj'>Loaded Content</div>
0
 
ImaginxAuthor Commented:
Hey Leakim, been a while since I've gotten one of your responses ... Maybe I'm actually learning & asking less questions these days !!?? lol

That worked out, but I ended up just kind of embracing what I was viewing as a problem.

I'm keeping the code separate on the loaded pages intentionally at this point, it's helping to keep the code much more organized, and i'm also only loading functions that relate to the body content at hand. My main functions.js is getting rather lengthy, so by keeping the code at the footer of the loaded pages, its keeping functions.js short - I'm only putting site-wide generic code in there, while I put the page specific code on each page.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.