JSF Primefaces backbean component update without refreshing the page

At work I’ve come t resolve a necessity which was in a payment screen updating a price panel component right after customers fires the promotion button to apply a price deduction which is controlled and price update is applied from the back bean. the panel you see on the right hand side will be affected

Before Update

memberupdate1

After Update

memberupdate2

Frontend

<h:form id="primeForm" styleClass="default-form">
                <!-- Package Panel begin -->
                <p:panel header="#{msg.membership_details_confirmation}"
                    widgetVar="packageVar" styleClass="cart animation2" id="package">
                    <p:outputPanel id="packageInfo" styleClass="detail-departments">
                        <h:outputText styleClass="staticText"
                            value="#{msg.membership_details_you_selected}" />
                        <h:outputText styleClass="staticText"
                            value="#{msg.member_club_name}" />
                        <h:outputText styleClass="selectedClub"
                            value="#{memberController.order.club.name}" />
                        <hr />
                        <h:outputText styleClass="staticText" value="#{msg.membership}" />
                        <h:outputText styleClass="selectedClub"
                            value="#{memberController.order.membership.localizedDescription}" />
                        <div style="clear: both" />
                        <div class="membershipDescrition">

                            <h:outputText styleClass="staticText"
                                style="padding-top: 10px; font-weight: bold !important;"
                                value="#{memberController.order.membership.type == 'MONTHLY' ? msg.monthly : msg.yearly} #{msg.member_charges}" />
                            <h:outputText styleClass="selectedUnit"
                                value="#{memberController.order.membership.type == 'MONTHLY' ? memberController.calculatedPrice.additionalPrice : memberController.calculatedPrice.totalPriceWithAdditional} #{memberController.order.membership.type == 'MONTHLY' ? msg.payment_monthly_pay : msg.payment_tl} " />
                            <div style="width: 80%; display: inline-block; margin-top: 10px;"
                                class="packageInfoColumn">
                                <h:outputText styleClass="tc-message"
                                    value="#{msg.member_as_follows}" />
                            </div>
                            <div style="width: 55%; display: inline-block"
                                class="packageInfoColumn">1- #{msg.membership_joining_fee}</div>
                            <div style="display: inline-block" class="packagePrice">#{memberController.calculatedPrice.enrollmentPrice}
                                #{msg.payment_tl}</div>

                            <!-- Non presale club -->
                            <h:panelGroup
                                rendered="#{memberController.calculatedPrice.preSaleClub == false}">
                                <div style="width: 55%; display: inline-block"
                                    class="packageInfoColumn">2- #{msg.member_prorated}</div>
                                <div style="display: inline-block" class="packagePrice">#{memberController.calculatedPrice.currentMonthPrice}
                                    #{msg.payment_tl}</div>
                            </h:panelGroup>

                            <!-- Presale club -->
                            <h:panelGroup
                                rendered="#{memberController.calculatedPrice.preSaleClub == true}">
                                <div style="width: 55%; display: inline-block"
                                    class="packageInfoColumn">
                                    2-
                                    <h:outputText
                                        value="#{memberController.order.membership.type == 'MONTHLY' ? msg.member_monthly_charge : msg.member_annual_charge}" />
                                </div>
                                <div style="display: inline-block" class="packagePrice">#{memberController.calculatedPrice.grandTotal}
                                    #{msg.payment_tl}</div>
                            </h:panelGroup>

                            <!-- Monthly  -->
                            <h:panelGroup
                                rendered="#{memberController.order.membership.type == 'MONTHLY' and memberController.calculatedPrice.additionalPriceVisible == true} ">
                                <div style="width: 55%; display: inline-block"
                                    class="packageInfoColumn">3-
                                    #{msg.member_additionaly_monthly}</div>

                                <div style="display: inline-block" class="packagePrice">#{memberController.calculatedPrice.additionalPrice}
                                    #{msg.payment_tl}</div>
                            </h:panelGroup>

                            <!-- Annually  -->
                            <h:panelGroup
                                rendered="#{memberController.order.membership.type == 'YEARLY' and memberController.calculatedPrice.totalPrice != null and memberController.calculatedPrice.preSaleClub == false}">
                                <div style="width: 55%; display: inline-block"
                                    class="packageInfoColumn">3-
                                    #{msg.member_additionaly_yearly}</div>

                                <div style="display: inline-block" class="packagePrice">#{memberController.calculatedPrice.totalPrice}
                                    #{msg.payment_tl}</div>
                            </h:panelGroup>


                            <p:outputPanel styleClass="packageInfoRow">
                                <div
                                    style="width: 55%; display: inline-block; font-weight: bold !important;"
                                    class="packageInfoColumn">#{msg.member_total_currenly_charges}
                                </div>
                                <div style="display: inline-block" class="packagePrice">
                                    <h:outputText styleClass="entranceFee"
                                        value="#{memberController.calculatedPrice.grandTotal} #{msg.payment_tl}" />
                                </div>
                            </p:outputPanel>


                            <p:outputPanel styleClass="packageInfoRow"
                                style="margin-bottom: 50px;">
                                <div style="display: inline-block; margin-top: 10px;"
                                    class="packageInfoColumn">
                                    <h:outputText styleClass="tc-message"
                                        value="#{memberController.order.membership.type == 'MONTHLY' ? msg.member_package_monthly_message : ''} " />
                                </div>
                            </p:outputPanel>

                            <p:commandButton value="#{msg.con}" update="primeForm"
                                styleClass="green-button"
                                action="#{memberController.saveAndContinue()}"
                                icon="ui-icon-check" />
                        </div>
                    </p:outputPanel>

            </h:form>

Back bean

	public void addPromotionCode() {
		if (promotionCode != null) {
			LOG.info("validating the promotion code : " + promotionCode);
			BLPriceResponse blPriceResponse = callPricingService(promotionCode);
			if (blPriceResponse.isResponse()) {
				LOG.info("valid promotion code : " + promotionCode);
				// apply the code to the session info
				sessionInformation.setPriceResponse(blPriceResponse);
				// recalculate the price
				calculatePrice();
				// update the form
				RequestContext.getCurrentInstance().update("primeForm:package");
				LOG.info("calculated price : " + calculatedPrice.toString());
			} else {
				LOG.info("invalid promotion code : " + promotionCode);
				// the code does not work paint it to red
				MessageUtil.addMessage("primeForm:promotionCode", FacesMessage.SEVERITY_ERROR,
						OLSConstants.PROMOTION_CODE_NOT_VALID, OLSConstants.PROMOTION_CODE_NOT_VALID);
				promotionCode = null;
				RequestContext.getCurrentInstance().execute("addError('pCodeVar')");
			}
		}
	}

Explanation

here in this situation we have defined the form an id called “primeForm” and the component whose complete values will be refreshed is defined in between this form tag with the id called “package”. In the controller where the method invoked “addPromotionCode” particularly check the promotion code, if the code is accurate then in the method “calculatePrice” the regarding bean is updated. Then by invoking update method on the requst context interface, we first reach out the first element, then with the colon we delimiter and reach out to the child element “package” which will be affected.

 

Leave a Reply

Your email address will not be published. Required fields are marked *