CODEWITHSUNDEEP
jsfrichfacesseam
stacker
stacker

Reputation: 69002

Rich modalpanel closes automatically

I face the same issue as described here Rich modalpanel closes automatically

I'm using richfaces 3.3.0 (Included in seam 2.12). I tried to isolate the problem, Firebug shows that after the modalpanel shows up, a request to the server is generated. And the panel closes after a few ms. I treied several locations for the rich_modalPanel tag (inside the form outside).

Any ideas?

<!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:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a="http://richfaces.org/a4j"
    xmlns:s="http://jboss.com/products/seam/taglib">
<head />
<body id="pgHome">
<f:view>
    <div id="document">
        <h:form id="login">
        <fieldset>
            <h:outputLabel id="UsernameLabel" for="username">Login Name</h:outputLabel>
            <h:inputText id="username" value="#{identity.username}" style="width: 175px;" />
        </fieldset>
        <h:commandButton id="search2" value="modal"
            onclick="#{rich:component('mp')}.show()" />

        </h:form> 
        <rich:modalPanel id="mp" height="200" width="500">
            <f:facet name="header">
                <h:outputText value="Modal Panel Title" />
            </f:facet>
        </rich:modalPanel>
    </div>
</f:view>
</body>
</html>

EDIT:

I finally used this example:

<rich:modalPanel id="modalPanelID">
    <f:facet name="header">
        <h:outputText value="header" />
    </f:facet>
    <a onclick="Richfaces.hideModalPanel('modalPanelID');" href="#">Hide</a>
</rich:modalPanel>
<a onclick="Richfaces.showModalPanel('modalPanelID');" href="#">Show</a>

Upvotes: 3

Views: 8015

Answers (4)

Vivid
Vivid

Reputation: 449

I have a smiliar problem. I use a commandButton for uploading a file. Using the onClick-Event fires the event without clicking on loading the page. If I use the action my modal panel hides automatically. After clicking the commandButton the modalPanel should stay open. I need the submit of the form to handle the uploaded data in the bean.

Here is my code... 

<h:commandButton id="Button"
    process="@this,attachmentPanel"
    binding="#{actionButton}"
    value="#{messages['view.attachment.add']}"
    action="#{myHandler.addAttachment()}"
    reRender="attachmentFramePanel">
</h:commandButton>

Upvotes: 0

Bozho
Bozho

Reputation: 597432

Try using <a4j:commandButton> instead of <h:commandButton>.

But since you are just having onclick, you don't need a commandButton at all - use an <input type="button" onclick=".." />

Upvotes: 2

Romain Linsolas
Romain Linsolas

Reputation: 81677

This behavior is normal, as you display your ModalPanel using the commandButton using the following code:

<h:commandButton id="search2" value="modal" onclick="#{rich:component('mp')}.show()" />

The commandButton will display the ModalPanel, and then will submit the form. This will force the page to be redisplayed completely, and that's why you get this behavior.

To solve your problem, you must return false; at the end of the onclick event, which can be translated to Display the Modal Panel and then stop any processing, i.e. do NOT submit the form. The code to use is the following:

<h:commandButton id="search2" value="modal" onclick="#{rich:component('mp')}.show(); return false;" />

Upvotes: 9

Shervin Asgari
Shervin Asgari

Reputation: 24517

My guess is that since you are using h:commandButton you are posting the form, and unless this is what you want to do, then that's the problem.

At least make the button return false so it doesn't post, or use a normal html button.

Upvotes: 1

Related Questions