jQuery dynamically generated rangeslider
For a school assignment i'm writing a cordova app.
I have a bunch of dynamically generated sliders for which I use the rangelsider.js. The normal code to use the rangeslider is this:
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//Do stuff
},
onSlideEnd: function () {
console.log("slider id: " +this.id);
},
onSlide: function () {
//Do stuff
}
});
Now I want to make this work when the sliders are dynamically generated. Most info I find on how to do this is about buttons, like this:
$(document).on("click", ".button", function(){ //do stuff });
So when I try to do this with my sliders like this:
$('#sliders').on("change", '.rangeslider', function () {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Now this works with one exception. When the page page/app loads the sliders don't have any CSS and look just like the normal HTML sliders until I click on one of them. Which is logical because .rangeslider({...}) (which adds the CSS) doesn't happen until the "change" event triggers. So how would I fix this. I tried various things with .ready() and DOMNodeInserted to trigger the .rangeslider() when the sliders are loaded but none seem to work.
I also found something about MutationObserver() but I don't really understand how to use it (in my code).
Disclaimer i'm very bad at JavaScript/jQuery so please give an example if you know a solution.
Thanks,
javascript jquery html dynamic rangeslider
edited Nov 15 '18 at 10:01
executable
1,9042823
asked Nov 15 '18 at 9:57
user35210user35210
11
add a comment |
For a school assignment i'm writing a cordova app.
I have a bunch of dynamically generated sliders for which I use the rangelsider.js. The normal code to use the rangeslider is this:
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//Do stuff
},
onSlideEnd: function () {
console.log("slider id: " +this.id);
},
onSlide: function () {
//Do stuff
}
});
Now I want to make this work when the sliders are dynamically generated. Most info I find on how to do this is about buttons, like this:
$(document).on("click", ".button", function(){ //do stuff });
So when I try to do this with my sliders like this:
$('#sliders').on("change", '.rangeslider', function () {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Now this works with one exception. When the page page/app loads the sliders don't have any CSS and look just like the normal HTML sliders until I click on one of them. Which is logical because .rangeslider({...}) (which adds the CSS) doesn't happen until the "change" event triggers. So how would I fix this. I tried various things with .ready() and DOMNodeInserted to trigger the .rangeslider() when the sliders are loaded but none seem to work.
I also found something about MutationObserver() but I don't really understand how to use it (in my code).
Disclaimer i'm very bad at JavaScript/jQuery so please give an example if you know a solution.
Thanks,
javascript jquery html dynamic rangeslider
edited Nov 15 '18 at 10:01
executable
1,9042823
asked Nov 15 '18 at 9:57
user35210user35210
11
add a comment |
For a school assignment i'm writing a cordova app.
I have a bunch of dynamically generated sliders for which I use the rangelsider.js. The normal code to use the rangeslider is this:
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//Do stuff
},
onSlideEnd: function () {
console.log("slider id: " +this.id);
},
onSlide: function () {
//Do stuff
}
});
Now I want to make this work when the sliders are dynamically generated. Most info I find on how to do this is about buttons, like this:
$(document).on("click", ".button", function(){ //do stuff });
So when I try to do this with my sliders like this:
$('#sliders').on("change", '.rangeslider', function () {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Now this works with one exception. When the page page/app loads the sliders don't have any CSS and look just like the normal HTML sliders until I click on one of them. Which is logical because .rangeslider({...}) (which adds the CSS) doesn't happen until the "change" event triggers. So how would I fix this. I tried various things with .ready() and DOMNodeInserted to trigger the .rangeslider() when the sliders are loaded but none seem to work.
I also found something about MutationObserver() but I don't really understand how to use it (in my code).
Disclaimer i'm very bad at JavaScript/jQuery so please give an example if you know a solution.
Thanks,
javascript jquery html dynamic rangeslider
edited Nov 15 '18 at 10:01
executable
1,9042823
asked Nov 15 '18 at 9:57
user35210user35210
11
For a school assignment i'm writing a cordova app.
I have a bunch of dynamically generated sliders for which I use the rangelsider.js. The normal code to use the rangeslider is this:
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//Do stuff
},
onSlideEnd: function () {
console.log("slider id: " +this.id);
},
onSlide: function () {
//Do stuff
}
});
Now I want to make this work when the sliders are dynamically generated. Most info I find on how to do this is about buttons, like this:
$(document).on("click", ".button", function(){ //do stuff });
So when I try to do this with my sliders like this:
$('#sliders').on("change", '.rangeslider', function () {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Now this works with one exception. When the page page/app loads the sliders don't have any CSS and look just like the normal HTML sliders until I click on one of them. Which is logical because .rangeslider({...}) (which adds the CSS) doesn't happen until the "change" event triggers. So how would I fix this. I tried various things with .ready() and DOMNodeInserted to trigger the .rangeslider() when the sliders are loaded but none seem to work.
I also found something about MutationObserver() but I don't really understand how to use it (in my code).
Disclaimer i'm very bad at JavaScript/jQuery so please give an example if you know a solution.
Thanks,
javascript jquery html dynamic rangeslider
javascript jquery html dynamic rangeslider
edited Nov 15 '18 at 10:01
executable
1,9042823
asked Nov 15 '18 at 9:57
user35210user35210
11
edited Nov 15 '18 at 10:01
executable
1,9042823
asked Nov 15 '18 at 9:57
user35210user35210
11
edited Nov 15 '18 at 10:01
executable
1,9042823
edited Nov 15 '18 at 10:01
executable
1,9042823
edited Nov 15 '18 at 10:01
executable
1,9042823
1,9042823
asked Nov 15 '18 at 9:57
user35210user35210
11
asked Nov 15 '18 at 9:57
user35210user35210
11
asked Nov 15 '18 at 9:57
user35210user35210
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
$(document).ready(function() {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Please make sure that this code is after the jquery is loaded and rangeslider.js is loaded.
Thanks,
answered Nov 15 '18 at 10:23
Atmiya KolsawalaAtmiya Kolsawala
1167
add a comment |
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%2f53316743%2fjquery-dynamically-generated-rangeslider%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
$(document).ready(function() {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Please make sure that this code is after the jquery is loaded and rangeslider.js is loaded.
Thanks,
answered Nov 15 '18 at 10:23
Atmiya KolsawalaAtmiya Kolsawala
1167
add a comment |
$(document).ready(function() {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Please make sure that this code is after the jquery is loaded and rangeslider.js is loaded.
Thanks,
answered Nov 15 '18 at 10:23
Atmiya KolsawalaAtmiya Kolsawala
1167
add a comment |
$(document).ready(function() {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Please make sure that this code is after the jquery is loaded and rangeslider.js is loaded.
Thanks,
answered Nov 15 '18 at 10:23
Atmiya KolsawalaAtmiya Kolsawala
1167
$(document).ready(function() {
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function () {
//do stuff
},
onSlideEnd: function () {
console.log(this.id);
},
onSlide: function () {
do stuff
}
});
});
Please make sure that this code is after the jquery is loaded and rangeslider.js is loaded.
Thanks,
answered Nov 15 '18 at 10:23
Atmiya KolsawalaAtmiya Kolsawala
1167
answered Nov 15 '18 at 10:23
Atmiya KolsawalaAtmiya Kolsawala
1167
answered Nov 15 '18 at 10:23
Atmiya KolsawalaAtmiya Kolsawala
1167
answered Nov 15 '18 at 10:23
Atmiya KolsawalaAtmiya Kolsawala
1167
1167
add a comment |
add a comment |
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%2f53316743%2fjquery-dynamically-generated-rangeslider%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
