[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2012-03-14
5
Medium Priority
?
186 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

649 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