rich:modalPanel + f:attribute not loading values

[meetoblivion]

I"ve got some markup defined like this

<rich:panel id="images">
 <f:facet name="header">Images</f:facet>
 <rich:dataGrid columns="2" elements="12" width="450px" value="#{imgSearch.searchResults}" var="image" style="width:360px;">
 <rich:panel style=" width : 180px;">
 <f:facet name="header"><h:outputText value="#{image.fileName}" /></f:facet>
 <img src="/images/img/60/#{image.fileName}" />
 <h:outputText value="#{image.fileName}" /><br />
 <ui:repeat value="#{image.imageProperties}" var="imgProp">
 <h:outputText value="#{imgProp.key}" /> : <h:outputText value="#{imgProp.value}" /><br />
 </ui:repeat>
 <a4j:commandLink actionListener="#{taskExecutor.addSwap}" value="Swap" reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}">
 <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> | <a4j:commandLink
 actionListener="#{taskExecutor.delete}" value="Delete" reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}">
 <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> | <a4j:commandLink
 actionListener="#{propertyEditor.populate}" value="Add Property" action="#{propertyEditor.blank}"
 reRender="modal_pnl_propEditor" ajaxSingle="true"
 oncomplete="Richfaces.showModalPanel('pnl_propEditor',{width:350,top:200})">
 <f:attribute name="imageFileName" value="#{image.fileName}" />
 </a4j:commandLink>
 </rich:panel>
 </rich:dataGrid>
 <rich:modalPanel height="200" id="pnl_propEditor" moveable="true" width="150">
 <f:facet name="header">Property Editor</f:facet>
 <rich:panel id="modal_pnl_propEditor">
 <h:panelGrid columns="2">
 <h:outputText value="Image:"/>
 <h:outputText value="#{propertyEditor.imageFileName}" />
 <h:outputText value="Property:" />
 <h:inputText value="#{propertyEditor.propertyName}" />
 <h:outputText value="Value:" />
 <h:inputText value="#{propertyEditor.propertyValue}" />
 <a4j:commandButton action="#{propertyEditor.save}" oncomplete="Richfaces.hideModalPanel('pnl_propEditor');" value="Save"
 reRender="pnl_tasks,pnl_results"/>
 <a4j:commandButton action="#{propertyEditor.blank}" oncomplete="Richfaces.hideModalPanel('pnl_propEditor');" value="Cancel"/>
 </h:panelGrid>
 </rich:panel>
 </rich:modalPanel>
 </rich:panel>

My issue is that I need to get that #{image.fileName} into the modal panel. Based on what I did, I feel like it should work, given that my populate method pushes everything into the correct bean. However, my f:attribute is coming up null. I'm sure I could work w/ the imageId too, but it seems like this should be working.

[nbelaevski]

Hi,

Works for me perfectly with 3.3.1.GA/JSF RI 1.2_12:

<rich:dataGrid value="#{forum5Bean.lotOfData}" var="var">
 <a4j:commandLink ajaxSingle="true" actionListener="#{forum5Bean.populate}" value="#{var }">
 <f:attribute name="item" value="#{var}" />
 </a4j:commandLink>

 </rich:dataGrid>

public void populate(ActionEvent event) {
 System.out.println(event.getComponent().getAttributes().get("item"));
 }

If imgSearch bean is request-scoped, this can be the source of the problem - try session scope then.

[meetoblivion]

