Solved

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

Posted on 2012-03-14
5
172 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
  • 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

828 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