Question

I am using jCarousel. I created a button “New Posts”, when the user click on “New Posts” button, it will recall a javascript function goer() to get the new records from database and display the new records on the website. My problem is everytime the user click on “New Posts” button, it will reload the page. I don’t want it reload the page, how to use Ajax to prevent reload page? Below is my codes :

function mycarousel_itemLoadCallback(carousel, state)
{
    // Since we get all URLs in one file, we simply add all items
    // at once and set the size accordingly.
    if (state != 'init')
        return;
var str="<?php echo $username1; ?>";
    jQuery.get("usermessage.php?username="+str, function(data) {                                                     
        mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
    });
};

function mycarousel_itemAddCallback(carousel, first, last, data)
{
    // Simply add all items at once and set the size accordingly.
    var items = data.split('|');
    for (i = 0; i < items.length; i++) {
        carousel.add(i+1, mycarousel_getItemHTML(items[i]));
    }
    carousel.size(items.length);
};

function mycarousel_getItemHTML(url)
{
    return '<li style="width:300px; height:30px;">' + url + '</li>';
};

function goer(){
    jQuery('#mycarousel').jcarousel({                     
        itemLoadCallback: mycarousel_itemLoadCallback,
        vertical: true,
        scroll: 7,
        visible: 9,
        animation: 0
    });
};

function getnewposts(){
    goer();
}

<a href="" onclick="getnewposts()">New Posts</a>

Is it I need to use Ajax to retrieve data from usermessage.php and use Ajax to display data on website then the page will not reload anymore? I don’t know how to convert the jquery code of retrieving data into Ajax code. Please help.

Answer 1

Ok, I got the answer already. <a href="javascript: return false" onclick="getnewposts()"> or <a href="#" onclick="getnewposts()"> can prevent page is loaded.