load div content from external file

Question

I've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".

I used the answer here and also lots of variations of it Load content of a div on another page

I've run a test and Jquery is being loaded.

The test files are here http://www.salcombeyurts.co.uk/test/landing.html

My code looks like this:

<script type="text/javascript">
$('#landing').load('source.html #container');
</script>

This will eventually end up on a PHP page. Part of a Joomla site.

What happens when you remove the space between `source.html` and `#container`? Also, you need to enclose your `load` function within a `$(document).ready`. — Darrrrrren, Nov 06 '12 at 16:51
In your "Developer Tools" have you verified that `source.html` is being requested correctly? — davehale23, Nov 06 '12 at 16:53
I see you are using jQuery load function, even I used it, it works fine. So where you have been stuck? — Vardan Gupta, Nov 06 '12 at 16:57

score 1 · Answer 1 · answered Nov 06 '12 at 16:52

1

You run the script before the #landing div is defined.

Run your code after the DOM ready event

$(function(){
    $('#landing').load('source.html #container');
});

answered Nov 06 '12 at 16:52

Gabriele Petrioli

191,379
34
261
317

In my opinion it's pretty obvious that this is the problem, not the space between the container and file name, which according to the docs is just as it should be. +1 ! – adeneo Nov 06 '12 at 17:00
That has answered it. Classic CSS developer error, running the script before the DOM. – Daniel Michael Ashton Nov 06 '12 at 17:06
Can this be done with a generated URL. I.e. without an extension? – Daniel Michael Ashton Nov 06 '12 at 17:07
@DanielMichaelAshton, ofcourse. If the server responds correctly to the generated URL then you have no problem.. – Gabriele Petrioli Nov 06 '12 at 17:35
@Gaby aka G. Petrioli, I've implemented this here http://www.salcombeyurts.co.uk/stage/availability.html, it works on my test page here http://www.salcombeyurts.com/test/landing.html outside the CMS http://www.salcombeyurts.com/test/landing.html, but as you can see when I try the same thing on the full site the content isn't loaded. – Daniel Michael Ashton Nov 07 '12 at 21:58

score 1 · Answer 2 · answered Nov 06 '12 at 16:55

It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.

Here is my solution none the less

$(function() {
    $.get('page with the div you want', function(data) {
        var content = $(data); //turn the page into a jquery object
        var div = content.find('#div'); // this is the div you want the content from
        $('#container').html(div.html()); // this will set the content of the current div
    });
});

The problem is I have availability tables on pages like this http://www.salcombeyurts.co.uk/stage/index.php/yurt1 that I want to feed onto a summary page that will display 4 different tables from 4 different URL's. The problem comes from the fact the component I have used does not come with a joomla module option or shortcode to embed into articles. You can only directly link to the table. — Daniel Michael Ashton, Nov 06 '12 at 17:21

Darrrrrren · Answer 3 · 2012-11-06T17:08:33.437

0

I would move your script to the bottom of the page and replace it like so.

Original:

<script type="text/javascript">
    $('#landing').load('source.html #container');
</script>

New:

<script type="text/javascript">
$(document).ready(function() {

    $('#landing').load('source.html #container');
});
</script>

~~Note the space removal between source.html and #container.~~

edited Nov 06 '12 at 17:08

answered Nov 06 '12 at 16:53

Darrrrrren

5,968
5
34
51

1

note that according to the [documentation](http://api.jquery.com/load/#loading-page-fragments) that space should actually be there ? – adeneo Nov 06 '12 at 17:07
Interesting... thanks for the note. I just assumed you would design the URL as you would for a link - in which case, you wouldn't have the space there. – Darrrrrren Nov 06 '12 at 17:08
Yes, if it's the hash part of the url, there would'nt be a space there. For filtering the returned content based on a selector, the space should be there. – adeneo Nov 06 '12 at 17:25

load div content from external file

3 Answers3