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">×</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
Post a Comment