JSF dataTable und graphicImage (mit JQuery)

[jottyfan]

Wie kann ich im ID-Attribut von h:graphicImage auf ein Attribut meiner Element-Liste zugreifen? Folgender Code funktioniert natürlich nicht; wie wäre es richtig?

[XML]
<h:dataTable value="#{myList}" var="elem">
<h:column>
<h:graphicImage id="click#{elem.id}" name="/images/click.png" />
<div id="open#{elem.id}" style="display: none">
anything
</div>
<script type="text/javascript">
$("#click<h😱utputText value="#{elem.id}" />").click(function()
{
$("#open<h😱utputText value="#{elem.id}" />").toggle('fast');
});
</script>
</h:column>
</h:dataTable>
[/XML]

Folgende Funktion soll erreicht werden: Beim Click auf das Image mit der ID "click1" wird das div mit der ID "open1" aufgeklappt, beim Image-ID = "click2" das Div mit ID "open2" usw.

 

[jottyfan]

Gibt es keine Ideen?

 

[Fant]

Nicht direkt, aber vielleicht ist das hier ja eine Alternative für dich?

PrimeFaces - ShowCase

Gruß Fant

 

[jottyfan]

Nicht direkt, aber vielleicht ist das hier ja eine Alternative für dich?

PrimeFaces - ShowCase

Gruß Fant

Danke für den Hinweis, aber ich suche eine Lösung direkt in JSF 2, ohne weitere Bibliotheken. Hat sonst keiner so ein Problem?

 

[jottyfan]

Habe eine Lösung gefunden, die nicht besonders schön ist, aber funktioniert; Verbesserungsvorschläge sind trotzdem willkommen. Die Idee ist, das Element der Liste durch indexOf zu ermitteln und als Referenz zu verwenden (RowIndex ist zu aufwendig, da müßte erst in der Bean wieder die dataTable gekapselt werden):

[XML]
<h:dataTable value="#{myList}" var="elem" id="t">
<h:column>
<h:graphicImage id="img" name="/images/click.png" />
<div id="t:{myList.indexOf(elem)}:sub" style="display: none">
anything
</div>
<script type="text/javascript">
$("#t\\:<h😱utputText value="#{myList.indexOf(elem)}" />\\:img").click(function()
{
$("#t\\:<h😱utputText value="#{myList.indexOf(elem)}" />\\:sub").toggle('fast');
});
</script>
</h:column>
</h:dataTable>
[/XML]

Damit hat dann jedes div eine eindeutige ID und kann referenziert werden; die ID in h:graphicImage wird automatisch um die ID von dataTable - column erweitert.