XPages: Bootstrap валидатора

Question

я пытался построить XPage с Bootstrap Validator (http://bootstrapvalidator.com/examples/mask/) для проверки в IP-Адрес

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" id="testid"> 

<xp:this.resources> 

    <xp:styleSheet href="/bootstrap.css"></xp:styleSheet> 
    <xp:styleSheet href="/bootstrapValidator.min.css"></xp:styleSheet> 

    <xp:script src="/jquery-1.11.1.js" clientSide="true"></xp:script> 
    <xp:script src="/bootstrap.min.js" clientSide="true"></xp:script> 
    <xp:script src="/bootstrapValidator.js" clientSide="true"></xp:script> 
    <xp:script src="/jquery.mask.min.js" clientSide="true"></xp:script> 

</xp:this.resources> 



<xp:form id="maskForm"> 


    <div class="col-lg-5"> 

     <xp:inputText id="ipAddress" title="ipAddress"> 

     </xp:inputText> 

    </div> 


</xp:form> 


<xp:scriptBlock> 

    <xp:this.value><![CDATA[ 

var test = '#{javascript:getClientId("maskForm")}'; 

XSP.addOnLoad(function() { 
$("#"+test) 
    .bootstrapValidator({ 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      ipAddress: { 
       validators: { 
        ip: { 
         message: 'The IP address is not valid' 
        } 
       } 
      } 
     } 
    }) 
    .find('[name="ipAddress"]').mask('099.099.099.099'); 
}); 

]]></xp:this.value> 
</xp:scriptBlock> 
</xp:view> 

Можете ли вы сказать мне where's моей вине /, как это работает с XPages? Это didn't работать с моим inputText поле

Спасибо за вашу помощь

Answer 1

Одно из предложений, изменения найти строку использовать идентификатор вместо:

.find('*[id$="ipAddress"]').mask('099.099.099.099'); 

[ответ Пера решает этот вторичный вопрос] -> Однако я обнаружил, что при добавлении файла /jquery.mask.min.js в мои ресурсы xpage это не приводит к выполнению jquery на странице, без ошибок в консоли firebug. Я вытащил содержимое mask.min.js с here. Даже не ниже код будет работать с маской файла в расслоение плотной ресурсы:

<xp:scriptBlock id="script1"> 
    <xp:this.value><![CDATA[ 
     XSP.addOnLoad(function() { 
      $("*[id$='msg']").html("JQUERY Working"); 
     });]]> 
    </xp:this.value> 
</xp:scriptBlock> 
<xp:div id="msg"></xp:div> 

Как только я снял маску ресурса, выше работает отлично. Я использую jquery 2.1.1. Я бы порекомендовал вам попробовать что-то подобное, чтобы проверить, является ли плагин маски корнем проблемы.

UPDATE: Я создал jsfiddle, который работает: http://jsfiddle.net/m2325jhc/2/. Я обнаружил, что существуют проблемы с использованием имени, чтобы найти объект, но он работает с использованием идентификатора. Ответ Пер решил проблему jquery, разбивающуюся в моем приложении xpage, с плагином маски.

Answer 2

Плагин jQuery Mask использует загрузчик AMD, который конфликтует с XPages. Поэтому ваш плагин jQuery Mask не загружается вообще.

Исправление состоит в том, чтобы удалить из jquery.mask.min.js часть, в которой используется AMD. Так открытый jquery.mask.min.js и изменение от этого:

// jQuery Mask Plugin v1.7.7 
// github.com/igorescobar/jQuery-Mask-Plugin 
(function(f){"function"===typeof define&&define.amd?define(["jquery"],f) ... 

к этому:

// jQuery Mask Plugin v1.7.7 
// github.com/igorescobar/jQuery-Mask-Plugin 
(function(f){"function"===typeof define&&false?define(["jquery"],f) ... 

Это гарантирует, что AMD не используется для загрузки плагина.

Update: Убедитесь использовать the x$ XSnippet для того, чтобы JQuery селекторы для работы с двоеточием в XPages стороне клиента идентификаторами.