We Keep Coding

Load iframes 1 by 1

I found this script on an earlier post. I was trying to get this to work but I am not sure why it is not working.
$(function() {
var iframes = $('iframe');
var i = 0;
(function next() {
var iframe = iframes.eq(i++);
if (iframe.length) {
iframe.attr('src', iframe.data('src')).load(next);
}
})();
});
I get the error:
jQuery.Deferred exception: url.indexOf is not a function", "TypeError: url.indexOf is not a function
at jQuery.fn.init.jQuery.fn.load (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js:10091:13)
at next (https://fiddle.jshell.net/_display/?editor_console=true:119:54)
at HTMLDocument.<anonymous> (https://fiddle.jshell.net/_display/?editor_console=true:121:9)
at mightThrow (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js:3557:29)
at process (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js:3625:12)", undefined
Here is the original post and the idea I would like to implement. Any help would be appreciated. I am new to jquery and unable to decipher what the real issue is.
https://jsfiddle.net/1jo83tav/

I guess is this problem that $ is a JQuery variable, add a CDN to your html or something.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Getting a ReferenceError attempting to eval what seems to me valid ES6. Why?

I am attempting to eval a js file which has the following content:
let typeCache = {};
export function type(label = '') {
if (typeCache[label]) {
throw new Error(`Action type "${label}" is not unique"`);
}
typeCache[label] = true;
return label;
}
That's the whole file. No imports, nothing too fancy. But I'm getting an error that says ReferenceError: label is not defined. Which is strange, given that label seems defined just fine.
Can anyone spot anything wrong here?
UPDATE: This file (and many others) are generated from Typescript, and sent to gulp-template so that variables can be replaced, etc. That's when the code is evaled. Here is the complete stacktrace I'm getting:
ReferenceError: label is not defined
at eval (lodash.templateSources[80]:9:10)
at DestroyableTransform._transform (C:\Work\School\Frontend\node_modules\gulp-template\index.js:24:40)
at DestroyableTransform.Transform._read (C:\Work\School\Frontend\node_modules\readable-stream\lib\_stream_transform.js:159:10)
at DestroyableTransform.Readable.read (C:\Work\School\Frontend\node_modules\readable-stream\lib\_stream_readable.js:365:10)
at flow (C:\Work\School\Frontend\node_modules\readable-stream\lib\_stream_readable.js:739:34)
at DestroyableTransform.<anonymous> (C:\Work\School\Frontend\node_modules\readable-stream\lib\_stream_readable.js:610:7)
at emitNone (events.js:86:13)
at DestroyableTransform.emit (events.js:185:7)
at onwriteDrain (C:\Work\School\Frontend\node_modules\gulp\node_modules\readable-stream\lib\_stream_writable.js:300:12)
at afterWrite (C:\Work\School\Frontend\node_modules\gulp\node_modules\readable-stream\lib\_stream_writable.js:288:5)
at onwrite (C:\Work\School\Frontend\node_modules\gulp\node_modules\readable-stream\lib\_stream_writable.js:281:7)
Thanks!

Ohhh I found the issue.
The code above is sent to gulp-template, which uses Lodash's template function, which in turn also attempts to replace that ${label} in the function... resulting in the error given that this is not defined at that time.
So, beware my gulp-template friends.
I fixed my issue by disabling gulp-template's ES6 interpolation and leaving just the ERB style interpolation (e.g. <% blah %>). I did that by providing an options object along with the template, like so:
.pipe(plugins.template(templateToReplace, { interpolate: /<%=([\s\S]+?)%>/g }))

JavaScript: $ is not a function (but it seems like it is)

I have a weird JavaScript problem that I just cannot understand.
My custom JavaScript file "header.js" uses jQuery. It throws the infamous "$ is not a function" error message but I don't understand why. The weird thing is I'm including jQuery.js and the code in question seems to have no problem to bind to jQuery events. So not having included jQuery is not the problem.
header.js
$(document).ready(function () {
if ($(document).width() >= 768) {
var header = false;
var scrollHandler = function () {
var scrollTop = $(window).scrollTop(); // line 5 that throws the error
// more code
};
//register function which is called on scroll
$(window).scroll(scrollHandler);
}
});
My HTML (with some debug output)
<script src="~/js/vendor/jquery.js"></script>
<script>
function printTest(str) {
console.log("test (" + str + "): " + $(".test").length);
}
</script>
<script>
printTest("2.1 before header");
</script>
<script src="~/js/header.js"></script>
<script>
printTest("2.2 after header");
</script>
Output when I load the page
test (2.1 before header): 1
test (2.2 after header): 1
But once I scroll my console error output shows:
TypeError: $ is not a function (line 5 in header.js)
Does anyone have an idea why that is? I've analyzed it for hours and I don't understand the reason. Any help/idea/suggestion would be highly appreciated. Thank you.

I possibly have a workaround. Its not the exact answer you seek. But can you check if putting the scroll handler's definition outside the document ready works for you ?
Please try as follows:
var scrollHandler = function() {
var scrollTop = $(window).scrollTop(); // line 5 that throws the error
// more code
};
$(document).ready(function() {
if ($(document).width() >= 768) {
var header = false;
//register function which is called on scroll
$(window).scroll(scrollHandler);
}
});
If this does not work too then there is something overriding your $ definition. Can you tell us if this works in your code ?

Ok, so if you have the same problem here is how I solved it.
The problem was a conflict with require.js. Require.js comes automatically with a module in Sitecore. At first I was not aware that require.js was causing this conflict because when I checked the JavaScript file I was looking for some override of $. What I didn't know at this point was that require.js also has a configuration file that includes its own version of jQuery.
I solved it by removing require.js (and adding the dependencies that it brought manually to my page).

SyntaxError: Unexpected token ( even when line is empty

I have this HTML:
<template is="auto-binding" id="container-binding-template">
<core-scaffold id="scaffold" onscroll={{containerScrolled}}>
<div id="container">
The auto-binding template and <core-scaffold> are part of Polymer.
This is the JavaScript:
var template = document.querySelector('#container-binding-template');
template.containerScrolled = function() {
// regardless of the code here, the error will occur (event if it's empty)
};
When I run this code I get the following error (in Chrome DevTools):
Uncaught SyntaxError: Unexpected token (                                           VMxxxx:2
When I open the VMxxxx file (e.g. VM1362) I see this code:
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {function () {
// This line contains the same code as in containerScrolled(). This is where the error is pointing to.
}
};}}}})
What's causing this error? How can I fix it?
Any help would be appreciated.
Update #1: JSFiddle

