1 2 Previous Next 16 Replies Latest reply on May 4, 2007 12:31 PM by sergeysmirnov

problem with modalPanel from 3.0.1 snapshot

moldovan Apr 25, 2007 9:30 AM

Hello!

I use a modalPanel for my Account-Blocking-Mechanism. the content of the panel is a selectOneListBox to choose the blockreason, and a commandButton, which calls the actionmethod for account-blocking.

I implemented it sucessfull with version 3.0.0 of Richfaces.

But with a 3.0.1 snapshot i run into problems.

First, the short cutout from code:

<rich:modalPanel id="blockaccount_popup" minHeight="250" minWidth="450" height="250" width="450" zindex="2000">
 <f:facet name="header">
 <h:outputText value="#{messages.accountinfo_popup_headerlabel}" />
 </f:facet>
 <f:facet name="controls">
 <t:graphicImage border="0" value="images/icon_close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('contentform:accountinfocontent:blockaccount_popup')" />
 </f:facet>
 <h:panelGrid style="text-align: left; padding: 20px;">
 <f:facet name="header">
 <h:outputText style="color: red;" value="#{messages.popup_label_reason}" />
 </f:facet>
 <h:selectOneListbox style="width: 300px;" value="#{accountManagement.accountBlockReason.selected}" size="5" >
 <f:selectItems value="#{accountManagement.accountBlockReason.list}" />
 </h:selectOneListbox>
 </h:panelGrid>
 <h:panelGrid styleClass="positioning_verticalcenter">
 <h:commandLink action="#{accountManagement.blockAccount}" value="#{messages.accountinfo_button_blockaccount_label}" />
 </h:panelGrid>
</rich:modalPanel>

The first new problem is:
When i select a blockreason, and after that i click the button, i see, that setters in the managed-bean are not called.
But commandButton - action is called.

So, i tried to surround the content of the modalPanel with a form, but with the affect, that the content of the panel wasn't shown any more.

I don't think that I'm making something wrong, because with the 3.0.0 version it runs successfull.

Any idea, which can be the problem?

thx, thomas!

1. Re: problem with modalPanel from 3.0.1 snapshot

alexanderbelov Apr 25, 2007 9:52 AM (in response to moldovan)

New version of modalPanel must have form inside. See other posts.
Actions
2. Re: problem with modalPanel from 3.0.1 snapshot

moldovan Apr 25, 2007 10:04 AM (in response to moldovan)

You are right! I had to surround the content of the modalpanel with a form.

But i have also posted, that, when i include a form in my modalPanel, the content (my selection, my button, ..) will disappear.

So, why I'm getting an empty content in my modalPanel, when this content is surrounded with a form?
Actions
3. Re: problem with modalPanel from 3.0.1 snapshot

moldovan Apr 26, 2007 6:11 AM (in response to moldovan)

Any ideas, why my modalPanel is empty, when i surround the content of the modalPanel with a form?
Actions
4. Re: problem with modalPanel from 3.0.1 snapshot

alexanderbelov Apr 26, 2007 8:21 AM (in response to moldovan)

Please your code of modalPanel with form inside.
Actions

5. Re: problem with modalPanel from 3.0.1 snapshot

moldovan Apr 26, 2007 10:41 AM (in response to moldovan)

JSP-Site from my written sample-webapp:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>

<html>
 <head>
 <title>AJAX - WebApplication</title>
 </head>
 <body>
 <f:view>
 <h:form id="siteform">
 <a4j:outputPanel ajaxRendered="true">
 <h:messages showDetail="false" showSummary="true" />
 </a4j:outputPanel>
 <h:outputLink value="javascript:Richfaces.showModalPanel('mp',{width:450, top:200})" >
 <h:outputText value="Popup-Box öffnen" />
 </h:outputLink>
 <div>
 <rich:modalPanel id="mp" minHeight="200" minWidth="450" height="200" width="450" zindex="2000">
 <f:facet name="header">
 <h:outputText value="PopupBox - Title" />
 </f:facet>
 <f:facet name="controls">
 <h:outputText value="X" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
 </f:facet>
 <h:form>
 <h:outputText value="Bitte machen Sie ihre Eingabe: " />
 <h:inputText value="#{modalPanelBean.inputText}" />
 <h:panelGrid style="margin-left: auto; margin-right: auto;">
 <h:commandLink value="Close Popup" action="#{modalPanelBean.doAction}"
 onclick="javascript:Richfaces.hideModalPanel('mp')" />
 </h:panelGrid>
 </h:form>
 </rich:modalPanel>
 </div>
 </h:form>
 </f:view>
 </body>
</html>

ModalPanelBean

package net.wimaxxed.ajaxwebapp.webapp.bean;

