Ввод тегов Bootstrap

Я скачал исходный код JS и CSS для библиотеки bootstrap-tagsinput из следующего ресурса: http://timschlechter.github.io/bootstrap-tagsinput/examples/

На моем веб-сайте asp.net я использовал его следующим образом:

 <asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />

 <script type="text/javascript">
    $('input #txtCompany').tagsinput();
    alert($('input #txtCompany').val());
 </script>

Но на самом деле оповещение должно возвращать теги, которые я создал, но вместо этого оно возвращает: undefined

JS написан на Master Page. Все ссылки на CSS и JS также были упомянуты в разделе Master Page.

В чем проблема?

ИЗМЕНИТЬ:

Текстовое поле отображается следующим образом: введите здесь описание изображения

ИЗМЕНИТЬ:

С помощью следующего кода jQuery я смог получить содержимое div.

 $('#btn').click(function () {
                var div = document.getElementById("div");
                var spans = div.getElementsByTagName("span");

                for (i = 0; i < spans.length; i++) {
                    alert(spans[i].innerHTML);
                }
            });

Но проблема в том, что он возвращает следующее:

введите здесь описание изображения

Также отображается еще одно пустое оповещение! Я не знаю почему!


javascript twitter-bootstrap asp.net bootstrap-tags-input
person Abhishek Ghosh    schedule 17.08.2015    source источник
comment
если вы не возражаете, запустите страницу, затем просмотрите ее исходный код в браузере, а затем перенесите из нее HTML-тег текстового поля, чтобы он мог помочь   -  person Ahmed Mandour    schedule 17.08.2015
comment
пожалуйста, смотрите обновленный вопрос! Я добавил скриншот исходного кода! @АхмедМандур   -  person Abhishek Ghosh    schedule 17.08.2015

Ответы (2)


arrow_upward
2
arrow_downward

У вас есть 2 варианта: первый — заменить идентификатор на проанализированный в браузере.

<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />

<script type="text/javascript">
    $('input #ContentPlaceHolder1_txtCompany').tagsinput();
    alert($('input #ContentPlaceHolder1_txtCompany').val());
 </script>

или вы добавите класс в текстовое поле в качестве второго решения и замените идентификатор в коде jquery именем класса, а не идентификатором

<asp:TextBox ID="txtCompany" style="font-size:x-large" runat="server" data-role="tagsinput" class="form-control txtcomp" placeholder="Add Company" />

<script type="text/javascript">
    $('input .txtcomp').tagsinput();
    alert($('input .txtcomp').val());
 </script>

попробуй думаю получится

EDIT вы можете использовать эту функцию, чтобы показать добавленное значение элемента в предупреждении

 $('input').on('itemAdded', function (event) {
     alert(event.item)
 });
person Ahmed Mandour    schedule 17.08.2015
comment
попробуйте добавить код jquery в нижнюю часть тела - person Ahmed Mandour; 18.08.2015
comment
<script type="text/javascript" src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script> У меня уже есть эта ссылка... Мне нужно больше? - person Abhishek Ghosh; 18.08.2015
comment
я имею в виду этот ‹script type=text/javascript› $('input .txtcomp').tagsinput(); оповещение($('ввод .txtcomp').val()); ‹/скрипт› - person Ahmed Mandour; 18.08.2015
comment
Извините, не удалось сохранить мое редактирование. Пожалуйста, посмотрите метод, который я пробовал! - person Abhishek Ghosh; 18.08.2015
comment
Спасибо большоехххх! :D :D Это стандартный метод jQuery или он специфичен для этой библиотеки? - person Abhishek Ghosh; 18.08.2015
comment
добро пожаловать, Абхишек, это зависит от библиотеки, которую вы используете. - person Ahmed Mandour; 19.08.2015
comment
проверьте эту ссылку, она содержит полную документацию для библиотеки timschlechter.github.io/bootstrap-tagsinput/examples - person Ahmed Mandour; 19.08.2015

arrow_upward
0
arrow_downward

Вы должны установить для атрибута ClientIDMode значение «Статический», чтобы сохранить идентификатор элемента управления без идентификатора родительского заполнителя в префиксе. Как это:

<asp:TextBox ID="txtCompany" ClientIDMode="Static" style="font-size:x-large" 
runat="server" data-role="tagsinput" CssClass="form-control" placeholder="Add Company" />
person Sergey Borisenko    schedule 02.05.2018