jquery - Jsf commandbutton call javascript function then refreshing the whole page -


i have jsf page , commandbutton inside form.

<h:form>      ...     <h:commandbutton action="#{mainviewcontroller.showrelatedpayments()}" id="openpay" onclick="openmodal();" value="tst"></h:commandbutton>      ... </h:form> 

at same jsf page have 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 here                     ....               </div>               <div class="modal-footer">                    <button type="button" class="btn btn-default" data-dismiss="modal">close</button>                </div>         </div>   </div> 

i have javascript file includes openmodal() function.

function openmodal() {        $('#mymodal').modal('show');   } 

when click on button, calls javascript function , modal div shows page refreshing , opening modal disappear..

the button call backing bean method:

public void showrelatedpayments() {         log.info("creating data page..");         /*...            ...             ...         */     } 

what click on button call backing bean method create data modal content , not refreshing whole jsf page..

is possible? please me?

<h:commandbutton action="#{mainviewcontroller.showrelatedpayments()}"      id="openpay" onclick="openmodal();" value="tst" /> 

that code indeed this:

  • open modal dialog.
  • invoke command button action load data.
  • reload whole page.

but want this:

  • invoke command button action load data.
  • reload modal dialog.
  • open modal dialog.

you need move around tasks in desired order , throw in ajax magic achieve partial page reloads. <f:ajax> helpful in this.

<h:commandbutton action="#{mainviewcontroller.showrelatedpayments()}"      id="openpay" value="tst">     <f:ajax execute="@form" render=":relatedpayments"          onevent="function(data) { if (data.status == 'success') openmodal(); }" /> </h:commandbutton> 

and add modal dialog's content should dynamically updated.

<h:panelgroup id="relatedpayments" layout="block">     ....     dynamic content must here      .... </h:panelgroup> 

Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -