Materialize: "material_chip()" Add parameter to empty tags/overwrite existing ones

[FoxInFlame]

Setting tags as empty would be a great feature. When dynamically loading tags, and dynamically hiding tags, the tags don't disappear.

[acburst]

Can you post some code to help explain your issue more?

[FoxInFlame]

I have a tag textbox, prefilled with many dynamically generated tags.

I do this to update the tag box to new ones dynamically:

          var tagListArray = ["Apple", "Orange", "Mango"]; //Some new data here
          var data = new Object({data:[]});
          var index;
          for(index = 0; index < tagListArray.length; index++) {
            data.data.push({
              tag: tagListArray[index]
            });
          };
          $("#Form-tags").material_chip(data);

However, it seems that how many times I try, the tags don't update. The old ones are still there, and the new ones don't show up. I thought of emptying the textbox first and prefilling it again might work, but both jQuery text() and html() makes the textboxes unfunctional.

A feature to set the input empty, such as material_chip("empty"), or maybe adding a parameter to see if you should add on to the existing ones or overwrite completely, like material_chip({data:[tag: "Pineapple"]}, "add") or material_chip({data:[tag: "Fruits"]}, "add") will be what I'm looking for.

[developeranirudhprabhu]

Yes it would be good to have this feature.

[developeranirudhprabhu]

I made some changes which help me achieve similar thing. I made following changes to materialize.js.

1. Ln 3794 commented the if block for double intialization
2. For all events added a "off" handler. For example
   self.$document.off('click', SELS.CHIPS).on('click', SELS.CHIPS, function(e){
   $(e.target).find(SELS.INPUT).focus();
   });

This should allow us to add the data in following manner:
$('.selectedServices.chips').material_chip({'data':targetList});

Hope this helps

[matiasah7]

does it work?

[developeranirudhprabhu]

Yes. Worked for me. You can try it out.

Get Outlook for Android

On Thu, Sep 22, 2016 at 4:29 AM +0530, "Matías Abal" [email protected] wrote:

does it work?

You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
https://github.com/Dogfalo/materialize/issues/3626#issuecomment-248767058

[FoxInFlame]

I forgot to reply, it worked for me as well!

[developeranirudhprabhu]

I have not yet committed this to the branch!

[FoxInFlame]

My mistake.

[matiasah7]

I've tried but didn't work for me. Can you show how your final code looks?.

[developeranirudhprabhu]

Can you share your changes here?

[matiasah7]

I dont know why first lines of codes are outside of the code box.

Sure. I've Materialize v0.97.7

In Materialize.js:

• Commented this lines 3793-3796:

 `// if ($chips.data("initialized")) {

```
// // Prevent double initialization.

// return;

// }`
```

• Add a "off" to this lines (3817-3829) (I dont know if that's correct or i should add it to more lines):

`
this.handleEvents = function(){
var SELS = self.SELS;

  self.$document.off('click', SELS.CHIPS).on('click', SELS.CHIPS, function(e){
     $(e.target).find(SELS.INPUT).focus();
  });

  self.$document.off('click', SELS.CHIPS).on('click', SELS.CHIP, function(e){
    $(SELS.CHIP).removeClass('selected');
    $(this).toggleClass('selected');
  });

  self.$document.off('keydown', SELS.CHIPS).on('keydown', function(e){
    if ($(e.target).is('input, textarea')) {
      return;
    }

`

• And in my controller (im using AngularJS):

`
$(document).ready(function() {
$('.modal-trigger').leanModal();
});

    $('.chips-initial').material_chip({
        'data': $rootScope.emailChips
    });

`

EmailChips is a array like: [{tag: "string"},{tag:"String2"}] . I update it everytime that i change the currentFolder, and it works good. But my chips always are initialized with the first value of the variable.

Hope you can understand it, first post and bad english :D.

[FoxInFlame]

Add the off() method like you did, but for all the other on()s in that function. Lines 3883, 3888, 3892, and 3914. I don't know if that'll fix it for you, but that's what I did.

[matiasah7]

Thanks, i've done it but still load only the first time.

[developeranirudhprabhu]

off is to be added to all events

[developeranirudhprabhu]

Can you kindly tell what is your exact requirement?

[matiasah7]

Sure.

In my project, i've folders. Each folder can be shared. I use chips to share the folder.That's working well.

Now im trying to see shared users of each folder. Im trying to use chips initalized for that. When i load the first folder (doesn't care which folder is) it shows correctly the shared people chip by chip. When i go to another folder still showing the first initialized chips. I use a variable to give the shared people, the variable is working correctly because i print it in my html under the chips and it changes everytime.

So what i need exactly is re-initialize the chips.

There is some pics about what i say. You can check loaded chips upper and folder chips (same variable) under.

[developeranirudhprabhu]

Ok. I had similar kind off issue for which i made the above suggested changes. What you need to do is make all of the changes i suggested above. Then on every folder change trigger

$('.chips-initial').material_chip({
'data': $rootScope.emailChips
});

Also please make sure that the root scope values are updating successfully before the call. You add a breakpoint and ensure.
Hope this help.

[developeranirudhprabhu]

Also i was using ".chips" not ".chips-initial". Not sure if that makes any impact.

[matiasah7]

Now it works!!!!!

I added the off method to all lines that you both said, commented the lines of prevent double initialization and changed chips-initial for chips.

Thanks so much.

[developeranirudhprabhu]

Have added the fix. Hopefully they will merge it soon

[developeranirudhprabhu]

@acburst and @Dogfalo Please merge the fix or let me know if any more changes are needed. Will make those changes soon

[acburst]

Merged