首页 文章

使用jQuery intl-tel-input插件在创建后填充和编辑选择的国家/地区代码并在详细信息页面上标记

提问于
浏览 次
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”）值更新了支持bean的adminPhone属性

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

<p:outputLabel id="engagementbillingPhoneLabel" value="Phone:" for="adminPhone" />
<p:inputText id="adminPhone" value="#{dashboard.selectedEntity.adminPhone}"/>
jsf primefaces jquery-plugins intl-tel-input

1 回答

  • 0

    我使用两个字段来捕获并存储使用辅助bean中的getRequestParameterMap（）创建实体时的国家/地区代码和管理员电话号码 .

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

    支持 beans

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

    使用上面存储的值，使用插件中提供的jQuery内置选项（initialCountry和输入的电话号码）在View details / Edit页面上填充它 .

    <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>
    回复于

相关问题