Tukukkk

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

    });

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.