javascriptjqueryajax

jQuery Ajax Function


I am trying to write a jQuery Ajax function, to reduce the amount of code in the page because the script is called a few times in the page. I can't seem to get it to work. Here is the code i have:

var loadURL = $(this).attr('href');
function load(){
$.ajax({
    url: loadURL,
    type: 'GET',
    cache: true,
    data: {
        delay: 4
    },
    success: function(data) {
        $('#load').html(data)
    }
    });
return false;}
$('#one').click(function(){ load(); });
$('#two').click(function(){ load(); });
$('#three').click(function(){ load(); });
<a href="one.php" id="one">Two</a>
<a href="two.php" id="two">Two</a>
<a href="three.php" id="three">Two</a>

can anyone guide me here please?


Solution

  • i think the way you are getting href is wrong

    function load(item){
    var loadURL = $(item).attr('href');
    $.ajax({
        url: loadURL,
        type: 'GET',
        cache: true,
        data: {
            delay: 4
        },
        success: function(data) {
            $('#load').html(data)
        }
        });
    return false;}
    $('#one').click(function()
    { 
    load($(this)); 
    return false; //you should mention return false here
    });