Jquery tabs - use onclick function to get a content

Question

After having fetched external content via Ajax, I want to get an internal content. For that I tried to use onclick but it doesn't work. I have an error saying:

XMLHttpRequest cannot load javascript:void(0);. Cross origin requests are only supported for HTTP.

HTML:

<div id="tabs">
<ul>
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="javascript:void(0);" onclick="javascript:loadTest();">tab3</a></li>
</ul>
<div id="tab1">
     <p>blabla</p>      
</div>  
<div id="tab2">
     <p>blabla</p>      
</div>
</div>

JQUERY:

function loadTest(){
    return "this content must be displayed tab3";
}

How can I get any data from the client to put it into a div corresponding to tab3

Answer 1

Since you're already using jQuery UI Tabs , I would suggest you to make use of activate events .

$(function () {
    $("#tabs").tabs({
        activate: function (event, ui) {
            alert(loadTest());
        }
    });
});

JSFiddle

Answer 2

Why do you use a onClick? jQuery has a function to handle content that is not yet on the page.

You should use the .on function from jQuery. You can do it like this:

$(document).ready(function()
{
    $('#tabs').on('click', 'li', loadtest)
});

JSfiddle: http://jsfiddle.net/DyRQZ/