?
Solved

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

Posted on 2012-03-14
5
Medium Priority
?
181 Views
Last Modified: 2012-03-26
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 !!!
0
Comment
Question by:Imaginx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37723714
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
 
LVL 1

Author Comment

by:Imaginx
ID: 37725487
That was a great idea, I thought that was it ...
No changes though :(
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37725683
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 37725894
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
 
LVL 1

Author Closing Comment

by:Imaginx
ID: 37767423
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

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question