We Keep Coding

javascript error in the console that prevents the rest of the javascript from working

I'm doing a project for my courses on symfony, I use webpack and the "slidejs" library to make carousels. Everything works fine on the page where I use splide but on the other pages where it's not used I get an error message in the console and all the rest of my javascript doesn't work anymore
Error: https://i.stack.imgur.com/x21fr.png
I'm importing the splide.js file into my app.js, my splide configuration looks like this
// Splide
// Last news
import Splide from '#splidejs/splide';
let splideEvents = new Splide( '#splideEvents', {
classes: {
arrow : 'splide__arrow bg-primary',
},
type: 'splide',
perPage: 4,
perMove: 1,
gap: '10px',
pagination: false,
breakpoints: {
992: {
perPage: 2
},
500: {
perPage: 1,
gap: 0
}
}
} );
splideEvents.mount();
let splideNews = new Splide( '#splideNews', {
classes: {
arrow : 'splide__arrow bg-primary',
},
type: 'splide',
perPage: 4,
perMove: 1,
gap: '10px',
pagination: false,
breakpoints: {
992: {
perPage: 2
},
500: {
perPage: 1,
gap: 0
}
}
} );
splideNews.mount();
let splideReleases = new Splide('#splideReleases', {
classes: {
arrow : 'splide__arrow bg-primary',
},
type: 'splide',
perPage: 4,
perMove: 1,
gap: '10px',
pagination: false,
breakpoints: {
992: {
perPage: 2
},
500: {
perPage: 1,
gap: 0
}
}
})
splideReleases.mount();
Any ideas how to resolve this?

You need to check if your elements are present in the dom or not :
if(document.querySelector('#splideEvents')) {
let splideEvents = new Splide( '#splideEvents', {
classes: {
arrow : 'splide__arrow bg-primary',
},
type: 'splide',
perPage: 4,
perMove: 1,
gap: '10px',
pagination: false,
breakpoints: {
992: {
perPage: 2
},
500: {
perPage: 1,
gap: 0
}
}
} );
}
if they are not you don't do anything because there is no slide in the page

how to override the studies of the tradingview widget

