I found they have select2 file in their vendor folder, so i linked them (those links works when i open these two files in web browser).
in header
<link href="{{asset('adminbackend/vendors/select2/dist/css/select2.min.css')}}" rel="stylesheet">
in Footer
<script src="{{asset('adminbackend/vendors/select2/dist/js/select2.full.js')}}"></script>
in body
<div class="item form-group">
<select class="form-control select2-multi" name="tags[]">
#foreach($tags as $tag)
<option value="{{$tag->id}}"> {{$tag->name}} </option>
#endforeach
</select>
</div>
in body
<script type="text/javascript">
$(.select2-multi').select2();
</script>
but, still it not working.. this code found in here https://www.youtube.com/watch?v=BNUYaLWdR04&list=PLwAKR305CRO-Q90J---jXVzbOd4CDRbVx&index=43
It could be the missing quote in the script.
$(document).ready(function() {
$('.select2-multi').select2();
});
Could you try this?
Related
I am using vuejs cdn in my laravel blade file. Now, I want to bind v-model on my html input fields like text and select tag. here is my code how i am trying to use v-model on select tag. This process isn't working for me. thanks in advance
#section('script')
<script>
var app = new Vue({
el: '#purchaseApp',
data() {
return {
purchase_items:'',
supplier:'',
}
},
methods: {
},
});
</script>
#endsection
<div class="widget-content widget-content-area">
<div class="form-group row">
<label for="category" class="col-sm-2 col-form-label">Supplier</label>
<div class="col-sm-10">
<select name="supplier" v-model="supplier" class="form-control suppliers" >
<option value="" selected disabled>Select Supplier</option>
<option value="shibbir">shibbir</option>
<option value="ripon">ripon</option>
</select>
</div>
</div>
I have got the solution of problem. There I used select-2 plugin. For that reason, v-model wasn't working.
``I am new in using ckeditor and working on simple crud application using ckeditor. it is working well in the create blade but not showing in the update blade.
here is my blade code
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ckeditor').ckeditor();
})
</script>
</head>
<body>
<form method = "post" action="{{url('updateblog')}}" enctype = "multipart/form-data">
#csrf
#method('PATCH')
<label for="title">Title</label>
<textarea class="ckeditor form-control" name="title">{!!$blog ->title!!}</textarea><br>
</form>
Try this, this worked for me:
<textarea class="ckeditor form-control" name="title">{{ $blog->title }}</textarea>
I hope i can help you.
I have standard TALL Stack new APP
& I am trying to make select2 from Laravel 8 & Livewire 2
I have follow this
in my live-wire blade I have added this
<div class="w-1/3 px-3 mb-5" wire:ignore>
<x-jet-label for="uid" value="{{ __('Users') }}" />
<select class="select2 w-full rounded-md border border-gray-200 p-2 focus:outline-none focus:border-gray-500" id="uid" wire:model.defer="uid">
<option value="" selected>Choose User</option>
#if(isset($users))
#foreach($users as $user)
<option value="{{ $user->id }}">{{ $user->name }}</option>
#endforeach
#endif
</select>
<x-jet-input-error for="uid" class="mt-2" />
</div>
at the bottom of this page
#push('scripts')
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
#endpush
Its not loading Select2 but there is no error in console.
Also I have added
#livewireStyles
#livewireScripts
in layout blade also.
Do I need to add any extra CSS or JS or what I am doing wrong.
Even I have added this in my blade but still not working
#section('style')
#endsection
#section('scripts')
<script type="text/javascript">
$(document).ready(function () {
$('#FirstOption').select2({
placeholder: 'Select an option',
});
});
</script>
#endsection
Thanks
I've been trying multiple solutions but none of them worked out for me. Maybe because I am using
newest version of Laravel. So this place is my last hope.
All of these code snippets are inside one blade file.
#section('stylesheets')
<script src="https://cdn.tiny.cloud/1/[my-api-key]/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea',
menubar: false,
});
</script>
#endsection
And inside the content section I have this very simple code, later I will add other features,
but I am not moving on until this works out.
#section('content')
<div class="container">
<div class="card-body">
<form method="post">
#csrf
<div class="form-group row">
<label for="body" class="col-md-4 col-form-label text-md-right">Text</label>
<textarea name="body" id="body" class="form-control"></textarea>
</div>
</form>
</div>
</div>
#endsection
I have opened account on their website, and I have api key. But it doesn't work.
Also if you know some rich text editor other than Tinymce, that works fine with laravel 8, please share it.
The scripts are referring to wrong section, I moved everything inside content, and voila, it worked.
I want t o use Multiple select boxes for tags and head section i put:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
My view:
<div>
{!! Form::label('tags','Select Tags:') !!}
<select class="form-control select2-multi" multiple="multiple" name="tags">
#foreach ($tags as $tag)
<option value='{{ $tag->id }}'>{{ $tag->name }}</option>
#endforeach
</select>
<script type="text/javascript">
$(.select2-multi).select2();
And in the browser i get this:
enter image description here
$(document).ready(function() {
$(".js-example-basic-single").select2();
$(".js-example-basic-multiple").select2();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<br>
<strong>Single Select</strong>
<select class="js-example-basic-single form-control">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<br><br>
<strong>Multi Select</strong>
<select class="js-example-basic-multiple form-control" multiple>
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
It's working perfectly fine.
make sure you've included all the required css and js plugins
NOTE:
Add this class for single select js-example-basic-single option
js-example-basic-multiple for multi-select option