DRCIT/snipe-it
1
0
Fork 0
mirror of https://github.com/snipe/snipe-it.git synced 2025-01-12 06:17:28 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Update select2 snippet for Livewire 3

Browse source
This commit is contained in:
Marcus Moore 2024-05-29 12:58:24 -07:00
parent 17f0ac1eae
commit 093c6652a8
No known key found for this signature in database
1 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
resources/assets/js/snipeit.js
View file

@ -610,24 +610,45 @@ function htmlEntities(str) {
* *
* 1. Set the class of your select2 elements to 'livewire-select2'). * 1. Set the class of your select2 elements to 'livewire-select2').
* 2. Name your element to match a property in your Livewire component * 2. Name your element to match a property in your Livewire component
* 3. Add an attribute called 'data-livewire-component' that points to $_instance->id (via `{{ }}` if you're in a blade, * 3. Add an attribute called 'data-livewire-component' that points to $this->getId() (via `{{ }}` if you're in a blade,
* or just $_instance->id if not). * or just $this->getId() if not).
*/ */
$(function () { // $(function () {
// $('.livewire-select2').select2()
//
// $(document).on('select2:select', '.livewire-select2', function (event) {
// var target = $(event.target)
// if(!event.target.name || !target.data('livewire-component')) {
// console.error("You need to set both name (which should match a Livewire property) and data-livewire-component on your Livewire-ed select2 elements!")
// console.error("For data-livewire-component, you probably want to use $_instance->id or {{ $_instance->id }}, as appropriate")
// return false
// }
// window.livewire.find(target.data('livewire-component')).set(event.target.name, this.options[this.selectedIndex].value)
// })
//
// window.livewire.hook('message.processed', function (el,component) {
// $('.livewire-select2').select2();
// });
//
// })
document.addEventListener('livewire:init', () => {
$('.livewire-select2').select2() $('.livewire-select2').select2()
$(document).on('select2:select', '.livewire-select2', function (event) { $(document).on('select2:select', '.livewire-select2', function (event) {
var target = $(event.target) var target = $(event.target)
if(!event.target.name || !target.data('livewire-component')) { if(!event.target.name || !target.data('livewire-component')) {
console.error("You need to set both name (which should match a Livewire property) and data-livewire-component on your Livewire-ed select2 elements!") console.error("You need to set both name (which should match a Livewire property) and data-livewire-component on your Livewire-ed select2 elements!")
console.error("For data-livewire-component, you probably want to use $_instance->id or {{ $_instance->id }}, as appropriate") console.error("For data-livewire-component, you probably want to use $this->getId() or {{ $this->getId() }}, as appropriate")
return false return false
} }
window.livewire.find(target.data('livewire-component')).set(event.target.name, this.options[this.selectedIndex].value) Livewire.find(target.data('livewire-component')).set(event.target.name, this.options[this.selectedIndex].value)
})
window.livewire.hook('message.processed', function (el,component) {
$('.livewire-select2').select2();
}); });
}) Livewire.hook('commit', function ({succeed}) {
succeed(({snapshot, effect}) => {
queueMicrotask(() => {
$('.livewire-select2').select2();
});
});
});
});