0

我在创建新实体时将 intl-tel-input jQuery 插件用于电话号码字段。现在我有一个详细信息表单，我可以在其中查看新创建实体的所有输入详细信息。如何在电话字段中填充选定的国家代码和标志？此外，我应该被允许在该页面上编辑我的详细信息（这意味着我们也可以编辑我们的电话号码）。我在前端使用 JSF+Primefaces。

采取电话输入的形式：

<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>

使用 getRequestParameterMap().get("adminPhone")value 更新了支持 bean adminPhone 属性

截至目前更新/查看详细信息表格：

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

1 回答 1

0

我使用两个字段在支持 bean 中使用 getRequestParameterMap() 创建实体时捕获和存储国家代码和管理员电话号码。

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

支持豆

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

使用插件中提供的 jQuery 内置选项（initialCountry 和输入的电话号码）使用上面存储的值在查看详细信息/编辑页面上填充它。

<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>
于 2017-10-11T08:42:40.837 回答