Load pages with ajax

Question

I have a question. I build a script thats load other pages with script. But is my first time.

I have a html list with url's

<ul class="siblings-list">
    <li>http://www.nunu.com/online-werkplek/probeer-de-demo</li>
    <li>http://www.nunu.com/online-werkplek/prijzen</li>
</ul>

I want load this url's in my site. I would like the URLs that are in the list. In my site loading. I want load the content in my site.

I make a script that get the url's and put the url's in a array. Like this:

$(document).ready(function() {
    var list = $('.siblings-list');

    // remove the first list item
    $('li:first-child',list).remove();

    var arr = $('.siblings-list li').map(function() { return $(this).text() }).get();

    $('.main').load($(arr).get( 1 ), function() {

    });
});

But how can I now these pages load in me site? How can i load this pages url's in my site. The content of the url's must be load in the main div.

Thank you for helping

Answer 1

It would be better to use separate paragraphs/divs like:

<div class="main">
    <div class="first"></div>
    <div class="second></div>
</div>

And then to load each of your URLs seperately into this paragraphs via .load().

$('.main').load('http://www.newdayatwork.com/online-werkplek/probeer-de-demo', function()        
{

});

only loads one of your two urls. Otherwise you could create a function, which creates a collection of URLs from your list-Elemennts. If you structure your main-div accordingly you coud do something like li[x] --> loads (sub-)div[x].

Besides: What kind of serverside-technology are you using? It would make much more sense to "include" these pages at first load to the appropriate location in your DOM and after that swap dynamically with AJAX.