environment sounds about the same. JBoss AS 5.1 (which comes w/ the latest JSF 1.2, I'd assume), Richfaces 3.3.1. I'm using WebBeans.

I tried converting to imageId, no luck. Still not passing in.

The Image type itself is defined as:

 private long imageId;
 private long version;
 private String fileName;
 private String skuAssociated;
 private int altViewPosition;
 private boolean active;

imgSearch is session scoped, and is defined as:

 public List<Image> getSearchResults() {
 return searchResults;
 }
 public void setSearchResults(List<Image> searchResults) {
 this.searchResults = searchResults;
 }
 public void search() {
 String sku2 = getSkuCode()+"_s2_"+getSku();
 logger.error("Found sku2: "+sku2);
 //Query q = entityManager.createQuery("select i from Image i where i.skuAssociated = :sku").setParameter("sku", sku2);
 //searchResults = q.getResultList();
 setSearchResults(imageDAO.findBySku(sku2));
 }

and my populate is defined as:

 public void populate(ActionEvent ae) {
 Map<String,Object> attrs = ae.getComponent().getAttributes();
 Set<String> keys = attrs.keySet();
 for(String key : keys){
 System.out.println("Key: "+key);
 String v = attrs.get(key).toString();
 System.out.println("Value: "+v);
 }
 this.propertyName = null;
 this.propertyValue = null;
 this.imageFileName = null;
 this.edit = false;
 if(attrs.containsKey("propertyName")) {
 this.propertyName = attrs.get("propertyName").toString();
 }
 if(attrs.containsKey("propertyValue")) {
 this.propertyValue = attrs.get("propertyValue").toString();
 }
 if(attrs.containsKey("imageFileName")) {
 this.imageFileName = attrs.get("imageFileName").toString();
 }
 if(attrs.containsKey("edit")) {
 String em = attrs.get("edit").toString();
 if(em.equalsIgnoreCase("Y")) edit= true;
 }
 }

and the only output i get is

07:45:05,491 INFO [STDOUT] Key: com.sun.facelets.MARK_ID
07:45:05,492 INFO [STDOUT] Value: -595634370_2_1863393f

[meetoblivion]

BTW, other a4j:commandLinks on the page work correctly. I have this right before the modalpanel stuff, and it works perfectly.

<a4j:commandLink actionListener="#{taskExecutor.addSwap}" value="Swap" reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}">
<f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> | <a4j:commandLink actionListener="#{taskExecutor.delete}" value="Delete" reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}"> <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> |

[ilya_shaikovsky]

so you have modal ni the same form as the link.
so according to this :

<h:inputText value="#{propertyEditor.propertyValue}" />

inside the modal the empty input getting submitted to propertyEditor.propertyValue and it becomes null.

So just use ajaxSingle true on the link which populates the modal(not acceptable for this case) or just move the modal from this form and define the form inside the modal itself.(this should be used according to modal panel limitations).

[ilya_shaikovsky]

sorry.. missed ajaxSingle on your link.. :/

In any way could you try to move modalPAnel outside the form where submit happens.. You will need thisanyway because you will need to make submit from inside modal panel

[meetoblivion]

Well, at this point, this is my entire facelet. The issue remains.

