Receiving an error running script in local browser - javascript

Receiving error "Enabler is not defined" when I try and run the page on my local browser. Is there a reason the "Enabler" variable isn't active when it's called or is there a specific way I need to run this type of doc.
Thanks so much for your help!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link type="text/css" href="styles.css"
rel="stylesheet" />
<script
src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script
src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script>
<script
src="https://s0.2mdn.net/ads/studio/cached_libs/scrolltoplugin_1.19.0_53288c1da14a1784cdf302f94d0116a7_min.js"></script>
<script
src="https://s0.2mdn.net/ads/studio/cached_libs/textplugin_1.19.0_ee0a9b7420a65afd44a2fd958cd72d16_min.js"></script>
<script src="mkr.min.js"></script>
<script src="isi-ss-tool.js"></script>
<script src="banner.js"></script>
<script type="text/javascript">
var clickTag1 = 'https://zilrettapro.com/request-a-rep-email-sign-up/';
var clickTag2 = 'https://zilrettalabel.com/PI.pdf';
var clickTag3 = 'https://www.fda.gov/medwatch';
function activateClickTags() {
mkr.on('#cta', 'click', linkHandler);
mkr.on('#pi', 'click', linkHandler);
mkr.on('#fda', 'click', linkHandler);
}
function linkHandler(e) {
e.preventDefault();
switch (e.target.id) {
case 'cta':
Enabler.exit('CTA Exit', clickTag1);
break;
case 'pi':
Enabler.exit('PI Exit', clickTag2);
break;
case 'fda':
Enabler.exit('FDA Exit', clickTag3);
break;
}
return false;
}
window.onload = function () {
//Polite loadind...
if (Enabler.isInitialized()) {
initHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, initHandler);
}
};
</script>
</head>

Related

Javascript callback called twice

I'm pretty new with coding, and this is really stumping me...
Here is my index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.css">
</head>
<body>
<div class="owl-carousel owl-theme">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous" type="text/javascript" language="JavaScript"></script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.js"></script>
<script src="app.js"></script>
<script>
fetch('https://www.paulschlatter.com/slideshow/slideshows.txt')
.then((response) => response.text().then(yourCallback));
let cache = {}
function yourCallback(retrievedText, callback) {
if (cache[retrievedText]) {
console.log('oops')
} else {
let array = []
console.log(callback)
array = retrievedText.split(/\n|\r/g)
let httpsArray = []
let keysArray = []
let mappedArray = array.map(item => {
if (item.substring(0, 5) === 'https') {
httpsArray.push(item)
} else if (item.substring(0, 3) === '202') {
keysArray.push(item)
}
})
const object = { ...keysArray
}
for (const prop in object) {
window['value' + prop] = []
httpsArray.filter(item => item.includes(object[prop])).map(item => {
window['value' + prop].push(item)
})
}
const owlImages = document.querySelector('.owl-carousel'),
owlDiv = document.createElement('img');
owlDiv.setAttribute('src', window.value0.pop())
owlDiv.setAttribute('alt', '')
owlImages.appendChild(owlDiv)
}
}
</script>
</body>
</html>
I am not using npm or anything, just straight JavaScript, and HTML.
The function yourCallback is firing twice, so even when I only console.log hello world it returns hello world twice to my browser.
Obviously this is not ideal, and I believe that the problem lies in the
fetch('https://www.paulschlatter.com/slideshow/slideshows.txt')
.then((response) => response.text().ten(yourCallback));
This was a silly mistake, in my app.js file I had the same fetch and yourCallback function, so it was firing twice cause I called it twice :)

Content page with <meta http-equiv="X-UA-Compatible" content="IE=10"/>

We are using IE edge for our application but we want to make one particular content page should open in IE 10.
We cant add
<meta http-equiv="X-UA-Compatible" content="IE=10" />
to the master page because it will get reflected in all other pages.
How to implement
<meta http-equiv="X-UA-Compatible" content="IE=10" />
to a particular content.
I tried the following code in the content page but no change.
<script type="text/javascript">
function AddCompatible() {
var m = document.createElement("meta");
m.setAttribute("http-equiv", "X-UA-Compatible");
m.setAttribute("content", "IE=10");
document.getElementsByTagName("head")[0].appendChild(m);
}
_spBodyOnLoadFunctionNames.push("AddCompatible")
Please add the below code in page_init or On_init in code behind.This code will force to IE10 compatible.
HtmlMeta tag = new HtmlMeta();
tag.HttpEquiv = "X-UA-Compatible";
tag.Content = "IE=10";
this.Page.Header.Controls.AddAt(0, tag);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
<script type="text/javascript" nonce="IICYfT/o8JWeqWwgKrYbJA">
document.addEventListener('DOMContentLoaded', function() {
var frameType = window.location.hash[1];
var callbackWindow;
switch (frameType) {
case 't'
FUCk:
callbackWindow = window.parent.opener;
break;
case 'p':
callbackWindow = window.open('', 'gtn-roster-iframe-id');
break;
case 'e':
callbackWindow = window.parent.frames['gtn-roster-iframe-id'];
break;
case 'n':
callbackWindow = null;
break;
default:
throw Error('Unknown frame type: ' + frameType);
}
if (callbackWindow != null) {
callbackWindow['_GC_OnFrameReady'](window);
}
});
</script>
</body>
</html>

