Using Select2 JS (https://select2.org/).
Larave 10 blade Ajax data load.
Single select select dropdown name Location is working.
Multi Select for select select dropdowns name Category,Tag,Author is also working.
See the image.
See the image
But another single select name Parent is not working as I can not select a option.
See the image
Again another Multi Select for select dropdowns name Select News (Field name Read More) is not working as I can not select options.
See the image
Js code for Location,Category,Tag,Author
`$(‘.page-dynamic-section .create-edit-form [name=”category_ids[]”]’).select2({
width: ‘100%’,
multiple: true,
allowClear: true,
theme: “bootstrap-5”,
closeOnSelect: false,
placeholder: “{{ __(‘Please select’) }}”,
});
$('.page-dynamic-section .create-edit-form [name="tag_ids[]"]').select2({
width: '100%',
multiple: true,
allowClear: true,
theme: "bootstrap-5",
closeOnSelect: false,
minimumInputLength: 3,
placeholder: "{{ __('Please select') }}",
ajax: {
url: "{{ route('search.tags') }}",
dataType: 'json',
delay: 250,
data: function (params) {
return {
name: params.term
};
},
processResults: function (data) {
var results = $.map(data, function (obj) {
return { id: obj.id, text: obj.name };
});
return {
results: results
};
},
cache: true,
cacheKey: function (params) {
return "{{ env('APP_NAME') }}" + "{{ env('APP_ENV') }}" + "{{ Auth::id() }}" + "tag-input-from-create-news-form-" + params.term;
}
}
});
$('.page-dynamic-section .create-edit-form [name="location_id"]').select2({
width: '100%',
allowClear: true,
theme: "bootstrap-5",
closeOnSelect: false,
placeholder: "{{ __('Please select') }}",
});
$(‘.page-dynamic-section .create-edit-form [name=”author_ids[]”]’).select2({
width: ‘100%’,
allowClear: true,
theme: “bootstrap-5”,
closeOnSelect: true,
placeholder: “{{ __(‘Please select’) }}”,
ajax: {
url: “{{ route(‘search.authors’) }}”,
dataType: ‘json’,
delay: 250,
data: function (params) {
return {
name: params.term
};
},
processResults: function (data) {
var results = $.map(data, function (obj) {
return { id: obj.id, text: obj.name };
});
return {
results: results
};
},
cache: true,
cacheKey: function (params) {
return "{{ env('APP_NAME') }}" + "{{ env('APP_ENV') }}" + "{{ Auth::id() }}" + "author-input-from-create-news-form-" + params.term;
}
}
});
`
Js Code for Parent and ReadMore/Select News
`$(“.page-dynamic-section [name=’read_more_ids[]’]”).select2({
width: ‘100%’,
multiple: true,
allowClear: true,
theme: “bootstrap-5”,
closeOnSelect: false,
minimumInputLength: 5,
placeholder: “{{ __(‘Please select’) }}”,
ajax: {
url: “{{ route(‘search.newses’) }}”,
dataType: ‘json’,
delay: 250,
data: function (params) {
return {
name: params.term
};
},
processResults: function (data) {
return {
results: data.map(function (obj) {
return { id: obj.id, text: obj.title };
})
};
},
cache: false
}
});
$('.page-dynamic-section .create-edit-form [name="parent_id"]').select2({
width: '100%',
multiple: false,
allowClear: true,
theme: "bootstrap-5",
closeOnSelect: false,
minimumInputLength: 3,
placeholder: "{{ __('Please select') }}",
ajax: {
url: "{{ route('search.newses') }}",
dataType: 'json',
delay: 250,
data: function (params) {
return {
name: params.term
};
},
processResults: function (data) {
var results = $.map(data, function (obj) {
return { id: obj.id, text: obj.title };
});
return {
results: results
};
},
cache: true,
cacheKey: function (params) {
return "{{ env('APP_NAME') }}" + "{{ env('APP_ENV') }}" + "{{ Auth::id() }}" + "parent-news-input-from-create-news-form-" + params.term;
}
}
});`
All these are use in the same page.
Easily load data via ajax.
Changint poaition of js. Use Id or class instead of name.
Expection:
Select option from Parent and ReadMore/Select News.