<!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:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j">
 <ui:composition template="template.xhtml">
 <ui:define name="pageTitle">Image Manipulation Tool</ui:define>
 <ui:define name="pageHeader">Edit/Delete Images &amp; Properties</ui:define>
 <ui:define name="body">
 <rich:panel rendered="#{login.loggedIn}">
 <a4j:form id="searchForm">
 <rich:simpleTogglePanel label="Search (click here)" opened="true" switchType="client">
 <h:panelGrid columns="5" style=" width : 546px;">
 <h:outputText value="Division: " />
 <rich:comboBox defaultLabel="Select Division" value="#{imgSearch.division}">
 <f:selectItem itemValue="KIDS" itemLabel="KIDS"/>
 <f:selectItem itemValue="YOUTH" itemLabel="YOUTH"/>
 <f:selectItem itemValue="OUTRWEAR" itemLabel="OUTRWEAR"/>
 <f:selectItem itemValue="SPORTS" itemLabel="SPORTS"/>
 <f:selectItem itemValue="COATS" itemLabel="COATS"/>
 <f:selectItem itemValue="LINEN" itemLabel="LINEN"/>
 <f:selectItem itemValue="ACCSRY" itemLabel="ACCSRY"/>
 <f:selectItem itemValue="MENS" itemLabel="MENS"/>
 </rich:comboBox>
 <h:outputText value="Sku: " />
 <h:inputText value="#{imgSearch.sku}" />
 <a4j:commandLink action="#{imgSearch.search}" value="Search" reRender="images"/>
 </h:panelGrid>
 </rich:simpleTogglePanel>
 </a4j:form>
 <h:panelGrid columns="2">
 <rich:panel id="images">
 <f:facet name="header">Images</f:facet>
 <a4j:form id="gridForm">
 <rich:dataGrid columns="2" elements="12" width="450px" value="#{imgSearch.searchResults}" var="image" style="width:360px;">
 <img src="/images/img/60/#{image.fileName}" />
 <h:outputText value="#{image.fileName}" /><br />
 <ui:repeat value="#{image.imageProperties}" var="imgProp">
 <h:outputText value="#{imgProp.key}" /> : <h:outputText value="#{imgProp.value}" /><br />
 </ui:repeat>
 <a4j:commandLink reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}"
 actionListener="#{taskExecutor.addSwap}" value="Swap">
 <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> | <a4j:commandLink
 actionListener="#{taskExecutor.delete}" value="Delete" reRender="pnl_tasks,pnl_results"
 action="#{taskExecutor.act}"><f:attribute name="imageId" value="#{image.imageId}" />
 </a4j:commandLink> | <a4j:commandLink
 actionListener="#{propertyEditor.populate}" value="Add Property"
 reRender="modalForm" ajaxSingle="true"
 oncomplete="Richfaces.showModalPanel('pnl_propEditor',{width:350,top:200})"><f:attribute
 name="imageFileName" value="#{image.imageId}" />
 </a4j:commandLink>
 </rich:dataGrid>
 </a4j:form>
 </rich:panel>
 <a4j:form id="rightPanels">
 <rich:panel id="pnl_tasks" style=" width : 180px;">
 <f:facet name="header">Tasks</f:facet>
 <ui:repeat value="#{taskExecutor.taskList}" var="task">
 <h:outputText value="#{task.name}" escape="false"/> - <h:outputText value="#{task.taskDef}" escape="false"/><br />
 </ui:repeat>
 </rich:panel><br />
 <rich:panel id="pnl_tools" style=" width : 180px;">
 <f:facet name="header">Tools</f:facet>
 <a4j:commandLink actionListener="#{taskExecutor.addTask}" action="#{taskExecutor.act}" value="Condense Images" reRender="pnl_tasks,pnl_results">
 <f:attribute name="task" value="condense" />
 </a4j:commandLink><br />
 <a4j:commandLink action="#{taskExecutor.clearTasks}" value="Clear Tasks" reRender="pnl_tasks,pnl_results"/><br />
 <a4j:commandLink action="#{taskExecutor.executeTasks}" value="Execute Tasks" reRender="pnl_tasks,pnl_results" />
 </rich:panel><br />
 <rich:panel id="pnl_results" style=" width : 180px;">
 <f:facet name="header">Results</f:facet>
 <ui:repeat value="#{taskExecutor.taskResults}" var="result">
 <h:outputText value="#{result}" escape="false" /><br />
 </ui:repeat>
 <a4j:poll id="poll" interval="500" enabled="#{taskExecutor.poll}"
 reRender="pnl_results" />
 </rich:panel>
 </a4j:form>
 </h:panelGrid>
 </rich:panel>
 <rich:modalPanel height="200" id="pnl_propEditor" moveable="true" width="150">
 <f:facet name="header">Property Editor</f:facet>
 <a4j:form id="modalForm">
 <h:panelGrid columns="2">
 <h:outputText value="Image:"/>
 <h:outputText value="#{propertyEditor.imageFileName}" />
 <h:outputText value="Property:" />
 <h:inputText value="#{propertyEditor.propertyName}" />
 <h:outputText value="Value:" />
 <h:inputText value="#{propertyEditor.propertyValue}" />
 <a4j:commandButton value="Save"
 action="#{propertyEditor.save}" oncomplete="Richfaces.hideModalPanel('pnl_propEditor');"
 reRender="pnl_tasks,pnl_results"/>
 <a4j:commandButton action="#{propertyEditor.blank}"
 oncomplete="Richfaces.hideModalPanel('pnl_propEditor');" value="Cancel"/>
 </h:panelGrid>
 </a4j:form>
 </rich:modalPanel>
 </ui:define>
 </ui:composition>
</html>

[meetoblivion]

I also no longer believe it has anything to do w/ a modal. I can reproduce same thing w/ a rich panel that dynamically shows.

[ilya_shaikovsky]

please feel free to send war sample for this case to me directly (email in profile) or share at sendspace for example.