Solved

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

Posted on 2012-03-14
5
177 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 500 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Find out what you should include to make the best professional email signature for your organization.
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…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

732 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