public class ModalPanelBean
{
 private String inputText = null;

 public String doAction()
 {
 System.out.println("Eingegebener Text war _> "+inputText);
 return null;
 }

 public String getInputText() {
 return inputText;
 }

 public void setInputText(String inputText) {
 System.out.println("Setter called _> "+inputText);
 this.inputText = inputText;
 }
}

For information:

when i surround the content of the modalPanel (what i have done in my sample-application) with form, the content is not shown.
when i surround also the facets of the modalPanel with form, nothing will be shown.

6. Re: problem with modalPanel from 3.0.1 snapshot

sergeysmirnov Apr 26, 2007 11:01 AM (in response to moldovan)

do you use Ajax4jsf 1.1.1 snapshot or still 1.1.0 ?
Actions
7. Re: problem with modalPanel from 3.0.1 snapshot

moldovan Apr 26, 2007 11:30 AM (in response to moldovan)

"SergeySmirnov" wrote:
do you use Ajax4jsf 1.1.1 snapshot or still 1.1.0 ?

Oh, ok....I'm using still a4j version 1.1.0

I'm thinking, i have to switch to a snapshot version, to get it working!??

.
.
.
.
.

Ok, i tested it with a snapshot of today and it is working! I haven't known it, that i have to switch a a4j-lib.

Thanks for your replies!
Actions

8. Re: problem with modalPanel from 3.0.1 snapshot

moldovan Apr 27, 2007 6:00 AM (in response to moldovan)

It's frustrating!

I'm sorry, but nevertheless it does not function.

At night, i made the steps (changing a4j-lib, including form) in my crm-webapp, but was wondering, why my action gets not called. I activated fire-bug and saw, that i get an jacascript-error:

f has no properties
clearFormHiddenParams_contentform_accountinfocontent_popupforminside("contentform:accountinfocontent:popupforminside")DisplayCustomerLi... (line 611)
oamSubmitForm("contentform:accountinfocontent:popupforminside", "contentform:accountinfocontent:popupforminside:_idJsp173", undefined, undefined)DisplayCustomerLi... (line 507)
onclick(click clientX=0, clientY=0)DisplayCustomerLi... (line 1)
[Break on this error] f.elements['contentform:accountinfocontent:popupforminside:_idcl'].value='';

Do you you clear-functions? I think, myfaces does.

the function in my rendered html-site is:

function clearFormHiddenParams_contentform_accountinfocontent_popupforminside(currFormName)
 {
 var f = document.forms['contentform:accountinfocontent:popupforminside'];
 f.elements['contentform:accountinfocontent:popupforminside:_idcl'].value='';
 f.elements['contentform:accountinfocontent:popupforminside:_link_hidden_'].value='';
 f.target='';
 }

Im getting this js-error also in my sample-webapp, but i hadn't seen it yesterday.
As texted before, I'm thinking this is myfaces-behaviour, but i doesn't know it for sure.

9. Re: problem with modalPanel from 3.0.1 snapshot

carla.janke Apr 27, 2007 9:23 AM (in response to moldovan)

Hi Moldovan,

I'm at the same situation...