I am trying to customize a trading view widget without success, I want to change the color of the RSI Indicator, and change the levels, this is the code:
new TradingView.widget({
"container_id": "box" + i,
"autosize": true,
"symbol": chartTicker,
"interval": intervalValue,
"timezone": timezoneValue,
"theme": theme,
"style": "1",
"locale": "en",
"toolbar_bg": toolbarbg,
"enable_publishing": false,
// "hide_legend": true,
"hide_top_toolbar": false,
"hide_side_toolbar": false,
"save_image": false,
"allow_symbol_change": allowsymbolchange,
"show_popup_button": false,
"withdateranges": withdateranges,
"details": details,
"hideideas": true,
"disabled_features": ["use_localstorage_for_settings", create_volume_indicator_by_default"],
"enabled_features": ["move_logo_to_main_pane", "hide_left_toolbar_by_default"],
// "disabledDrawings": true,
"studies_overrides": {
"rsi.rsi.plot.color": "#2196f3",
"rsi.level.0": 20,
"rsi.level.1": 80
},
"studies": [
"RSI#tv-basicstudies"
],
});
Thanks in advance

I have this code working just right. Perhaps you can use to find the error.`
var studies = [
{
id: "IchimokuCloud#tv-basicstudies",
version: 2.0
},
{
id: "BB#tv-basicstudies",
inputs: {
length: 25
},
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 200
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 100
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 50
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 9
}
},
{
id: "RSI#tv-basicstudies",
},
{
id: "RSI#tv-basicstudies",
inputs: {
length: 4
}
}
];
var chart1 = new TradingView.widget(
{
autosize: true,
symbol: "OANDA:EURUSD",
interval: "3",
timezone: "America/Bogota",
theme: "dark",
style: "1",
locale: "en",
hide_side_toolbar: true,
hide_top_toolbar: false,
enable_publishing: false,
allow_symbol_change: true,
details: false,
hidevolume: true,
studies: studies,
container_id: "tradingview_1"
}
);
Hope it is useful.

the correct way to do it is, like the example below
new TradingView.widget({
"container_id": "box" + i,
"autosize": true,
"symbol": chartTicker,
"interval": intervalValue,
"timezone": timezoneValue,
"theme": theme,
"style": "1",
"locale": "en",
"toolbar_bg": toolbarbg,
"enable_publishing": false,
// "hide_legend": true,
"hide_top_toolbar": false,
"hide_side_toolbar": false,
"save_image": false,
"allow_symbol_change": allowsymbolchange,
"show_popup_button": false,
"withdateranges": withdateranges,
"details": details,
"hideideas": true,
"disabled_features": ["use_localstorage_for_settings", create_volume_indicator_by_default"],
"enabled_features": ["move_logo_to_main_pane", "hide_left_toolbar_by_default"],
// "disabledDrawings": true,
"studies": [
{
id: "RSI#tv-basicstudies",
inputs: {
length: 4
}
}
]
});
You can set inputs of any indicator like this, but I do not know how to change default styles of the indicators. Maybe you know.

Use the following code to customize RSI oscillator.
"studies_overrides": {
"relative strength index.rsi.color": "#2196f3",
"relative strength index.upper band.color": "#2100f5",
"relative strength index.lower band.color": "#2100f5",
"relative strength index.upper band.value": 80,
"relative strength index.lower band.value": 20,
},
"studies": [
"RSI#tv-basicstudies"
]

for example in tradingview constructor:
new Tradingview.widget({
overrides: {
"paneProperties.background": "#ffffff"
},
studies_overrides: {
"volume.volume.color.0": "#00FFFF",
}
})
Normally I would add more about the solution, but the library isn't open source and its licensing terms might prohibit reproducing any of its documentation.

DataTable set class and background for a TD

I am having big issues assigning a custom class to a TD in DataTables in order to change the background color based on the value of it. It seems like the class is getting assigned, but I am not able to get the if-statement working.
Here is my columnDefs
"columnDefs": [
{ className: "dt-center test", "targets": [ 7 ] },
//{ "sClass": "test", "aTargets": [ 7 ] },
{ className: "dt-center", targets: '_all' },
{ className: "dt-justify", targets: '_all'},
{ targets: [0, 1, 2, 3, 7], visible: true},
{ targets: '_all', visible: false },
]
Here is my JavaScript If-statement
$(".test").each((index, element) => {
if (element.innerText >= 0) element.classList.add("green");
else element.classList.add("red");
});
My CSS
.green {
background-color: green !important;
}
.red {
background-color: red !important;
}
Any help would be very much appreciated on this matter - It has bugged me out for a while now.

bxslider can't use jQuery functions in navigation

I'm trying to call a jQuery click function at the navigation of my bxslider like the following:
$("a.bx-next").click(function(){
alert("works!");
});
the problem is, that somehow i can't access anything that is in the .bx-controls section... if i try to:
$(".bx-viewport li").click(function(){
alert("works!");
});
it works as expected...
is there anyone, who experienced the same or knows, what the problem could be?
thanks in advance :)
EDIT
Actually i am using Drupal and the views slideshow plugin to include the bxslider... i don't know, what impact that could have, but these are the options given in JSON:
"viewsSlideshowBxslider": {
"views_slideshow_bxslider_images_1": {
"general": {
"mode": "horizontal",
"speed": 500,
"slideMargin": 0,
"startSlide": 0,
"randomStart": 0,
"infiniteLoop": 1,
"hideControlOnEnd": 0,
"captions": 1,
"ticker": 0,
"tickerHover": 0,
"adaptiveHeight": 0,
"adaptiveHeightSpeed": 500,
"video": 0,
"touchEnabled": 1,
"preloadImages": "all",
"disable_standard_css": 0,
"useCSS": 1,
"align_image": "left",
"align_caption": "left",
"swipeThreshold": 50,
"oneToOneTouch": 1,
"preventDefaultSwipeX": 1,
"preventDefaultSwipeY": 0,
"color_caption": "80, 80, 80, 0.75"
},
"controlsfieldset": {
"controls": 1,
"nextText": "",
"prevText": "",
"startText": "",
"stopText": "",
"autoControls": 0,
"autoControlsCombine": 0
},
"pagerfieldset": {
"pager": 1,
"pagerType": "full",
"pagerShortSeparator": " \/ "
},
"autofieldset": {
"pause": 4000,
"autoStart": 1,
"auto": 0,
"autoHover": 0,
"autoDelay": 0,
"autoDirection": "next"
},
"carousel": {
"minSlides": 4,
"maxSlides": 6,
"moveSlides": 1,
"slideWidth": 0
},
"callback": [
],
"fixes": {
"height_does_not_dyn_change": 0
}
}
}

okay, i found it on my own...
i'm not sure if it didn't work, because of the implementation via Drupal.
I had to define custom navigation like
<p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
and then in a custom js file
$('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Onward →',
prevText: '← Go back',
onSlideNext: function(){
handleBxNav("next");
},
onSlidePrev: function(){
handleBxNav("prev");
}
});
function handleBxNav(direction){
if(direction == "prev"){
console.log("prev");
}else{
console.log("next");
}
}
with this solution, i can add custom events to the navigation :)
hope it helps if anyone is running in the same issue

How to refresh DataTable with server side processing and Scroller extension

I was tried to use these approaches:
Using api().draw(false) function, but it resets scroll offset.
Using api().ajax.reload(null, false). It resets scroll offset too.
Using dataTable._fnDraw() function. It doesn't work too. There is a bug when you are trying a bit scroll and after _fnDraw() call it scrolls to previous position. When you are scrolling a lot - it works well.
My TypeScript code:
var dataTableOptions = {
serverSide: true,
ordering: true,
searching: true,
columns: [
{ "data": "id" },
{ "data": "workflowId" },
{ "data": "discovery" },
{ "data": "title" },
{ "data": "createdBy" },
{ "data": "createDate" },
{ "data": "status" }
],
ajax: (data, callback, settings) => {
// server side service call
},
dom: 'rtiS',
scrollY: 400,
scroller: {
rowHeight: 35,
loadingIndicator: true
},
initComplete: function () {
forceRefresh = _.throttle(() => {
//this.api().ajax.reload(false);
this._fnDraw();
}, 1000);
setInterval(() => {
forceRefresh();
}, 5000);
}
}

I didn't find any other way as get scrollTop of scroller before ajax call and after table refresh (api().ajax.reload) assign it again. It's works for me.

Datatable automatically refresh (with updated data) on server side operation, no need to force refresh.
$(document).ready(function() {
var dataTableOptions = {
serverSide: true,
ordering: true,
searching: true,
columns: [
{ "data": "id" },
{ "data": "workflowId" },
{ "data": "discovery" },
{ "data": "title" },
{ "data": "createdBy" },
{ "data": "createDate" },
{ "data": "status" }
],
ajax: (data, callback, settings) => {
// server side service call
},
dom: "frtiS",
scrollY: 400,
deferRender: true,
scroller: {
rowHeight: 35,
loadingIndicator: true
}
}
A live example can be found here