0

I am using intl-tel-input jQuery plugin for phone number fields on new entity creation. Now I have a details form where I can view all entered details for newly created entity. How do I populate selected country code and flag on phone fields there? Also I should be allowed to edit my details on that page(this means we can edit our phone number also). I am using JSF+Primefaces for frontend.

Form where phone input is taken: 

<input id="adminPhone" name="adminPhone" type="tel" />
    <h:outputScript>
    $("#adminPhone").intlTelInput({
     initialCountry: "auto",
     geoIpLookup: function(callback) {
     $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) 
     {
     var countryCode = (resp &amp;&amp; resp.country) ? resp.country : "";
     callback(countryCode);
     });
     },
     separateDialCode: true,
     utilsScript: "../resources/js/utils.js"
     });
    </h:outputScript>

Updated backing bean adminPhone property using getRequestParameterMap().get("adminPhone")value

Update/View details form as of now:

<p:outputLabel id="engagementbillingPhoneLabel" value="Phone:" for="adminPhone" />
<p:inputText id="adminPhone" value="#{dashboard.selectedEntity.adminPhone}"/>
Rubina Shaikh
  • 1
  • 1

1 Answers1

0

I used two fields to capture and store the country code and admin phone number on entity creation using getRequestParameterMap() in backing bean.

<input id="adminPhone" name="adminPhone" type="tel" />
<input id="adminCountryCode" name="adminCountryCode" type="hidden" />

Backing bean

Map<String, String> requestParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
this.selectedEntity.setAdminCountryCode(requestParams.get("adminCountryCode"));
this.selectedEntity.setAdminPhone(requestParams.get("adminPhone"));

Used above stored values to populate it on View details/Edit page using jQuery built-in options provided in plugin (initialCountry and entered phone number).

<input id="adminPhone" name="adminPhone" type="tel"/>
<input id="adminCountryCode" name="adminCountryCode" type="hidden" />
<h:outputScript>
    var adminCodeHidden = $("#adminCountryCode"), 
    adminTelInput = $("#adminPhone");
    adminTelInput.attr("value", "#{dashboard.selectedEntity.adminPhone}");
    adminTelInput.intlTelInput({
       initialCountry: "#{dashboard.selectedEntity.adminCountryCode}",
       geoIpLookup: function(callback) {
       $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
       var countryCode = (resp &amp;&amp; resp.country) ? resp.country : "";
       callback(countryCode);
     });
    },
    separateDialCode: true,
    utilsScript: "../resources/js/utils.js"
});
</h:outputScript>
Rubina Shaikh
  • 1
  • 1