Jquery UI slider events not working Drupal 7 - javascript

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

Related

Fullcalendar 4.3 adding title to background event

fullcalendar 4.3 no longer uses jquery, after this i find it challenging to get the customization that i would like to have.
What i want is pretty simple to explain: i want the title of a background event to be visible.
So from this:
to this:
I did this change by hand (edit as html in firefox inspector), but would like to do it using javascript code.
This part works:
{
start: '2019-08-06',
end: '2019-08-10',
overlap: false,
title: 'Schoolvakantie',
rendering: 'background',
color: '#ff9f89'
,les: 'geenles'
}
],
eventRender: function (info) {
if (info.event.extendedProps.les == 'geenles') {
console.log(info.event);
}
}
But then instead of the console.log i would apply some change to the event, however the old event.prepend function is not available as jquery is no longer used.
Any ideas ?
btw, strange thing, if i add something inside the eventRender that changes anything in the event, such as
info.event.setProp( "textColor", "#ff00ff" ); //(after the console.log)
the javascript will go into an infinite loop. Very strange...
With the hints from ADyson i got it to work by simply adding the following eventRender function after the events array:
eventRender: function(info) {
if(info.event.extendedProps.something == 'something'){
info.el.innerHTML = '<br>'+info.event.title;
}
}

Bootstrap Slider: cannot call methods on slider prior to initialization

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.

Bootsrap-select retains default options inside SetTimeout call

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?

fancybox undefined in afterShow click event

I have the following code that I call on page load:
$('#postcodes-link').fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
Now this works fine to open the fancybox (fiddle example), but when I click on the row, it doesn't close the fancybox and just throws the following error:
Uncaught TypeError: Cannot read property 'close' of undefined
yet if I make the above into a jQuery function:
(function ($) {
$.fn.setUp = function () {
return $(this).each(function () {
$(this).fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
});
};
})(jQuery);
and call the following in the same place as I called the top code
$('#postcodes-link').setUp();
The fancybox will now close (fiddle example). My question is why does the first one not work whereas the second one does, and how can I make the first one work? I figure it is something to do with the scope of fancybox but then I would have expected the second one not to work as it is wrapped inside a further function
Please note I have tried various version of trying to close the fancybox:
$.fn.fancybox.close()
jQuery.fancybox.close()
parent.$.fn.fancybox.close()
$('.fancybox-close').trigger('click') //tried this one as a dirty hack but didn't work either
Ok, so I found out what the problem was when trying to get the fiddle to replicate the error:
On the table page, I was using the jQuery data-table plugin so I included all the scripts need to load that. As I was ajax loading the page into the modal, it meant jQuery was being loaded for a second time on the current page. This caused the error I was seeing.
Removing the jquery script made the fancybox work as I wanted or another workaround (if you want the target page to still work if it is not opened in a modal - eg if you have other links to that page) then you will have to use a fancybox iframe instead of the fancybox ajax modal

How do I put a jQuery datepicker in a SimpleModal dialog that its data comes from an ajax call?

I have a modal window appearing using SimpleModal with a jQuery datepicker attached to the textfield licenseExpiry. licenseExpiry is defined within the contents of the ajax call (SchoolDetails.php). However, when I click on the text box, nothing happens. I know that the callback is occurring because the console displays "opened", and the licenseExpiry object definitely exists in the DOM.
function SchoolDetails()
{
$.ajax({url:'SchoolDetails.php', success: function(data)
{
$('#admin-modal-content').html(data);
$('#admin-modal-content').modal({
onShow : function() {
console.log("opened");
$( "#licenseExpiry" ).datepicker();
},
containerCss: {
width: 500,
height: 400
}});
}});
return false;
}
What am I doing wrong?
EDIT: I tried putting the function in the onShow callback in an onOpen callback and in SchoolDetails.php, that also doesn't work.
Changing the version of jquery-ui I was using from 1.9.2 to 1.10.3 fixed the issue for me. I left the rest of the code as is.

Categories

Resources