jsf/primefaces dataTable with links; wrong one opened/displayed

Question

I have a primefaces dataTable with several URLs as data. There is one URL per line. A line has a button. If you click it, a dialog is opened, containing a iframe with the website of the corresponding URL.

This is the (shortened) xhtml:

<p:dataTable id="transResult" rendered="#{not empty urlList}"
             var="aUrl"
             value="#{urlList}">
   <p:column ...></p:column>
   ...
   <p:column>
       <p:commandButton id="urlBtn" value="#{aUrl}"     
                        onclick="PF('showURL').show();"/>

       <p:dialog id="urlDialog" widgetVar="showURL">
           <h:outputLabel value="URL:&#160;#{aUrl}"/>
           <iframe src="#{aUrl}"/> 
       </p:dialog>
   </p:column>
</p:dataTable>

The table with the buttons is displayed correctly:

|url1|
|url2|
...

If I have a look at the hidden dialogs with firebug, the URLs are put correctly! Also the id's are generated corrctly:

transResult:0:urlDialog
transResult:1:urlDialog
...

Problem: But when I click on a button, always the dialog with the last URL is openend.

Any idea why this goes wrong?

I believe you cant use aUrl in the dialog. If you put the dialog last in xhtml where it belongs that would have been clearer. You'll have to set a property on the bean when button is clicked, make the dialog look at this property, and don't forget to `update` the dialogs content on click of button. The reason you always see the last one is probably that you currently have many dialogs with the same widgetVar, so it will just pick the last one — Jaqen H'ghar, Mar 22 '17 at 21:10
aUrl is just a String. As any other data in a dataTable, it is put correctly at etc. in the dialog. I checked this with firebug. But the idea with the same widgetVar is interesting. — jahuer1, Mar 23 '17 at 08:10
Anyhow, you should'nt put the dialog inside the datatable in the first place. I'd make a common dialog placed last in xhtml and replace the content when button is clicked. http://stackoverflow.com/questions/30206643/primefacess-dialog-appendto-property-what-it-useful-for — Jaqen H'ghar, Mar 23 '17 at 08:20
@JaqenH'ghar is right. Also I doubt for the Class that is used in urlList. Does it have equals and hasCode Method? — Jitesh, Mar 24 '17 at 14:32

score 0 · Answer 1 · answered Mar 24 '17 at 13:32

I found a solution that seems to work. The base is to have different widgetVar.

<p:dataTable id="transResult" rendered="#{not empty urlList}"
         var="data"
         value="#{urlList}">
    <p:column ...></p:column>
    ...
    <p:column>
        <p:commandButton id="urlBtn" value="#{aUrl}"     
                         onclick="PF('showURL#{data.id}').show();"/>

       <p:dialog id="urlDialog" widgetVar="showURL#{data.id}">
           <h:outputLabel value="URL:&#160;#{data.aUrl}"/>
           <iframe src="#{data.aUrl}"/> 
       </p:dialog>
   </p:column>
</p:dataTable>

So we have an ID per row which is also added to the widgetVar to make them different.

Note that with this solution everything is calculated when the table is created. So there is nothing "dynamic". But for my needs this is no problem.

jsf/primefaces dataTable with links; wrong one opened/displayed

1 Answers1