2014-09-09 4 views
0

Я делаю приложение с использованием RobinHerbots/jquery.inputmask.Ошибка ввода маски ввода JQuery при загрузке или создании поля

Все работает хорошо, за исключением того, когда нагрузка или создать динамические поля

<html> 
... 
<div> 
    <input class="datemask" value="31/01/2014" name="fechaPago[]" id="fechaPago[]" type="text"> 
</div> 
//More ajax loaded fields 

<h:commandLink action="#{someaction}"> 
    <f:ajax onevent="function(data) { configureMask() }"/> 
    Click Here 
</h:commandLink> 

... 
<script src="jquery-2.0.2.min.js"></script> 
<script src="jquery.inputmask.js"></script> 
<script src="jquery.inputmask.date.extensions.js"></script> 

<script type="text/javascript"> 
    //<![CDATA[ 
    $(function() { 
     configureMask(); 
    }); 
    function configureMask() { 
     $(".datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"}); 
    } 
    //]]> 
</script> 
... 
</html> 

Когда действие выполняется, только новые поля загружаются и успех обратного вызова пытается настроить все поля с маской, в том числе новых месторождений , но предыдущие поля не работают. Все предыдущие поля пусты и не принимают новое значение.

Как настроить загруженные поля, не влияя на предыдущие поля?

Заранее спасибо

ответ

1

Я не совсем уверен, что вы пытаетесь сделать, так как вы не сказали, что вы хотите, чтобы это произошло, - но давайте дадим ему шанс.

При каждом нажатии на ссылку вызывается функция configureMask. Эта функция выбирает ВСЕ входные элементы в DOM и инициализирует inputmask.

Это ваше намерение повторно инициализировать все элементы ввода каждый раз при нажатии этой ссылки? После инициализации inputmask вам не нужно делать что-либо другое, а затем обновлять значение. Возможно, что это может быть что-то испортить, если вы пытаетесь инициализировать inputmask, который уже был инициализирован.

Вы можете удалить старую входную маску элемента, если хотите, а затем повторно инициализировать их, но это не имеет никакого смысла.

$(".datemask").inputmask('remove'); 

Я чувствую, что вы пытаетесь сделать, это инициализировать inputmask для введенного элемента.

... 
<h:commandLink action="#{someaction}"> 
    <f:ajax onevent="function(data) { configureMask(this) }"/> 
    Click Here 
</h:commandLink> 
... 
function configureMask(element) { 
    //if the element was passed in then select it, else select all 
    //elements that have not been processed 
    var $elements = element ? $(element) : $(".datemask").not(".datemask-processed"); 
    $elements.inputmask("dd/mm/yyyy").addClass("datemask-processed"); 
} 

Поскольку вы уже используете jquery.inputmask.date.extensions.js библиотеку, у вас есть доступ ко всем определениям даты по умолчанию. Вам не нужно посылать заполнитель для dd\mm\yyyy, потому что он уже определен.

//snippet from the `jquery.inputmask.date.extensions.js` library 
$.extend($.inputmask.defaults.aliases, { 
     'dd/mm/yyyy': { 
      mask: "1/2/y", 
      placeholder: "dd/mm/yyyy", 
... 
1

Это также полезно для моего случая:

$(".phone-input").inputmask(); 
$(document).on("ajaxComplete", function(e){ 
    $(".phone-input").inputmask(); 
}); 
Смежные вопросы