I am using Laravel 10 and blade, the script in the modals works correctly for me but when I wanted to integrate it with the boostrap stepper it stopped working, it renders a select2 in a common way without making the ajax query.
Same with the select to show images in the options it stopped working.
This is the ajax script:
$('#customer').select2({
//dropdownParent: $('#personal'),
minimumInputLength: 1,
preAjax,
ajax: {
url: urlSearch,
type: 'POST',
delay: 250,
data: function (params) {
console.log(($.trim(params.term)))
console.log(params)
return {
q: params.term,
};
},
processResults: function (data, params) {
var results = [];
console.log(data)
$.each(data.items, function(index, user) {
if (user.cars.length > 0) {
$.each(user.cars, function(carIndex, car) {
results.push({
id: user.id,
text: user.first_name + " " + user.last_name + (car.plate ? " / " + car.plate : ""),
user: user,
car: car ? car : null,
usercar: user.car_users ? user.car_users[carIndex] : null
});
});
} else {
// Si el usuario no tiene coches, aún lo añadimos al resultado
results.push({
id: user.id,
text: user.first_name + " " + user.last_name,
user: user,
car: null,
usercar: null
});
}
});
return {
results: results
};
},
cache: true
},
});
For the stepper I am using this simplified script:
document.addEventListener('DOMContentLoaded', function (e) {
(function () {
const stepsValidation = document.querySelector('#multiStepsValidation');
if (stepsValidation) {
// Multi Steps form
const stepsValidationForm = stepsValidation.querySelector('#orderCar-form');
const validationStepper = new Stepper(stepsValidation, {
linear: false // Cambiar a false ya que no usaremos la validación lineal
});
const stepsValidationNext = [].slice.call(stepsValidationForm.querySelectorAll('.btn-next'));
const stepsValidationPrev = [].slice.call(stepsValidationForm.querySelectorAll('.btn-prev'));
stepsValidationNext.forEach(item => {
item.addEventListener('click', event => {
validationStepper.next();
});
});
stepsValidationPrev.forEach(item => {
item.addEventListener('click', event => {
validationStepper.previous();
});
});
}
})();
});