Hello,
I have a JS code that gives the value to a price slider, and in that JS has a change that is being triggered and inside the change has a trigger that triggers another part of JS that does the post and redirects the page but the change is being triggered without any change and the page is reloading all hra, code:
/*slider jQuery UI*/
(function () {
var pdtPrice = $('form[name="workcontrol_filter"]').find('input[name="pdt_price"]');
var pdtMinPrice = parseInt(pdtPrice.attr('data-min'));
var pdtMaxPrice = parseInt(pdtPrice.attr('data-max'));
var pdtStepPrice = parseInt(pdtPrice.attr('data-step'));
var pdtRangePrice = parseInt(pdtPrice.attr('data-range'));
$("#slider_price").slider({
range: true,
min: pdtMinPrice,
max: pdtMaxPrice,
values: [pdtStepPrice, pdtRangePrice],
slide: function (event, ui) {
$("#amount").val("R$ " + ui.values[0] + " - R$ " + ui.values[1]);
},
// Esse change está sendo acionado sem ter alteração nenhuma no slider_price
change: function (event, ui) {
pdtPrice.val(ui.values[0] + ',' + ui.values[1]);
//alert('FOI ACIONADO');
$('form[name="workcontrol_filter"]').trigger('change');
}
});
if (pdtMinPrice === pdtMaxPrice) {
$("#slider_price").slider("option", "disabled", true);
}
$("#amount").val("R$ " + $("#slider_price").slider("values", 0) + " - R$ " + $("#slider_price").slider("values", 1));
})();
HTML:
<div id="slider_price"></div>
Code that trigger triggers:
/*change form*/
$('html').on('change', 'form[name="workcontrol_filter"]', function () {
$.post(action, $(this).serialize(), function (data) {
$('html, body').animate({scrollTop: 0}, 200, function () {
window.location.href = BASE + '/' + data.redirect;
});
}, 'json');
});
So anyone knows why this happens? And I do not know if that matters, but I use twig for the html.