The event attribute should be on-scroll. What you have there is the native inline event handlers, which expect the input to be the body of a function.

Daily Script Error Reports - ReferenceError: "errorHandling_" is not defined. (line X, file "Code")

I use this basic import range scipt but receive multiple daily script error reports. The Script seems to do what I need it today so I do not understand what the error is referencing or means. Can someone help and explain?
(1.) ReferenceError: "errorHandling_" is not defined. (line 10, file "Code")
(2.) ReferenceError: "errorHandling_" is not defined. (line 8, file "Absence")
var values = SpreadsheetApp.openById('1MJ7D7vOWWPgJBO5MZtZHyPw6Iw0kNlZ8Y5OIwSdzBUg').
getSheetByName('Form responses 1').getRange('a:F').getValues();
SpreadsheetApp.getActive().getSheetByName('Overtime Activities (Do not edit)').
getRange(3,1,values.length,values[0].length).setValues(values);
function timeDriven(e) {
if( e !== undefined )
errorHandling_(monitor_,true);
}
var values = SpreadsheetApp.openById('1fdOI61__16jFCEDJCvWHtVMu6BhkxS88x5408-JB8oA').
getSheetByName('main').getRange('a:g').getValues();
SpreadsheetApp.getActive().getSheetByName('Absence & Lateness (Do not edit)').
getRange(3,1,values.length,values[0].length).setValues(values);
function timeDriven(e) {
if( e !== undefined )
errorHandling_(monitor_,true);
}

You probably mistyped the name of this function : errorHandling_(parameters) or you forgot to include it in your project.
Your scrip might work partially before it tries to execute the error handling or if no error occurred.