DataTable and Javascript

saprobionte · 20 Jun 2011, 15:54

Hi everyone,

I'm new here, and I just started Primefaces a few days ago. I try some examples, it works pretty well. Now I start to understand what i'm doing, i get a problem.

I create a Datatable this way :

<p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rows="10"
selection="#{tableBean.selectedCar}" selectionMode="single"
rowSelectListener="changeimg()" onRowSelectUpdate="display growl">

... some code for the table ...
</p:dataTable>

Just after, I screen an image :

<img src="mypicture.jpg" id="mypicture" alt="my Picture" />

The fact is I create a Javascript function named changeimg. When i click on a row, i want to change the picture by another one, but i get this error :

"Unable to find matching navigation case with from-view-id" And I don't know why.

How could I do that ? The best should be I can specify the picture to display, regarding the row numbers.

Edit : of course, if it's possible without javascript, that's okay for me

saprobionte · 20 Jun 2011, 18:31

After some research this afternoon, i'm still stuck.

I try : onselectStart="imagechange.changeimg();" instead of rowSelectListener, but that not works. My changeimg() function is in a js file that I include in the head, maybe should I put directly js code in xhtml page ?

Moreover, I see an example using Ajax. I know a little bit about Ajax, but in that case, when i put :

<p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}" update=":form:display :form:growl" oncomplete="carDialog.show()" />
<p:ajax event="rowUnselect" listener="#{tableBean.onRowUnselect}" update=":form:growl"/>

I got an error : <p:ajax> Parent not an instance of ClientBehaviorHolder: org.primefaces.component.datatable.DataTable@961d1c

I have look after this error, but found nothing interesting. I do not found how to use the p:ajax, could it be be the right way to solve my problem ?

leventgny · 20 Jun 2011, 22:05

After organizing data table, simply try this way of navigation;

..
<p:ajax event="rowSelect" listener="#{galleryBean.onRowSelect}" update=":form:mypicture" oncomplete="someJS()" />
..
<h:graphicImage value="#{galleryBean.selectedImagePath}" id="mypicture" alt="my Picture" />
..

Moreover, you can check your environmental variables like PF version and showcase compatibility.

saprobionte · 20 Jun 2011, 23:25

Thanks a lot for your advise. But i just tried, and it does not work. I changed and adapt your two code parts, and checked my PF version. I updated to 3.1M version, but I still got this error :

/index.xhtml @79,130 <p:ajax> Parent not an instance of ClientBehaviorHolder: org.primefaces.component.datatable.DataTable@22e349

I discover Ajax, so what can i have forgotten ? Is there an xml or a library to add to my project ? Moreover, I do not understand the error, what is it ?

leventgny · 21 Jun 2011, 00:12

Can you write your related js and xhtml codes? Or if there is any specific error lines?

21 Jun 2011, 10:32

I thought that datatable was only changed in current M2 snapshot?

saprobionte · 21 Jun 2011, 10:56

For sure :

Code: Select all

index.xhtml :
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
        <script  type="text/javascript" src="imagechange.js"></script>
        <title>Test</title>
        
    </h:head>
    <h:body>
        <h:form>              
            <p:growl id="growl" showDetail="true"/>  
            <table>
                <tr>
                    <th>
                        <p:dataTable var="car" value="#{tableBean.cars}" paginator="true" rows="10"  
                                     selection="#{tableBean.selectedCar}" selectionMode="single">
                            
                            <p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}" update=":form:mypicture" oncomplete="changeimg()" />
                            <f:facet name="header">  
                                Select a row to display a message  
                            </f:facet>  
                            
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Model" />  
                                </f:facet>  
                                <h:outputText value="#{car.model}" />  
                            </p:column>  
                            
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Year" />  
                                </f:facet>  
                                <h:outputText value="#{car.year}" />  
                            </p:column>  
                            
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Manufacturer" />  
                                </f:facet>  
                                <h:outputText value="#{car.manufacturer}" />  
                            </p:column>  
                            
                            <p:column>  
                                <f:facet name="header">  
                                    <h:outputText value="Color" />  
                                </f:facet>  
                                <h:outputText value="#{car.color}" />  
                            </p:column>  
                        </p:dataTable>  
                    </th>  
                    <td>
                        <h:graphicImage value="test.jpg" id="mypicture" alt="mypicture" />
                    </td>
                </tr>            
            </table>           
        </h:form>  
    </h:body>
</html>

Code: Select all

imagechange.js :

function changeimg(){
    document.getElementById("mypicture").src="test2.jpg";
}

21 Jun 2011, 12:58

Could you try M2 snapshot?

saprobionte · 21 Jun 2011, 14:41

I assume you talk about maven2, but i do not create a maven project, just a simple web application project. I try to take snapshot, but it seems it does not return value. How could I do ?

21 Jun 2011, 16:12

I meant Primefaces M2 Snapshot.
Please download it here (http://repository.prime.com.tr/org/prim ... -SNAPSHOT/) and try it with this version.

DataTable and Javascript

Who is online