Hello I’m Regan I am developing website using laravel 10. As you can see in my screenshot the x button is missing. The first time I implement this its working fine, but after months, when I came back to the page, it happens.
Missing x button to unselect
Here are the script of my select2 maybe it helps. I wanted to append an HTML to a div when selected a data from guidebooksData. I also check my console it doesn’t have any errors. Have anyone met this problem before?
<script>
$(document).ready(function() {
$('#dropDownSelectBooks{{$pricing->id}}').select2({
placeholder:'{{__("search-guidebook")}}',
maximumSelectionLength: {{$pricing->total_guidebook}}
});
// Function to update selected guidebooks
function updateSelectedGuidebooks() {
var selectedGuidebooksContainer = $('#selected-guidebook{{$pricing->id}}');
var selectedGuidebooks = $('#dropDownSelectBooks' + currentSectionId).select2('data');
selectedGuidebooksContainer.empty();
var count = 1;
selectedGuidebooks.forEach(element => {
// Loop through guidebooksData to find the guidebook with the matching ID
var dataId = element.id.trim();
for (var i = 0; i < guidebooksData.length; i++) {
if (guidebooksData[i].id == dataId) {
// Create HTML elements to represent the guidebook
var guidebookHTML = '<div class="block">';
guidebookHTML += '<h3>Guidebook ' + count + '</h3>';
guidebookHTML += '<div class="book">';
guidebookHTML += '<div class="img" style="background: url('' + guidebooksData[i].thumbnail + '') no-repeat;"></div>';
guidebookHTML += '<div class="desc">';
guidebookHTML += '<p>Guidebook</p>';
guidebookHTML += '<h3>'+ guidebooksData[i].title +'</h3>';
guidebookHTML += '<span>by ' + guidebooksData[i].user.first_name + '</span>';
guidebookHTML += '</div>';
guidebookHTML += '</div>';
guidebookHTML += '</div>';
// Append the guidebook HTML to selectedGuidebooksContainer
selectedGuidebooksContainer.append(guidebookHTML);
break; // Exit the loop since the guidebook has been found
}
}
count = count + 1;
});
}
// Event listener for dropdown change
$('#dropDownSelectBooks{{$pricing->id}}').on('change', function (e) {
updateSelectedGuidebooks();
});
});
</script>
I have tried to search any missing x button in stackoverflow but it’s not the same problem as me. I also have tried to remove my functions but still its not working. Any ideas how to make it appear?