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.

Answer 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.