Loading external content using jQuery load() and json

Question

I've not much experience with ajax and would like to know if it is possible to load external content into a bunch of empty divs using jQuery's load() method + json.

I have the following as a starting point:

<div id="aboutUs"></div>
<div id="whatWeDo"></div>
<div id="ourValues"></div>
<div id="ourExpertise"></div>

var loadPages = { 'pageData' : [
    {   
        'loadInTo'      :    '#aboutUs',
        'url'           :   'http://www.website.co.uk/aboutUs.html',
        'urlSection'    :   '#aboutUs' 
    },
    {   
        'loadInTo'      :    '#whatWeDo',
        'url'           :   'http://www.website.co.uk/whatWeDo.html',
        'urlSection'    :   '#whatWeDo' 
    },
    {   
        'loadInTo'      :    '#ourValues',
        'url'           :   'http://www.website.co.uk/ourValues.html',
        'urlSection'    :   '#ourValues' 
    },
    {   
        'loadInTo'      :    '#ourExpertise',
        'url'           :   'http://www.website.co.uk/ourExpertise.html',
        'urlSection'    :   '#ourExpertise' 
    }   
] }

The 'loadInto' specifys where I want the html to be inserted on the page, 'url' is the page I'm loading from and 'urlSection' is portion of the url I want to load in.

Can anyone help point me in the right direction? Many thanks in advance.

You want to load json data or just plain html?

Steve
– Steve

2011-10-21 10:42:10 +00:00
Commented Oct 21, 2011 at 10:42 — Steve
– Steve, Commented Oct 21, 2011 at 10:42

Steve · Accepted Answer · 2011-10-21 10:51:07Z

1

Dont know why you have loadInTo and urlSection as they are the same but you can do:

for(i=0; i < loadPages.pageData.length ; i++){
    var current = loadPages.pageData[i];
    $(current.urlSection).load(current.url);
}

If the website content is not on the same site, you will have to use json

http://api.jquery.com/jQuery.ajax/

See crossDomain.

edited Oct 21, 2011 at 10:51

answered Oct 21, 2011 at 10:45

Steve

2,9972 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mtwallet Over a year ago

I should explain I'm a designer not a developer and I'm trying get creative here and suspect this will lead me down a long path of much head scratching! But essentially 3 of the four divs would be hidden from view but qued up ready to transition in much like a jQuery slider. I'm thinking I can reuse the code to load in other levels of navigation, so the above would be the top level elements if a uses clicks a second level nav it ques up all the pages for that level and so on. Anyway you solution works just fine, thanks for the help i appreciate it

Steve Over a year ago

You can still use this but set the divs to style="display:hidden" then when you click on the nav just use $('#div-name').show() or .hide() where appropriate.

Richard Edwards · Accepted Answer · 2011-10-21 10:54:00Z

0

If you want to load in external content, you need to deal with cross-domain issues. There are multiple ways to deal with this - you may want to research cross-domain ajax requests, there is a lot of documentation on work-arounds.

Is there any reason why you would pull in content from another URL the host site?

For what you want to do, using a proxy-like method would be best, assuming you have something like PHP enabled on the host.

Create a php file called 'AJAboutUs.php' and put in the following content:

<?php
include('http://www.website.co.uk/aboutUs.html');
?>

Then make your load() function reference 'AJAboutUs.php' - as this is a local file it should display the contents.

answered Oct 21, 2011 at 10:54

Richard Edwards

2,0601 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

Loading external content using jQuery load() and json

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related