Используя jquery clone(), новый класс bootstarp Tokenfield генерируется в поле ввода.

go to

http://jsfiddle.net/rns3hang/450/

TokenField в новом клонированном поле ввода работает, но проблема в том, что ОНО НАХОДИТСЯ ВНУТРИ ПОЛЯ ВВОДА

И я хочу только одно поле ввода с некоторыми предопределенными/постоянными тегами, а также иметь возможность добавлять новые значения токена или тегов.

 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center"> Insert Diet</h2>
   <br /><table class="table table-bordered" >
</table>
<br>
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">
     <tr>



      <th width="20%">Breakfast</th>
      <th width="20%">Pre Lunch</th>
      <th width="20%">Lunch</th>
      <th width="5%"></th>
     </tr>
     <tr class="tableinputs">

    `  
      <td><input type="text" class="break_name skill" value="Tea/Coffee"/></td>

      <td ><input type="text" class="mid_meal  skill" value="Fruits"/></td>

      <td ><input type="text"  class="lunch_name skill" value="Vegetables,salads"/></td>
      <td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
   </div>

  </div>
 </body>

Jquery-код

$(document).ready(function(){

 $('.skill').tokenfield({
  autocomplete:{
   source: ['Food1','Food2','Food3','Food4','Food5','CSS','Laravel','CakePHP'],
   delay:100
  },
  showAutocompleteOnFocus: true
 });



 var count = 1;
 var $table;

     $table=$('#crud_table tbody');

     var $existRow=$table.find('tr').eq(1);
      /* bind to existing elements on page load*/
      bindAutoComplete($existRow);
 $('#add').click(function(){



//$("#crud_table tbody  tr.tableinputs:last").clone().appendTo("#crud_table tbody");

var $row=$("#crud_table tbody  tr.tableinputs:last").clone();
 var $input=$row.find(":text").val("");
  $table.append($row);


/*
$(".break_name:last").val('');
$(".mid_meal:last").val('');
$(".lunch_name:last").val('');*/

    bindAutoComplete($row );

    $input.focus();

 }); 

 function bindAutoComplete($row ){
    /* use row as main element to save traversing back up from input*/
     $row.find('.skill').tokenfield({
  autocomplete:{
   source: ['Food1','Food2','Food3','Food4','Food5','CSS','Laravel','CakePHP'],
   delay:100
  },
  showAutocompleteOnFocus: true
 });
     $('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
});
}

 $(document).on('click', '.remove', function(){

//If this there is only one row left clear that row instead of removing it
if ($("#crud_table tbody tr").length === 1)
$("#crud_table tbody tr:last").find("input").val('');
else
  $("#crud_table tbody tr:last").remove();
 });

});

Я попытался удалить атрибут значения из поля ввода, но он все еще не работает.


jquery twitter-bootstrap bootstrap-tokenfield
person Sahil Kashyap    schedule 28.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

И я хочу только одно поле ввода

Это немного сложно из-за логики поля bootstrap-tokenfield. Но у меня есть возможное решение, которое может вас порадовать. Мы уважаем созданные новые поля ввода, но удаляем атрибут «имя», поэтому форма игнорирует его.

до:

$('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
});

после

$('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
      $(this).data('bs.tokenfield').$input.attr("name",""); //<- this is the new line
});
person Toni Is-here    schedule 29.06.2018
comment
спасибо, но это не работает. Все, что я хотел, это нажать кнопку «Добавить», и первая строка, как она есть, копируется со всеми ее возможностями tokenfield без создания внутри нее нового поля ввода. Может быть, мне следует использовать какую-то другую библиотеку tokenfield - person Sahil Kashyap; 29.06.2018
comment
Извините, я добавил строку не в том месте. Просто отредактировал мой ответ. Не могли бы вы попробовать еще раз. - person Toni Is-here; 29.06.2018
comment
спасибо, но он все еще не работает. Я попробовал это в jsfiddle.net/rns3hang/532. - person Sahil Kashyap; 29.06.2018
comment
он устанавливает имя = ноль. так, как задумано. поэтому он не будет отправлять данные POST на сервер... Возможно, я неправильно понял проблему. - person Toni Is-here; 29.06.2018