I have a jsf page and a mandButton inside a form.

<h:form>
     ...
    <h:mandButton action="#{mainViewController.showRelatedPayments()}" id="openpay" onclick="openModal();" value="Tst"></h:mandButton>
     ...
</h:form>

At the same jsf page i have a modal div..

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
              <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <h4 class="modal-title" id="myModalLabel">Modal titles</h4>
              </div>
              <div class="modal-body">
                   ....
                   Dynamic content must be here 
                   ....
              </div>
              <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

              </div>
        </div>
  </div>

I have a javascript file also which includes the openModal() function.

function openModal() {

      $('#myModal').modal('show');
  }

When i click on the button, it calls the javascript function and the modal div shows up but then the page refreshing and the opening modal disappear..

The button also call my backing bean method:

public void showRelatedPayments() {
        LOG.info("creating data for page..");
        /*...
           ...
            ...
        */
    }

What i would do is click on the button call the backing bean method which create data for the modal content and not refreshing the whole jsf page..

Is this possible? Could anybody please help me?

I have a jsf page and a mandButton inside a form.

<h:form>
     ...
    <h:mandButton action="#{mainViewController.showRelatedPayments()}" id="openpay" onclick="openModal();" value="Tst"></h:mandButton>
     ...
</h:form>

At the same jsf page i have a modal div..

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
              <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <h4 class="modal-title" id="myModalLabel">Modal titles</h4>
              </div>
              <div class="modal-body">
                   ....
                   Dynamic content must be here 
                   ....
              </div>
              <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

              </div>
        </div>
  </div>

I have a javascript file also which includes the openModal() function.

function openModal() {

      $('#myModal').modal('show');
  }

When i click on the button, it calls the javascript function and the modal div shows up but then the page refreshing and the opening modal disappear..

The button also call my backing bean method:

public void showRelatedPayments() {
        LOG.info("creating data for page..");
        /*...
           ...
            ...
        */
    }

What i would do is click on the button call the backing bean method which create data for the modal content and not refreshing the whole jsf page..

Is this possible? Could anybody please help me?

• javascript
• jquery
• twitter-bootstrap
• jsf

• you should probably start of by googling for ajax and jsf, I think there are some ponent / tags that are designed for that – Toskan Commented May 14, 2015 at 8:49

1 Answer 1

<h:mandButton action="#{mainViewController.showRelatedPayments()}" 
    id="openpay" onclick="openModal();" value="Tst" />

That code does indeed this:

• Open modal dialog.
• Invoke mand button action to load data.
• Reload the whole page.

But you actually want this:

• Invoke mand button action to load data.
• Reload only the modal dialog.
• Open modal dialog.

You need to move around the tasks in the desired order and throw in ajax magic to achieve partial page reloads. The <f:ajax> is helpful in this.

<h:mandButton action="#{mainViewController.showRelatedPayments()}" 
    id="openpay" value="Tst">
    <f:ajax execute="@form" render=":relatedPayments" 
        onevent="function(data) { if (data.status == 'success') openModal(); }" />
</h:mandButton>

And add this to the modal dialog's content which should be dynamically updated.

<h:panelGroup id="relatedPayments" layout="block">
    ....
    Dynamic content must be here 
    ....
</h:panelGroup>