jQuery file not linked properly

Here is the HTML head:
<head>
<link type='text/css' rel='stylesheet' href='style.css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" href='script.js'></script>
</head>
Here are the contents of the jQuery file:
$(document).ready(function() {
var $block_number = prompt('How many blocks?');
function writeBoard() {
while ($.isNumeric($block_number) === false && $block_number < 150) {
$block_number = prompt('How many blocks?');
}
for (var i = 0; i < $block_number; i++) {
$('#board').prepend("<div class='block'></div>");
}
};
writeBoard();
$(".block").on("mouseover", function () {
$(this).css("background-color", "black");
});
$('#redo').on('click', function () {
$('.block').css('background-color', 'white');
$block_number = prompt('How many blocks?');
writeBoard();
});
});
It doesn't seem to be working when the page is loaded locally as it was on jsfiddle for some reason. Any thoughts?
Fiddle: http://jsfiddle.net/zfiscr/9dutj67b/
Your script tag should be as follows :
<script type="text/javascript" src="script.js"></script>
instead of
<script type="text/javascript" href="script.js"></script>
Hope that helps!!!
Script has src , CSS has href :)
<script type="text/javascript" src='script.js'></script>
is correct.
Why ? Please check Here

Function won't allow undefined parameter

I'm trying to source a function that takes in an array "XY". JS throws an error saying that I can't index the variable. But this seems crazy since it's just loading a function - of course the array isn't defined yet! What am I missing?
function reformat(XY) {
"use strict";
var exper = [];
exper.X = [];
exper.Y = [];
for(var i=0;i<XY.length;i++){ // here, throws error "Uncaught TypeError: Cannot read property 'length' of undefined "
exper.X[i] = XY[i][0];
exper.Y[i] = XY[i][1];
}
}; // END reformat
Function is used as a callback after data is loaded:
<script type="text/javascript">
loadXY("XY.csv", reformat);
</script>
function loadXY(fname,callback){
d3.csv(fname, function(data) {
var XY = data.map(function(d) { return [ Number(d["X"]), Number(d["Y"])]; });
});
callback(XY);
}
EDIT: adding html context in case that helps:
<!doctype html>
<html>
<head>
<title>Experiment</title>
<meta charset="utf-8">
<script src="easeljs-min.js" type="text/javascript"> </script>
<script src="numeric-min.js" type="text/javascript"> </script>
<script src="jquery-min.js" type="text/javascript"> </script>
<script src="jquery.csv-0.71.min.js" type="text/javascript"> </script>
<script src="d3.min.js" type="text/javascript"> </script>
<script src="reformat.js" type="text/javascript"> </script>
<script src="loadXY.js" type="text/javascript"> </script>
<link rel=stylesheet href="task.css" type="text/css" media="screen">
</head>
<body>
<script type="text/javascript">
loadXY("XY.csv", reformat);
</script>
<canvas id="easel" width="640" height="480"> Stop Using IE! </canvas>
</body>
You are initializing XY inside of the previous loop. you need to move callback(XY); into the function above it like so:
function loadXY(fname,callback){
d3.csv(fname, function(data) {
var XY = data.map(function(d) { return [ Number(d["X"]), Number(d["Y"])]; });
callback(XY);
});
}

javascript / jquery : problem calling a function inside an object (function undefined)

I'm getting an error of "buildXML is not defined" when I run this code:
var c = {
updateConsumer:function (cid,aid,sid,survey){
var surveyXML = buildSurveyXML(survey);
},
buildSurveyXML: function(survey) {
var surveyResults = survey.split("|");
var surveyXML = '';
for (var i=0;i<surveyResults.length;i++){
...
}
return surveyXML;
}
}
And the html that includes this JS and calls the updateConsumer function:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Web Service Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../shared/js/consumerSoap.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
c.insertConsumer("First","Last","55555","name#url.com","76:1139");
});
</script>
</body>
</html>
The problem is that updateConsumer doesn't know anything about buildSurveyXML; that function isn't in the global scope. However, since your function is part of the same object, you can call it using the this keyword.
updateConsumer:function (cid,aid,sid,survey){
var surveyXML = this.buildSurveyXML(survey);
}
Use
var surveyXML = c.buildSurveyXML(survey);

Categories

Resources