CODEWITHSUNDEEP
javajavascriptjqueryjsf
Jean Carlos Suárez Marranzini
Jean Carlos Suárez Marranzini

Reputation: 1212

How to display a modal and execute action at the same time

I have this piece of code in my JSF page:

<a href="#adios" data-toggle="modal">
<h:commandButton value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}" 
class="btn btn-primary btn-lg"></h:commandButton>
</a>

The modal displays, but the action is not executed... How can I perform both actions (Show modal and invoke the method) at the same time?

Upvotes: 1

Views: 2437

Answers (2)

BholaVishwakarma
BholaVishwakarma

Reputation: 582

 <h:form>
    <p:remoteCommand name="callAction" onstart="Place your javascript code to show the model"
       action="#{basketManager.pay(accountManager.currentAccount.username)}"  
       update="@form" />
    <h:commandButton value="Pay!" class="btn btn-primary btn-lg" 
                     onclick="callAction();" />
 </h:form>

Here You can call you ManagedBean methods on javascript function. When the remote-command starts it execution it shows the model and even call's the action method

Hope this helps you

Upvotes: 1

Patzick
Patzick

Reputation: 171

If you want to perform the script when you submit a form you could use onclick="alert('Clicked submit button!');" event inside your commandButton tag.

One of ways to perform both actions is using @ManagedProperty annotation in your bean. For example change your sumbit buton to this one 

<h:form>
    <h:commandButton value="Pay!" action="#{basketManager.pay()}" 
    class="btn btn-primary btn-lg" onclick="alert('Clicked submit button!');" />
</h:form>

then your Bean could be more like this:

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "basketManager")
@RequestScoped
public class BasketManager implements Serializable {

    @ManagedProperty(value="#{accountManager}")
    private AccountManager accountManager;

    //this is nessesery!
    public void setAccountManager(AccountManager accountManager) {
        this.accountManager = accountManager;
    }

    public String pay() {
        if(accountManager != null) {
            //... do something using accountManager.currentAccount.username
        }
        return ""; // your action result
    }
}

You have to remember that BasketManager bean must be in same or smaller scope than AccountManager bean. For example if AccountManager is @SessionScoped then BasketManager could be @SessionScoped or @ViewScoped or @RequestScoper. It cannot be @ApplicationScoped then!

Upvotes: 1

Related Questions