How to partially reload a ui:repeat?

Question

We\'ve got a web application built on JBoss 7.1 with JSF2 and Primefaces 3.3.

On one of our page, there is a ui:repeat displaying 10 it

Answer 1

For situations like this, I completely bypass JSF and use JAX-RS service with jQuery AJAX. That approach will help you build much better applications than just the AJAX support from JSF. Here is the basic technique.

In the XHTML page, simply have a placeholder for the list:

Load more...

When the page loads, make an AJAX request to populate the initial list. Here is sample code. There may be typos, but you get the idea.

var nextStart = 0;

$(function() {
    loadNext();
});

function loadNext() {
    $.ajax({
        type: "GET",
        url: "api/items?start=" + nextStart,
        success: function(data) {
            appendToList(data);
            nextStart += data.length;
        }
    });
}

function appendToList(data) {
    //Iterate through data and add to DOM
    for (var i = 0; i < data.length; ++i) {
        $("#item_list").append($("
", {text: data.productName}));
    }
}