Update values of jquery range slider
I'm using Jquery range slider for search for prices. I have left side where is search panel and the right side where I show the vehicles. The vehicles I get from the API with an ajax call. In success function of ajax call I have code as follows:
success: function (result) {
vehicles_spinner.addClass("hidden");
$('#' + target_id).fadeOut(80, function () {
$(this).html(result).fadeIn(80);
$.HSCore.components.HSCarousel.init('[class*="js-carousel"]');
});
loadFilters();
},
Thus I'm using fadeOut and the fadeIn to show nice effect when the list of vehicles shows up. That works fine.
The problem is in jquery's range slider. To be able to update the values of the slider it needs to be initializated as follows:
let price_slider = $("#vehicles #price-slider");
$.HSCore.components.HSSlider.init(price_slider);
Thus I update the values as follows:
price_slider.slider('values', 0, min_price);
price_slider.slider('values', 1, max_price);
But they are not updated until I init the slider again. Thus the code that I use to update it is as follows:
let price_slider = $("#vehicles #price-slider");
price_slider.slider('values', 0, min_price);
price_slider.slider('values', 1, max_price);
$.HSCore.components.HSSlider.init(price_slider);
It works fine but the problem is that it goes a few times in ajax success function and the list of vehicles fade out and fade in a few times and it doesn't look so nice.
I have feeling that the updating values of the slider refreshes the page.
When I update the values without $.HSCore.components.HSSlider.init(price_slider); i get something as follows:
The list of vehicles fade out and fade in one time, what is what I want, thus that is fine, but the slider doesn't look good.
When I do not use $.HSCore.components.HSSlider.init(price_slider); the slider looks fine:
But the list of vehicles fade out and fade in a few times.
Any idea how to solve it? I hoop that I could explain it.
javascript jquery jquery-ui-slider
asked Nov 16 '18 at 6:57
BokyBoky
4,14854081
add a comment |
I'm using Jquery range slider for search for prices. I have left side where is search panel and the right side where I show the vehicles. The vehicles I get from the API with an ajax call. In success function of ajax call I have code as follows:
success: function (result) {
vehicles_spinner.addClass("hidden");
$('#' + target_id).fadeOut(80, function () {
$(this).html(result).fadeIn(80);
$.HSCore.components.HSCarousel.init('[class*="js-carousel"]');
});
loadFilters();
},
Thus I'm using fadeOut and the fadeIn to show nice effect when the list of vehicles shows up. That works fine.
The problem is in jquery's range slider. To be able to update the values of the slider it needs to be initializated as follows:
let price_slider = $("#vehicles #price-slider");
$.HSCore.components.HSSlider.init(price_slider);
Thus I update the values as follows:
price_slider.slider('values', 0, min_price);
price_slider.slider('values', 1, max_price);
But they are not updated until I init the slider again. Thus the code that I use to update it is as follows:
let price_slider = $("#vehicles #price-slider");
price_slider.slider('values', 0, min_price);
price_slider.slider('values', 1, max_price);
$.HSCore.components.HSSlider.init(price_slider);
It works fine but the problem is that it goes a few times in ajax success function and the list of vehicles fade out and fade in a few times and it doesn't look so nice.
I have feeling that the updating values of the slider refreshes the page.
When I update the values without $.HSCore.components.HSSlider.init(price_slider); i get something as follows:
The list of vehicles fade out and fade in one time, what is what I want, thus that is fine, but the slider doesn't look good.
When I do not use $.HSCore.components.HSSlider.init(price_slider); the slider looks fine:
But the list of vehicles fade out and fade in a few times.
Any idea how to solve it? I hoop that I could explain it.
javascript jquery jquery-ui-slider
asked Nov 16 '18 at 6:57
BokyBoky
4,14854081
Delegation is your friend. You can't really do much directly with elements that were added after the DOM loaded. So you have to access them through a parent node that was already there when the DOM was loaded. Here's an example I built a while back: jsfiddle.net/difster/cbtrzozt
– Difster
Nov 16 '18 at 7:02
@Difster That is why I use#vehicles. Div with that id is always there.
– Boky
Nov 16 '18 at 7:05
add a comment |
I'm using Jquery range slider for search for prices. I have left side where is search panel and the right side where I show the vehicles. The vehicles I get from the API with an ajax call. In success function of ajax call I have code as follows:
success: function (result) {
vehicles_spinner.addClass("hidden");
$('#' + target_id).fadeOut(80, function () {
$(this).html(result).fadeIn(80);
$.HSCore.components.HSCarousel.init('[class*="js-carousel"]');
});
loadFilters();
},
Thus I'm using fadeOut and the fadeIn to show nice effect when the list of vehicles shows up. That works fine.
The problem is in jquery's range slider. To be able to update the values of the slider it needs to be initializated as follows:
let price_slider = $("#vehicles #price-slider");
$.HSCore.components.HSSlider.init(price_slider);
Thus I update the values as follows:
price_slider.slider('values', 0, min_price);
price_slider.slider('values', 1, max_price);
But they are not updated until I init the slider again. Thus the code that I use to update it is as follows:
let price_slider = $("#vehicles #price-slider");
price_slider.slider('values', 0, min_price);
price_slider.slider('values', 1, max_price);
$.HSCore.components.HSSlider.init(price_slider);
It works fine but the problem is that it goes a few times in ajax success function and the list of vehicles fade out and fade in a few times and it doesn't look so nice.
I have feeling that the updating values of the slider refreshes the page.
When I update the values without $.HSCore.components.HSSlider.init(price_slider); i get something as follows:
The list of vehicles fade out and fade in one time, what is what I want, thus that is fine, but the slider doesn't look good.
When I do not use $.HSCore.components.HSSlider.init(price_slider); the slider looks fine:
But the list of vehicles fade out and fade in a few times.
Any idea how to solve it? I hoop that I could explain it.
javascript jquery jquery-ui-slider
asked Nov 16 '18 at 6:57
BokyBoky
4,14854081
I'm using Jquery range slider for search for prices. I have left side where is search panel and the right side where I show the vehicles. The vehicles I get from the API with an ajax call. In success function of ajax call I have code as follows:
success: function (result) {
vehicles_spinner.addClass("hidden");
$('#' + target_id).fadeOut(80, function () {
$(this).html(result).fadeIn(80);
$.HSCore.components.HSCarousel.init('[class*="js-carousel"]');
});
loadFilters();
},
Thus I'm using fadeOut and the fadeIn to show nice effect when the list of vehicles shows up. That works fine.
The problem is in jquery's range slider. To be able to update the values of the slider it needs to be initializated as follows:
let price_slider = $("#vehicles #price-slider");
$.HSCore.components.HSSlider.init(price_slider);
Thus I update the values as follows:
price_slider.slider('values', 0, min_price);
price_slider.slider('values', 1, max_price);
But they are not updated until I init the slider again. Thus the code that I use to update it is as follows:
let price_slider = $("#vehicles #price-slider");
price_slider.slider('values', 0, min_price);
price_slider.slider('values', 1, max_price);
$.HSCore.components.HSSlider.init(price_slider);
It works fine but the problem is that it goes a few times in ajax success function and the list of vehicles fade out and fade in a few times and it doesn't look so nice.
I have feeling that the updating values of the slider refreshes the page.
When I update the values without $.HSCore.components.HSSlider.init(price_slider); i get something as follows:
The list of vehicles fade out and fade in one time, what is what I want, thus that is fine, but the slider doesn't look good.
When I do not use $.HSCore.components.HSSlider.init(price_slider); the slider looks fine:
But the list of vehicles fade out and fade in a few times.
Any idea how to solve it? I hoop that I could explain it.
javascript jquery jquery-ui-slider
javascript jquery jquery-ui-slider
asked Nov 16 '18 at 6:57
BokyBoky
4,14854081
asked Nov 16 '18 at 6:57
BokyBoky
4,14854081
asked Nov 16 '18 at 6:57
BokyBoky
4,14854081
asked Nov 16 '18 at 6:57
BokyBoky
4,14854081
asked Nov 16 '18 at 6:57
BokyBoky
4,14854081
4,14854081
Delegation is your friend. You can't really do much directly with elements that were added after the DOM loaded. So you have to access them through a parent node that was already there when the DOM was loaded. Here's an example I built a while back: jsfiddle.net/difster/cbtrzozt
– Difster
Nov 16 '18 at 7:02
@Difster That is why I use#vehicles. Div with that id is always there.
– Boky
Nov 16 '18 at 7:05
add a comment |
Delegation is your friend. You can't really do much directly with elements that were added after the DOM loaded. So you have to access them through a parent node that was already there when the DOM was loaded. Here's an example I built a while back: jsfiddle.net/difster/cbtrzozt
– Difster
Nov 16 '18 at 7:02
@Difster That is why I use#vehicles. Div with that id is always there.
– Boky
Nov 16 '18 at 7:05
Delegation is your friend. You can't really do much directly with elements that were added after the DOM loaded. So you have to access them through a parent node that was already there when the DOM was loaded. Here's an example I built a while back: jsfiddle.net/difster/cbtrzozt
– Difster
Nov 16 '18 at 7:02
Delegation is your friend. You can't really do much directly with elements that were added after the DOM loaded. So you have to access them through a parent node that was already there when the DOM was loaded. Here's an example I built a while back: jsfiddle.net/difster/cbtrzozt
– Difster
Nov 16 '18 at 7:02
@Difster That is why I use
#vehicles. Div with that id is always there.– Boky
Nov 16 '18 at 7:05
@Difster That is why I use
#vehicles. Div with that id is always there.– Boky
Nov 16 '18 at 7:05
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53332877%2fupdate-values-of-jquery-range-slider%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53332877%2fupdate-values-of-jquery-range-slider%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Delegation is your friend. You can't really do much directly with elements that were added after the DOM loaded. So you have to access them through a parent node that was already there when the DOM was loaded. Here's an example I built a while back: jsfiddle.net/difster/cbtrzozt
– Difster
Nov 16 '18 at 7:02
@Difster That is why I use
#vehicles. Div with that id is always there.– Boky
Nov 16 '18 at 7:05