I use the following bootstrap slider on my current project:
https://github.com/seiyria/bootstrap-slider
However, I get the following error, which I cannot explain:
bootstrap-slider.min.js?ver=4.9.1:4 cannot call methods on slider prior to initialization; attempted to call 'getValue'
I have several sliders there, I'll just give you an example with one.
JS
jQuery(document).ready(function ($) {
$sliders = $('.apd-slider');
$("#AmazonPriceInteger").slider({
id: "AmazonPriceInteger",
min: 0,
max: 5000,
range: true,
value: [0, 5000],
});
//The console doesn't trigger, when I change the sliders...
$selects.add($sliders).add($checkboxes).change(function () {
console.log("This doesn't even trigger");
var hiddenItems = getHiddenItems();
console.log(hiddenItems);
updateVisibility(hiddenItems);
});
}
HTML
<label for="AmazonPriceInteger">Preis (EUR)</label>
<div class="box--slider">
<span>0</span><input id="AmazonPriceInteger" type="text" class="span2 apd-slider" data-slider-handle="custom"/><span>5000</span>
</div>
The funny thing is, this seemed to work all the time. I didn't change any of the code and then all of a sudden, it stopped working.
I had this problem before though and I thought I fixed it, which you can read here:
jQuery Slider: cannot call methods on slider prior to initialization
This is the link to the project: http://www.maehroboter-guru.de/maehroboter-liste/
It's in German though. If you click on it, you just have to click on "Filter Einstellungen" to see the sliders.
Related
I get some problem when I use owl-carousel in my Rails project.
when I go back to the cached page of my browsers which is using carousel class, I get too many carousel owl-dot classes in my page,this is my
JS code
function initScrollboxHobby() {
var owl = $(".owl-carousel");
owl.owlCarousel({
// loop: true,
items: 1,
nav: true
});
}
and issue HTML code
How to fix it ?
I guess you are using turboinks and when you go back the page is cached by it and when it loads it reruns the owl carousel init function.
The problem, básically, is that turbolinks doesn't play well with non-idempotent functions https://github.com/turbolinks/turbolinks#making-transformations-idempotent
I've managed to make a workaround for this problem with other js plugins, so it should work for you.
Básically, the idea is:
First, when the user enters the page for the first time, copy the content of the element with class .owl-carousel on itself as a data attribute
carousel = $('.owl-carousel');
carousel.data('originalHtml', carousel.html();
carousel.owlCarousel(....)
Then, when the users goes back, before initializing the carousel, check if it was initialized and cached, in that case, first replace the content with the original and remove classes
carousel = $('.owl-carousel');
if (carousel.hasClass('owl-loaded')) {
carousel.html(carousel.data('originalHTML')).removeClass('owl-theme owl-loaded owl-drag');
}
carousel.owlCarousel(....)
You can mix both steps into one:
$(function() {
const carousel = $('.owl-carousel');
if (carousel.hasClass('owl-loaded')) { //if it has the class then it means it's the cached view
carousel.html(carousel.data('originalHTML')).removeClass('owl-theme owl-loaded owl-drag');
} else { // else it's a fresh load of the page
carousel.data('originalHtml', carousel.html());
}
carousel.owlCarousel(....)
})
It's a little bit hacky, but the only way I found to use plugins that are not prepared to work with turbolinks without going through modifying those plugins.
Another option would be to just disable Turbolinks if you thing you just don't need it.
For arieljuod's help of problem reason and my own trying.
I coded like this now.
var owl = $(".owl-carousel");
var owl_navs = $('.owl-carousel .owl-nav');
var owl_dots = $('.owl-carousel .owl-dots');
var owl_cloned = $('.owl-carousel .owl-stage-outer .owl-stage .cloned');
if(owl.hasClass('owl-loaded'))
{
owl_navs.remove();
owl_dots.remove();
owl_cloned.remove();
}
owl.owlCarousel({
loop: true,
items: 1,
nav: true
});
It's tedious but worked well.
Now,I understanded reason.
When I go back to cached page,because I wrote javascript code in my ERB file,in that way, old HTML code may changed.
And then Turbolinks function will run the JS code in that CHANGED new HTML code,Turbolinks must do that,because when I visit cached page again,it will lose all the event binds.
So the whole carousel items will be messy.
I am initializing a bootstrap-select control successfully on document.ready, but if I put it inside a setTimeout, all my options are ignored and the default options are used instead. I have tried debugging through the selectpicker js code but I can't figure out why this behavior is different. Please note I did see a very similar question but it was never successfully answered (Bootstrap-Select plugin not working with time consuming page load).
Here is my JS code:
$(document).ready(function () {
...display code
setTimeout(function () {
$('#mySelect').selectpicker({
container: 'body',
actionsBox: true,
liveSearch: true,
maxOptions: 16,
noneSelectedText: 'Sites',
selectedTextFormat: 'count>0'
});
...more display code
}, 100);
});
If I remove the setTimeout, the selectpicker displays with the options listed in the code, but if I leave the setTimeout, only the default options are used. Does anyone know why this is the case and how to get it to use the correct options when called from within the setTimeout?
I set up an overlay slick carousel, so when you click on the image a larger carousel appears with the selected image as the initialSlide. However, Slick carousel is adding several blank slides after the initialSlide. The blanks only appear when you click next starting with the third slide. When you click on the previous button the blank slides do not appear. What am I doing wrong?
$("#sync1 .item").on("click", function() {
var index = $(this).attr("data-slick-index");
$(".overlay-carousel-container").css("display", "block");
$("body").css("overflow", "hidden");
$("#overlayCarousel").slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
initialSlide: index,
focusOnSelect: true
});
})
$(".close").on("click", function() {
$(".overlay-carousel-container").css("display","none");
$("body").css("overflow", "inherit");
$("#overlayCarousel").slick("unslick");
$("#executiveOverlay").slick("unslick");
});
The Jquery attr() function returns a string value. When you pass that into the slick constructor function it translates it to a different number.
Adding a simple Number() function to change the index to numeric should solve your problem. Just place the following middle line between the lines I placed it:
var index = $(this).attr("data-slick-index");
index = Number(index);
$(".overlay-carousel-container").css("display", "block");
This answer is for the people who are struggling slick carousal as I also faced a lot of problem with it, even though it seems very easy as mentioned but I found out that it has lots limitation.
Very old
To have exact same look like mentioned it needs CSS(SCSS) which is difficult to do in development which as a new user I realised it quite late. Or you don't get dots and arrows with the same exact look easily.
Several other issues like the one mentioned here and other I found over stack flow.
The best one I resorted to for similar process is the one mentioned here
it's latest
and comes with a simple tutorial as well
Recommended for new beginner developers.
I am trying to implement a slider for a view form ( i have hidden the text field and want to make a script to display a slider and on change / stop to set the value to hidden text field. My problem is that the events are not firing at all. I added the jquery UI library and my script in the template.php of my template ( using ZEN ) :
function ThemeName_preprocess_page(&$variables) {
drupal_add_library('system', 'ui');
drupal_add_library('system', 'ui.slider');
drupal_add_js('URL/js/search.js');
}
and this is the javascript/jquery code :
(function ($, Drupal, window, document, undefined) {
Drupal.behaviors.customSearch = {
attach: function(context, settings) {
$(document).ready(function (){
$("#distanta_slider").slider({
orientation: "horizontal",
range: "min",
max: 150,
min: 1,
value: 1,
//change: slider_change(),
//slide: slider_change(),
//stop: slider_change()
});
$("#distanta_slider").on("slidestop",slider_change());
$("#distanta_slider").on("slide",slider_change());
$("#distanta_slider").on("slidechange",slider_change());
});
function slider_change(){
alert($("#distanta_slider").slider("value"));
}
}
};
})(jQuery, Drupal, this, this.document);
I tried binding the event using $(selector).on , and also tried to declare them in the constructor ( the 3 commented lines ). In the first scenario at page load i received 3 alerts with the current value , in the second scenario i receive 3 alerts saying "Object Object" , but in both scenarios if I move the slider absolutely nothing happens ... No errors , nothing .
Any help is most appreciated. Thank you in advance,
Cristi
Call function name without arguments in on statement.
$("#distanta_slider").on("slidestop",slider_change);
$("#distanta_slider").on("slide",slider_change);
$("#distanta_slider").on("slidechange",slider_change);
Wrong Assumption
$("#distanta_slider").on("slidestop",slider_change());
the function slider_change executes immediately here
I'm using jQuery with the bxSlider plugin, here is the link to it just incase: http://bxslider.com/
I'm trying to reload the slider and my custom pager after I've removed certain slides from it.
Here is what I have tried:
$(function() {
var slider = $('#slider').bxSlider({
pagerCustom: '#bx-pager'
});
$('.list').on('click', '.delete', function() {
image = $(this).closest('li').find('[type="hidden"]');
// image.attr('id') contains a string: image-0, image-1, image-2, etc.
$('#slider, #bx-pager').find('.' + image.attr('id')).remove();
slider.reloadSlider({
pagerCustom: '#bx-pager'
}); // I have also tried: slider.reloadSlider();
});
});
It works partially. What happens is the slider gets reloaded just fine but it removes the pager completely when it runs the reload.
Thank you very much for any help.
As long as I see, this is a bug in bxSlider, in fact, when you call the reloadSlider method, internally are called the methods destroySlider and init.
In the destroySlider method the pagerEl element is destroyed, this is right if you are not using a custom one, because it is recreated programmatically in the init method, but if you are using a custom one it can't be recreated programmatically.
I ended up modifying the destroySlider method to check if a custom pager is used, in this case it must not be deleted.
Here is the before (line 1294):
if(slider.pagerEl) slider.pagerEl.remove();
And after:
if (slider.settings.pagerCustom === '') {
if(slider.pagerEl) slider.pagerEl.remove();
}
I'll post the bug on GitHub as soon as I have the time.