Ввод тегов начальной загрузки не работает с новыми динамически добавляемыми строками таблицы с помощью jquery - PullRequest
Новая
       25

Ввод тегов начальной загрузки не работает с новыми динамически добавляемыми строками таблицы с помощью jquery

0 голосов
/ 01 июля 2018

Bootstrap tagsinput не работает с новыми динамически добавляемыми строками. На самом деле я клонирую скрытую строку таблицы, которая содержит некоторые поля ввода и значок. При щелчке этого значка появляется модальная форма и при отправке этой модальной формы я устанавливаю некоторые значения из этой модальной формы в поле входных тегов начальной загрузки, которое содержится в этой строке. Обратите внимание, что все строки имеют одинаковые поля ввода, но имеют разные идентификаторы строк и идентификаторы полей входных тегов. Когда я пытаюсь установить значение в поле bootstrap tagsinput для любой динамически добавляемой строки, значение всегда устанавливается на скрытую строку tr, я не знаю, почему это происходит с tagsinput. Я пытался установить значение для других полей ввода (текстовое поле, числовое поле), но они работают нормально. Что за проблема с этим? 

 $('.table-add').click(function () {

    // var $tr = $TABLE.find('tr.hide');
    // var $clone = $tr.clone(true).addClass('hide table-line');

    // $tr.removeClass('hide table-line');

    var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
    hid = $TABLE.find('tr.hide').attr('id');

    // //Assigning every table row a unique ID
    var max=0;
    $('table').find('tr').each(function(){
        var id=parseInt($(this).attr('id'));
        if (id>=max){
           max = id;
         }
     });

     //cloning row with new ID  
     $clone.attr('id', parseInt(max)+1);
     $clone.find('input.myinput').attr('id', parseInt(max)+1);
     $clone.appendTo( $('#'+hid).parent() );
    });

Каждая строка таблицы имеет их (поле ввода тегов и поле модальной формы). 

<td>
      <span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span>
</td>     

 <td>    
      <input contenteditable="false" name="unique_tag" 
      class = "myinput" id="tagsinputid" data-role="tagsinput"/> 
 </td>

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

 //Click on model box 
  $('tr #modelbox').click(function() {
     var $row = $(this).closest('tr');
     var tbid = $row.attr('id'); // table row ID
     $('#myModal').data('current', tbid); //save current tbid
     var fieldOption = []
     $row.find('#words option').each(function() { fieldOption.push($(this).val()); });
     console.log(fieldOption);

      $('.modal-body-inner').html('');
      for(var i = 0, size = fieldOption.length; i < size ; i++){
            var item = fieldOption[i];
            $('.modal-body-inner').append("<span class=span1 > "+ item + "</span>");
      }
  });

При щелчке модальной формы я беру строку таблицы и устанавливаю значение в поле tagsinput для той строки таблицы, которая не работает в моем случае. Это не работает для поля tagsinput. Я не знаю почему, но оно работает для других полей ввода. Когда я устанавливаю значение в taginput для этой строки, этот код устанавливает значение для поля tagsinput для скрытой строки. 

  $('#modelformbuttonclick').click(function() {
      var tableRowId =  $('#myModal').data('current');
      c = '#' + tableRowId;
      //removing all tags if anyone updates tags
      $(c+ ' input.myinput').tagsinput('removeAll');
      var count=1; var color = ["Europe","America","Australia","Africa","Asia", "Asia2", "Africa2"];

      $('.modal-body-inner span.myclass').each(function() {
          c = '#' + tableRowId;
          var randomNumber = Math.floor(Math.random()*color.length);
          $(c + '  input.myinput').tagsinput('add', { "name": "tagsdata", "value": $(this).text() , "text": $(this).text(), "continent": color[randomNumber]});
          count = count+1;
      });
      submitForm();
  });
...