Not working, no documentation
Closed this issue · 25 comments
I installed tagsinput, imported js and scss and added a type=tags input, but it's just a simple text input:
import 'bulma-tagsinput/dist/bulma-tagsinput.min'
@import "~bulma-tagsinput";
<input class="input" type="tags" placeholder="Add Tag" value="Tag1,Tag2,Tag3">
Hi, the documentation is outdated. Please call the .attach() static method to init the plugin on the input.
I'm currently working on the big issue with the integration into Laravel then I'll update all extensions and documentation.
Sorry for the inconvenience.
I tried this:
import Tagify from 'bulma-tagsinput/dist/bulma-tagsinput.min'
document.addEventListener('DOMContentLoaded', function () {
Tagify.attach()
})
but i get Tagify is not defined in the console.
also, i'm currently using this in a Laravel project, can you tell me what exactly you're working on?
I'm currently working with another user on is issue with laravel integration and I found the following process to follow to get it work (for carousel extension):
-
add "laravelcollective/html": "5.*" to composer.json then run "composer update"
-
in app.php: add this provider: Collective\Html\HtmlServiceProvider::class,
-
then these aliases:
'HTML' => Collective\Html\HtmlFacade::class,
'Form' => Collective\Html\FormFacade::class -
in webpack.mix.js update the mix command to:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copy('node_modules/bulma-carousel/dist/bulma-carousel.js', 'public/js'); -
in your view (welcome.blade.php) add the following at the end:
{!! HTML::script('js/bulma-carousel.js') !!}
<script>
var carousels = bulmaCarousel.attach();
</script>
you should have bulmaTagsinput defined, not Tagify
import bulmaTagsinput from 'bulma-tagsinput/dist/bulma-tagsinput.min'
document.addEventListener('DOMContentLoaded', function () {
bulmaTagsinput.attach()
})
Console:
ReferenceError: bulmaTagsinput is not defined
Where (which file) do you put the import ?
Why not just including js file directly into your view and then just call bulmaTasgInput.attach() as I show 2 posts above ?
i import bulma-tagsinput.min.js in my app.js file. because it's better to have a single js file and a single request. it shouldn't be any different, right?
You issue is related to Laravel integration so I only know 2 ways for it to work:
- Use the flow I gave you
- Recompil sources by yourself with your own webpack configuration
Regards
Thank you
The first option is not an option for me because I have to keep my requests minimal.
I don't know how to do the second option.
Here's how I made it work for now. I moved my attach() call to app.js instead of the page where I need it. The downside is it will be called in every page.
Looking forward to the Laravel integration.
If bulmaTagsInput is defined within your app.js. Why don't just reference it into window global variable then you should be able to call the .attach() only on the page you want.
Isn't that what import should do?
I'm also using sweetalert and it works in all files just fine without making a new global variable.
I'll try to have a look at sweetalert to check what's different.
Can you please give me the sweetalert repo url to be sure to look at the right one ?
Thanks. I'll keep you in touch
Can you please try with the last commit ?
https://github.com/Wikiki/bulma-tagsinput/blob/master/dist/js/bulma-tagsinput.js
I get bulmaTagsinput is not defined.
To be fair I copied the code to my final compiled file since I didn't know how to use the latest commit without upgrading the npm package. Could that be the problem?
no that's the right way.
I don't understand why it's not working with "import" :-(
Thanks anyway.
Maybe we can fix this later.
I think this is a case issue: try both: bulmaTagsinput and bulmaTagsInput (i of input in lower and upper case)
Tried both. No luck.
please try last release
please try last release
Just do that:
// Initialize all input of tags type.
var tagsinput = bulmaTagsinput.attach('[type="tags"]');
Thank you mohamdio!