materialize chips and the addChip() method

Question

I am using materialize chips in a typical "Publish Post" form where i use the chips for the tags field. All good.

Now, when i do the same in the almost identical "Edit Post" screen there is a difference, i call from the database the tags the post already has and i insert them in the element where the chips are inserted.

I solved already a couple of that idea's problems but when i want to delete a chip clicking the close icon it doesn't work, either if it's a pre-existing tag or it is a newly generated tag.

This behavior doesn't happen if I don't populate the chip's container with pre-existing tag/chips. So I have 2 options:

I keep trying to make the close icon work populating by myself the chip's container or
I use the addChip method, so probably if I let the plugin generate those pre-existing tag/chips all is going to be fixed.

My problem with the second option is I have no idea how could I make that method work in my code.

Option 1

<div id="chips1" class="chips chips-placeholder input-field">
  @foreach($tags as $tag)
    <div class="chip" data-tag="{{$tag}}" tabindex="0">{{$tag}}
      <i class="material-icons close">close</i>
    </div>
  @endforeach
</div>

Option 2 (without the foreach populating the div)

<div id="chips1" class="chips chips-placeholder input-field">

</div>

and the JS

    /* I initialize the chips with a onChipAdd method   
and onDelete method to keep the  variable updated */

    var val = [];
    $('#chips1').chips({
        placeholder: 'Etiquetas...',
        secondaryPlaceholder: '+Etiqueta',
        onChipAdd: function () {
            val = this.chipsData;
            console.log(val);

        },
        onChipDelete: function() {
            val = this.chipsData;
            console.log(val);
        }
    });


    /* ***************************************** */


    /* Here populate the hidden input that is going to deliver the 
    data with the pre-existing chips of Option 1 */

    var chipsArr = [];
    var chipis = $('#chips1 div.chip');

    for (let index = 0; index < chipis.length; index++) {

        chipsArr.push($(chipis[index]).data('tag'));
    }

    $('#chips-values').val(JSON.stringify(chipsArr));

    /* ***************************************** */

    /* Here i push to the array the newly added tags with the val variable */

    $('#publishSubmit').on('click', function (e) {
        e.preventDefault();
        for (let index = 0; index < val.length; index++) {
            chipsArr.push(val[index].tag);          
        }
        $('#chips-values').val(JSON.stringify(chipsArr));
        console.log($('#chips-values').val());

        $('form#postPublish').submit();
    });

M4SX5 M4SX5 · Accepted Answer · 2018-11-22T08:01:43

I know your question is already a while ago, but maybe it will help you nevertheless. I come across the exact same problem and solved it as follows:

I created the chip container as follows:

 <div id="chips" class="chips-placeholder"></div>
 <div id="chips_inputcontainer"></div>

Then I created hidden inputs foreach existing chip in the database inside of the "chips_inputcontainer".

For example like this:

 <div id="chips_inputcontainer">
      <?php foreach($chips as $chip): ?>
           <input type='hidden' name='chip[previous][<?php echo $chip['id'] ?>]' value='<?php echo $chip['text'] ?>'>
      <?php endforeach; ?>
 </div>

At the end, I initalized the chip input with the following JavaScript Snipped:

<script>
      $('#chips').chips({
            placeholder: 'Enter a tag',
            secondaryPlaceholder: '+Tag',
            onChipAdd: function(e, chip){
                $("#chips_inputcontainer").append("<input type='hidden' name='chip[new][]' value='" + chip.innerHTML.substr(0, chip.innerHTML.indexOf("<i")) +  "'>");
            },
            onChipDelete: function(e, chip){
                $('#chips_inputcontainer input[value="' + chip.innerHTML.substr(0, chip.innerHTML.indexOf("<i")) + '"]').val('**deleted**');
            },
            data: [
                <?php foreach($chips as $chip): ?>
                    {tag: '<?php echo $chip['text'] ?>'},
                <?php endforeach; ?>
            ],
        });
</script>

This snippet creates every time when a new chip is added a hidden input with the necessary data. And every time, when a chip is deleted, the value of the hidden input field is set to **deleted**

And so I know:

which tags are new to the database
which ones are existing ones
which id do the existing ones have in the database
which ones are deleted

I hope, this will help you.

materialize chips and the addChip() method

1 Answers