Asked  5 Months ago    Answers:  5   Viewed   404 times

I am trying to execute a JSF2 bean method and show a dialog box after completion of the method on click of PrimeFaces <p:commandButton>.

<p:commandButton id="viewButton" value="View"
    actionlistener="#{userBean.setResultsForSelectedRow}" ajax="false"
    update=":selectedRowValues"
    oncomplete="PF('selectedRowValuesDlg').show()">
</p:commandButton>
<p:dialog id="selectedRowValues" widgetVar="selectedRowValuesDlg" dynamic="true">
    <h:outputText value="#{userBean.selectedGroupName}" />
</p:dialog>

When I click on the command button, the bean action listener method setResultsForSelectedRow executes properly, but it does not show the dialog box when the method completes. If I remove actionlistener, it shows the dialog box. I do not know what is going wrong.

What is the execution order of events? Is it possible to execute actionlistener and oncomplete simultaneously?

 Answers

98

It failed because you used ajax="false". This fires a full synchronous request which in turn causes a full page reload, causing the oncomplete to be never fired (note that all other ajax-related attributes like process, onstart, onsuccess, onerror and update are also never fired).

That it worked when you removed actionListener is also impossible. It should have failed the same way. Perhaps you also removed ajax="false" along it without actually understanding what you were doing. Removing ajax="false" should indeed achieve the desired requirement.


Also is it possible to execute actionlistener and oncomplete simultaneously?

No. The script can only be fired before or after the action listener. You can use onclick to fire the script at the moment of the click. You can use onstart to fire the script at the moment the ajax request is about to be sent. But they will never exactly simultaneously be fired. The sequence is as follows:

  • User clicks button in client
  • onclick JavaScript code is executed
  • JavaScript prepares ajax request based on process and current HTML DOM tree
  • onstart JavaScript code is executed
  • JavaScript sends ajax request from client to server
  • JSF retrieves ajax request
  • JSF processes the request lifecycle on JSF component tree based on process
  • actionListener JSF backing bean method is executed
  • action JSF backing bean method is executed
  • JSF prepares ajax response based on update and current JSF component tree
  • JSF sends ajax response from server to client
  • JavaScript retrieves ajax response
    • if HTTP response status is 200, onsuccess JavaScript code is executed
    • else if HTTP response status is 500, onerror JavaScript code is executed
  • JavaScript performs update based on ajax response and current HTML DOM tree
  • oncomplete JavaScript code is executed

Note that the update is performed after actionListener, so if you were using onclick or onstart to show the dialog, then it may still show old content instead of updated content, which is poor for user experience. You'd then better use oncomplete instead to show the dialog. Also note that you'd better use action instead of actionListener when you intend to execute a business action.

See also:

  • Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
  • Differences between action and actionListener
Tuesday, June 1, 2021
 
LoicTheAztec
answered 5 Months ago
53

The update attribute should point to an existing client ID in the HTML DOM tree. However, since the element is not available in the HTML DOM tree because it's not rendered by the server side, JS/ajax cannot find anything in HTML DOM tree to update.

In fact, you should wrap it in another element which is always available in the HTML DOM tree so that Ajax can locate it and then use its client ID in update. In your case, you can use padding for this.

<div id="mainPanel">
   <h:panelGroup id="padding" layout="block">
       <h:outputText id="text" value="Personal Feed" rendered="#{Profile.renderComment}"/>
   </h:panelGroup>
   <div id="right">
       <h:form>
           <p:commandButton value="Update" actionListener="#{bean.toggleComment}" update=":padding" />
       </h:form>
   </div>
</div>
Thursday, June 17, 2021
 
fret
answered 4 Months ago
92

<p:commandButton> needs one of the following to work correctly:

  • the update attribute to list id's of components to re-render (for AJAX requests)
  • the attribute ajax="false" to make a normal, non-ajax submit.

If you have neither, the button does per default an AJAX request with no UI feedback.

Additionally, I've had problems with neither option working when the surrounding <h:form> had an enctype attribute.

Friday, June 18, 2021
 
AntoineB
answered 4 Months ago
54

See the Windows Forms Events Lifecycle:

  • Move: This event occurs when the form is moved. Although by default, when a form is instantiated and launched, the user does not move it, yet this event is triggered before the Load event occurs.
  • Load: This event occurs before a form is displayed for the first time.
  • VisibleChanged: This event occurs when the Visible property value changes.
  • Activated: This event occurs when the form is activated in code or by the user.
  • Shown: This event occurs whenever the form is first displayed.
  • Paint: This event occurs when the control is redrawn.
  • Deactivate: This event occurs when the form loses focus and is not the active form.
  • Closing: This event occurs when the form is closing.
  • Closed: This event occurs when the form is being closed.
Monday, June 21, 2021
 
supermitch
answered 4 Months ago
99

I'm not sure about the specs but I presume that event handlers are just queued in the same order as you define them. Inline handlers are defined right in the DOM node so nothing else can go earlier.

The most elegant way is to write all your JavaScript in an unobtrusive way, i.e., keep it separated from HTML (you appear to be mixing programming styles). Whatever, you can intercept form submission by attaching an onsubmit handler to the form:

$("form").submit(function(){
    // Do stuff
    return true;
});

Update

I've done some testing and it appears that an onsubmit handler attached to a form via jQuery does not get triggered when you call the DOM's submit() method somewhere else. Here's a workaround:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
jQuery(function($){
    $("a").each(function(i, a){
        a.onclick = function(){ // Remove previous handlers
            alert("I will no longer submit the form");
            $(this).closest("form").submit();
        };
    });
    $("form").submit(function(){
        alert("I'll take care myself, thank you");
        $("input[name=foo]").val("Another value");
        return true;
    });
});
//--></script>
</head>
<body>


<form action="" method="get">
    <input type="text" name="foo" value="Default value">
    <a href="javascript:;" onclick="document.forms[0].submit()">Submit form</a>
</form>

</body>
</html>
Saturday, August 14, 2021
 
janlindso
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :