CODEWITHSUNDEEP
phpjqueryloadexternal
Daniel Michael Ashton
Daniel Michael Ashton

Reputation: 33

load div content from external file

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.

Upvotes: 1

Views: 2012

Answers (3)

Darrrrrren
Darrrrrren

Reputation: 6078

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.

Upvotes: 0

paquettg
paquettg

Reputation: 1374

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
    });
});

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195962

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

Run your code after the DOM ready event

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

Upvotes: 1

Related Questions