Topic: Chip select/delete doesn't work
Hello, I am trying to use your Chip feature but its not working for me. I created a simple page to test chip but it doesn't work. I imported the required files as well. Adding works fine, but the others are not working. Tried other versions but I see no changes. I hope we can find a solution as possible as we can.
$('.chips').on('chip.add', function(e, chip){ console.log('add'); });
$('.chips').on('chip.delete', function(e, chip){ console.log('delete'); });
$('.chips').on('chip.select', function(e, chip){ console.log('select'); });
Here is my HTML code:
<div class="chips chips-placeholder" > <div class="chip"><i class="close fa fa-times"></i></div> </div>
Functions, that you attached are just printing in console something, when you add/delete/select tag/chip (call it as you want). To initialize chips/tags you should add this code to your script:
$('.chips-placeholder').materialChip({
placeholder: 'Enter a tag',
secondaryPlaceholder: '+Tag',
});
Your functions are called, when chip was added/deleted/selected as I wrote above, so instead of for example console.log('delete');you can put any code, for example you can change background-color of your document, font color, anything you want. Hope it helped :)
ozankyk free commented 5 years ago
I added this code into my code, but it didn't change anything. I noticed something important right now, when I copy a chip element from chips div to outside of that div, the delete button works fine, but when I put it back to the chips div, the delete function doesn't work. There might be a problem between 'chips' and 'chip' class. Do you have any idea about that?
Krzysztof Wilk staff commented 5 years ago
Are you sure, that you are using Pro package? I copied your code to my editor, did what I said above and it worked. I've got an idea, maybe do a snippet with your problem, then paste it here? https://mdbootstrap.com/snippets here you can do it
Krzysztof Wilk staff commented 5 years ago
Look on this snippet, I think it could help https://mdbootstrap.com/snippets/jquery/piotr-glejzer/716622
ozankyk free commented 5 years ago
Hey, I tried to reproduce my error in the snippet but everything works fine. https://mdbootstrap.com/snippets/jquery/ozankyk/716550 . This is my page and in my project, delete function is not working for the first two 'chips', but the other colored 'chip's can delete easily.
Krzysztof Wilk staff commented 5 years ago
There's no code in this snippet.
ozankyk free commented 5 years ago
Sorry, you can check it now.
ozankyk free commented 5 years ago
This is the solution for my answer, thanks for help.
$('.chips').on('chip.add', function(e, chips){ a = document.getElementsByClassName('close'); for (let item of a) { if(item.type != "button") item.setAttribute("onclick", "delete_chip(this)"); } });
function delete_chip(item){ console.log('deleting') item.parentNode.remove() }
Krzysztof Wilk staff commented 5 years ago
Do you want more help or your case is done?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.0
- Device: Desktop
- Browser: Mozilla
- OS: Linux
- Provided sample code: No
- Provided link: No
Krzysztof Wilk staff commented 5 years ago
Do you use MDB Free package?
ozankyk free commented 5 years ago
No I am using MDB Pro 4.8.1