Question

I am iterating over a List of Items with <ui:repeat>. Inside I use javascript to process some data for each iteration and want to output it in a div that is created for every iteration.
The following code will of course output the data only for the last iteration (the ones before are overwritten). I can’t think of an approach how to do it.

this is the jsf code:

<ui:repeat var="item" value="#{someBean.items}">
    <script type="text/javascript">
        var item = "#{item.id}";
        showItem();
    </script>
    <div id="#{item.id}"></div>
</ui:repeat>

this is the function:

function showItem(){
    document.getElementById(item).innerHTML = 'this is an item';
}

Answer 1

Try doing this:

<ui:repeat var="item" value="#{someBean.items}">
    <div id="#{item.id}"></div>
    <script type="text/javascript">
        showItem("#{item.id}");
    </script>
</ui:repeat>

–

function showItem(item){
    document.getElementById(item).innerHTML = 'this is an item';
}

The reason being is that even though you have each var wrapped in a script tag they’re all on the global scope, hence over writing each other on each iteration of the loop.

To give each script block it’s own scope you could wrap the vars in a self executing function like this, but with your current logic it seems like it’d be a bit of an overkill:

<ui:repeat var="item" value="#{someBean.items}">
    <div id="#{item.id}"></div>
    <script type="text/javascript">
    (function(){
        var item = "#{item.id}";
        showItem(item);
    })();
    </script>
</ui:repeat>