使用jQuery创建和编辑选择的国家代码和标志详细信息页面使用jQuery intl-tel-input插件

问题描述：

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

形式，其中手机输入为：

<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更新后台bean adminPhone财产（）获得（ “adminPhone”）值

更新/查看详情形成，截至目前：

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

答

我使用两个字段来捕获和存储国家代码和管理电话号码在实体创建使用getRequestParameterMap（）在后台bean。

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

支持bean

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>

使用jQuery创建和编辑选择的国家代码和标志详细信息页面使用jQuery intl-tel-input插件

相关推荐