如何存储和检索物化芯片? [英] How to store and retrieve materializecss chips?

问题描述

我有一个表单，其中将 chipsData 放入一个名为 #hiddenTags 的隐藏输入字段中，因为我不想让您使用AJAX电话，因为我有一个预先存在的表格.下面是我如何将芯片数据放入隐藏的输入中.

I have a form where I'm putting the chipsData into a hidden input field called #hiddenTags I'm doing this because I don't want you use an AJAX call because I have a pre-exist form. Below is how I'm putting the chip data into the hidden input.

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

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

});

我将其发送到数据库中，如下所示:(PHP)

I'm sending it to the database like this: (PHP)

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

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

However, saving data like this is raising all sorts of issues. I'm using Twig to display the data.

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

Below is how I'm trying to display it, however with this I get an error unexpected token & in json

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

我也尝试过将json放入隐藏的输入中，然后将其放入jquery中:

I have also tried putting the json into a hidden input and then putting it into jquery:

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

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

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

但是，有了这个，我得到了无法读取未定义的属性'length'的错误

However, with this I get and error of Cannot read property 'length' of undefined

如果我做的很愚蠢和/或完全错误，我们深表歉意，非常感谢您的帮助.

Apologies if I'm doing something stupid and/or completely wrong, any help is much appreciated.

推荐答案

因此，您的问题的答案在于初始化芯片对象时设置值以及解析JSON数据.

So the answer to your problems lies in setting the values when initializing the chips object, along with parsing the JSON data.

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

From there just keep the text box updated on add or delete of a chip.

   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);
        }
    });

这篇关于如何存储和检索物化芯片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！