I upgrade the version, the respective .jars, and nothing... :(

If you has news, please, post here or let me now !

I will do the same.

Thanks,
Carla.
Actions
10. Re: problem with modalPanel from 3.0.1 snapshot

sergeysmirnov Apr 27, 2007 12:28 PM (in response to moldovan)

It is a greeting from myfaces and specific browser bug:
document.forms collection is not updated during the DOM replacement. As soon as Myfaces uses document.forms[] instead of document.getElementById() there, the problem occurs.

Try to use a4j:form and a4j:htmlCommandLink as a substitute for h:form and h:commandLink. One of the motivation why those two components are in the core library was this incompatibility myfaces with Ajax.
Actions
11. Re: problem with modalPanel from 3.0.1 snapshot

moldovan May 2, 2007 4:30 AM (in response to moldovan)

oh thanks, sergey!

I will try it today, and let you know, if it is working!
Actions

12. Re: problem with modalPanel from 3.0.1 snapshot

moldovan May 2, 2007 5:17 AM (in response to moldovan)

No good news!

I'm getting a new js-error, when clicking the link inside my modalpanel. This is the cutout from firebug:

this._form has no properties
Query("_viewRoot", null)org.ajax4jsf.fram... (line 68)
SubmiteventsQueue("_viewRoot", "siteform:popupform", Object type=click, Object parameters=Object)org.ajax4jsf.fram... (line 53)
Submit("_viewRoot", "siteform:popupform", click clientX=0, clientY=0, Object parameters=Object)org.ajax4jsf.fram... (line 53)
onclick(click clientX=0, clientY=0)TestModalPanel.js... (line 1)
[Break on this error] elem=document.getElementById(targetID+".stop");if(elem){elem.style.display="";if...

Here is the jsp-site from my sample-webapp:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>

<html>
 <head>
 <title>AJAX - WebApplication</title>
 </head>
 <body>
 <f:view>
 <a4j:form id="siteform">
 <a4j:outputPanel ajaxRendered="true">
 <h:messages showDetail="false" showSummary="true" />
 </a4j:outputPanel>
 <h:outputLink id="outputlink" value="javascript:Richfaces.showModalPanel('mypopup',{width:450, top:200})" >
 <h:outputText value="Popup-Box öffnen" />
 </h:outputLink>
 <div>
 <rich:modalPanel id="mypopup" minHeight="200" minWidth="450" height="200" width="450" zindex="2000">
 <f:facet name="header">
 <h:outputText value="PopupBox - Title" />
 </f:facet>
 <f:facet name="controls">
 <h:outputText value="X" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mypopup')" />
 </f:facet>
 <a4j:form id="popupform">
 <h:outputText value="Bitte machen Sie ihre Eingabe: " />
 <h:inputText id="popupinputtext" value="#{modalPanelBean.inputText}" />
 <h:panelGrid style="margin-left: auto; margin-right: auto;">
 <a4j:commandLink id="popupcommandlink" value="Close Popup" action="#{modalPanelBean.doAction}" onclick="javascript:Richfaces.hideModalPanel('mypopup')" />
 </h:panelGrid>
 </a4j:form>
 </rich:modalPanel>
 </div>
 </a4j:form>
 </f:view>
 </body>
</html>

What I'm doing wrong?

13. Re: problem with modalPanel from 3.0.1 snapshot

sergeysmirnov May 2, 2007 1:41 PM (in response to moldovan)

Move modal panel outside the external form. Also, there is no reason to have around the modal panel, as soon as it has a absolute position.

Pay attention: I told "replace h:commandLink with a4j:htmlCommandLink" , but not "with a4j:commandLink". a4j:htmlCommandLink and a4j:commandLink are very very different component.
Actions
14. Re: problem with modalPanel from 3.0.1 snapshot

moldovan May 3, 2007 4:46 AM (in response to moldovan)
Thanks Sergey!

With your modifications (shown in above code), it worked for me:
<html> <head> <title>AJAX - WebApplication</title> </head> <body> <f:view> <a4j:form id="siteform"> <a4j:outputPanel ajaxRendered="true"> <h:messages showDetail="false" showSummary="true" /> </a4j:outputPanel> <h:outputLink id="outputlink" value="javascript:Richfaces.showModalPanel('mypopup',{width:450, top:200})" > <h:outputText value="Popup-Box öffnen" /> </h:outputLink> </a4j:form> <div> <rich:modalPanel id="mypopup" minHeight="200" minWidth="450" height="200" width="450" zindex="2000"> <f:facet name="header"> <h:outputText value="PopupBox - Title" /> </f:facet> <f:facet name="controls"> <h:outputText value="X" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mypopup')" /> </f:facet> <a4j:form id="popupform"> <h:outputText value="Bitte machen Sie ihre Eingabe: " /> <h:inputText id="popupinputtext" value="#{modalPanelBean.inputText}" /> <h:panelGrid style="margin-left: auto; margin-right: auto;"> <a4j:htmlCommandLink id="popuphtmlcommandlink" value="Close Popup" action="#{modalPanelBean.doAction}" > <f:param name="MyTestParam" value="MeinTestParameter" /> </a4j:htmlCommandLink> </h:panelGrid> </a4j:form> </rich:modalPanel> </div> </f:view> </body> </html>

Don't ask me, why the modalPanel must be outside the siteform, because when i put the modalPanel inside the siteform, its stopps working, and i have no idea why.

But i have a last question, maybe one of you has a solution for this requirement:
I have a table, where products are displayed. In each row I'm preventing a link, where you can block the product.
When clicking the link, a modalPanel should be shown, where you can select a blocking-reason (from selectbox) and click on a further commandLink to invoke the blocking action.

So, when clicking the link, i had to get/store the id of the corresponding product from the row, and i had to activate the modalPanel
After selecting a reason and clicking the blocking-link inside the modal panel, the action should be invoked and block the product with the id I getted/stored.

Is it possible to this via a4j:commandLink in each table-row, with a4j:actionparam to assign the product id to a value in a bean, and the showModalPanel-Algorithm at oncomplete from commandLink??
Can it work?

Or does somebody has a better way??

Thanks for your answers!
Actions

1 2 Previous Next

Go to original post