php - 如何使用 PHP Ajax 编辑 Bootstrap Tokenfield 标签数据？

Question

我正在使用 Bootstrap Tokenfield 标签数据插入标签。它适用于插入操作。但我无法更新该标签数据。如何更新数据库中的标签。我列出了数据库中的所有标签。但是如何更新我不知道如何编辑标签值。请帮忙。

我的 php 代码是这样的

<div class="form-group">
<label class="form-label" for="validation-username">Tags <span class="text text-danger">*</span></label>
            <?php 

                $tags = explode(",",$a['tags']);

                foreach($tags as $t => $value){?> 
                    <span class="tm-tag tm-tag-info" id="CIGpD_<?php echo $t;?>">

                        <span><?php echo $value;?></span>

                        <a href="javascript:void(0)" class="tm-tag-remove" id="CIGpD_Remover_<?php echo $t;?>" tagidtoremove="<?php echo $t;?>">x</a>

                    </span>
            <?php }  ?>

<input type="text" value="<?php echo $a['tags']?>" name="tags" placeholder="Tags" class="typeahead tm-input form-control tm-input-info"/>
</div>

我的 JS 是这样的

$('.tm-tag-remove').click(function(){
            var tagid = document.querySelector('.tm-tag-info').id;
            $('#' + tagid).remove();

            var tag = $('.tm-input-info').val();
            console.log(tag);
            var tagArr = tag.split(',');

            tagArr.forEach(function(tagArr, value){

                var spanid = $('#CIGpD_' + value).text();
                // console.log(spanid);
            });



        });

Answer 1

您应该从 javascript 中分配值，而不是从 php 中分配值，这样它就会更新标签。 $a['tags'] 你需要在 javascript 中使用这个数组，就像我在示例 yourTags 中使用的那样，或者你也可以尝试使用逗号分隔值。

这是工作示例:

$('.tm-tag-remove').click(function() {
  var tagid = document.querySelector('.tm-tag-info').id;
  $('#' + tagid).remove();

  var tag = $('.tm-input-info').val();
  console.log(tag);
  var tagArr = tag.split(',');

  tagArr.forEach(function(tagArr, value) {

    var spanid = $('#CIGpD_' + value).text();
    // console.log(spanid);
  });
});

var yourTags = ['blue','red','white'];

$('.typeahead').tokenfield({})
$('.typeahead').tokenfield('setTokens', yourTags.join(','));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet" />
<div class="form-group">
  <label class="form-label" for="validation-username">Tags <span class="text text-danger">*</span></label>


  <input type="text" value="" name="tags" placeholder="Tags" class="typeahead tm-input form-control tm-input-info" />
</div>