Question

我有一个表单，会将chipsData放入一个名为#hiddenTags的隐藏输入字段中，因为我不想让您使用AJAX调用，因为我有一个-存在形式。下面是我如何将芯片数据放入隐藏的输入中。

$("form").on("submit", function() {  

    var tags = M.Chips.getInstance($('.chips')).chipsData;
    var sendTags = JSON.stringify(tags);
    $('#hiddenTags').val( sendTags );

});

我将其发送到数据库中，如下所示：（PHP）

$this->tags = json_encode( $data['tags'] );

但是，保存这样的数据会引发各种问题。我正在使用Twig显示数据。

下面是我试图显示它的方式，但是与此同时，我得到了一个错误unexpected token & in json

  $('.chips').chips();
  $('.chips-initial').chips({
    data: {{ json }}
  });

我还尝试将json放入隐藏的输入中，然后将其放入jquery中：

  <input id="raw_json" type="hidden" hidden value="{{ user.tags }}">

  var json = $('#raw_json').val(); 

  $('.chips').chips();
  $('.chips-initial').chips({
    data: json
  });

但是，我得到了错误Cannot read property 'length' of undefined

抱歉，如果我做的事情很愚蠢和/或完全错误，我们将不胜感激。

Answer 1

因此，解决问题的答案在于在初始化chips对象时设置值以及解析JSON数据。

从那里开始，在添加或删除芯片时保持文本框为最新状态。

   var chipsData = JSON.parse($("#Tags").val());

    $('.chips-placeholder').chips({
        placeholder: 'Enter a tag',
        secondaryPlaceholder: '+Tag',
        data: chipsData,
        onChipAdd: (event, chip) => {
            var chipsData = M.Chips.getInstance($('.chips')).chipsData;
            var chipsDataJson = JSON.stringify(chipsData);
            $("#Tags").val(chipsDataJson);
        },
        onChipSelect: () => {

        },
        onChipDelete: () => {
            var chipsData = M.Chips.getInstance($('.chips')).chipsData;
            var chipsDataJson = JSON.stringify(chipsData);
            $("#Tags").val(chipsDataJson);
        }
    });

如何存储和检索物化芯片？

1 个答案: