jCarousel - buttonNextCallback is not called when there are no more items to load

Question

My scenario is to load only 7 items initially and when user clicks "Next" button a DB call will be made and I need to fetch the next 7 items.

Default number of items to be displayed on jCarousel is set 7 and initially I load only 7 items. By default both the "Prev" and "Next" button will look disabled as there are no more items to scroll. Programmatically I enable the "Next" button and it looks enabled when viewed in browser. But When I click "Next" button the respective event handler is not getting triggered. But if I populate more than 7 items and click on "Next" button the event handler is called.

function BindItems()
{
 $("#divItems").jcarousel({
   buttonNextCallback:MyNext,
   buttonPrevCallback:MyPrev});
}

function MyNext()
{
 alert("Next");
 // Planned to make a AJAX call to fetch next 7 items here
}

function MyPrev()
{
 alert("Prev");
 // Planned to make a AJAX call to fetch previous 7 items here
}

Why is this behavior? How do I need to proceed to achieve my functionality?

Answer 1

Two options I can think of:

1) Add a seperate click event on the next button to which fires first, loads the content then fires the plugin callback.

2) Load 8 items to start with. I'm not sure if this would cause issues on our site but if you had the 8th items you'd always be one step ahead.

Are neither of these viable in your case?