2016-10-15 4 views
0

Я столкнулся с странным поведением (я не гуру javascript :-(). Я хочу использовать typeahead для автозаполнения, что отлично работает для меня. У меня есть модальный диалог с формой . различные виды полей формы, с событием, я хочу, чтобы включить/отключить эту форму компоненту Работает также отлично подходит для всех, кроме входных машинописных коробокTypeahead получает ID результаты, чтобы не определиться

Что у меня есть:.

HTML-фрагмент:

<div class="row detailRow"> 
    <div class="col-md-4"> 
     <label id="lblAuszubildender" class="detailLabel">Auszubildender:</label> 
     </div> 
      <div class="col-md-7 col-md-offset-1"> 
       <input id="txtAuszubildender" name="txtAuszubildender" class="typeahead form-control detailValue" placeholder="Auszubildender" /> 

... 

// Instantiate the Typeahead UI 
$('#txtAuszubildender').typeahead(
{ 
    hint: true, 
    highlight: true, 
    minLength: 3 
}, 
{ 
    displayKey: 'value', 
    source: apprenticeEngine.ttAdapter() 
}); 

JavaScript Отрывок:

$(".detailRow").each(function(){ 
    var labelElement = $(this).find(".detailLabel"); 
    var valueElement = $(this).find(".detailValue"); 
    var labelId = labelElement.attr('id'); 
    var valueId = valueElement.attr('id'); 
    filterArray[labelId] = valueId; 
}); 

При отладке для всех элементов JavaScript работает отлично, только машинописный InputBox Безразлично `дать свое удостоверение. enter image description here

Но странное дело, все сведения приведены в объекте ввода: enter image description here

Если я использую var valueId = valueElement.prop('id');, вместо неопределенного я стал тогда пустой строкой.

Надеюсь, кто-то может дать подсказку.

EDIT: Я немного играл с консолью firebug. Я добавил функцию:

function findDetailElements(){ 
    var filterArray = {}; 

    $(".detailRow").each(function(){ 
     var labelElement = $(this).find(".detailLabel"); 
     var valueElement = $(this).find(".detailValue"); 
     var labelId = labelElement.attr('id'); 
     var valueId = valueElement.attr('id'); 
     filterArray[labelId] = valueId; 
    }); 

    return filterArray; 
} 

Заполненные переменную:

var list = findDetailElements(); 
console.log(list); 

Результат: ("txtAuszubildender еще не хватает.")

Object { lblResource: "txtId", lblZustaendigeStelle: "selZustaendigeStelle", lblAuszubildender: undefined, lblBeruf: "selBeruf", lblFachrichtung: "selFachrichtung", lblSchwerpunkt: "selSchwerpunkt", lblBetrieb: "txtBetrieb", lblBeginn: "txtBeginn", lblEnde: "txtEnde", lblStatus: "txtStatus" } 

НО когда я что-то вроде:

$("#txtAuszubildender") 

я получаю результат:

Object { length: 1, context: HTMLDocument → contract, selector: "#txtAuszubildender", 1 weitere… } 
+0

[Я не могу воспроизвести это] (http://jsfiddle.net/CNMfL/292/), ваш код работает отлично для меня. Вы должны использовать 'data-id' вместо' id' для 'txtAuszubildender '', так как 'id' является ** уникальным ** идентификатором и должен использоваться только один раз в документе. –

+0

Спасибо, Фабиан, к сожалению, data-id не работает для меня. «txtAuszubildender» уникален. Я вложил немного информации в вопрос. –

ответ

0

Ладно, я нашел проблему. Как-то typeahead создает второе поле ввода с теми же именами классов. Поэтому созданный второй элемент ввода приходит первым и не имеет идентификатора, поэтому я не получаю никакого идентификатора.

enter image description here

Что бы интересно, у меня есть какой-либо контроль о значениях класса в том, что второй элемент ввода?

Смежные вопросы