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);
});
}
Related
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>
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
I have a simple page with a "button/link" when i press the button i need to call the github api to return all issues logged in my repository and show in table format.
But when i hit the link nothing happends..
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix">
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
</script>
</div>
</body>
</html>
Can anyone point me to where i have gone wrong with my code
your script is inside your div tag. When you change the html inside it, whole script will be removed. Try to place the script outside the div tag.
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix"></div>
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
You should see errors in your console. You didn't close the functions right
$(function () {
$('#ghsubmitbtn').on('click', function (e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function (json) {
if (json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
} else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
});
});
});
please look here again
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
The second parameter requires id of your table you have no table with id jsonTable i think that is the problem
i am trying to output array values via a click using backbone view model, please advise how to output each array values on a separate line or maybe displaying each array value in a list item via jquery. Thanks :)
<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
</head>
<body>
<button>click</button>
<div class="ctype"></div>
<div class="cexperience"></div>
<script type="text/javascript">
var Job1 = Backbone.Model.extend({
defaults:{
type:'permanent',
experience:['html','css','php']
}
});
var myJob1 = new Job1();
var Jobview1 = Backbone.View.extend({
el:'button',
events:{
'click':'render'
},
render: function(){
var _type = myJob1.get('type');
var _experience = myJob1.get('experience');
$('div.ctype').html(_type);
$('div.cexperience').html(_experience);
return this
}
})
$(document).ready(function(e) {
var myJobview1 = new Jobview1();
});
</script>
</body>
</html>
_.each(_experience, function (key, value) {
var tmp = $('<p />');
tmp.html(value);
$('.experience').append(tmp);
)};
this should work.
maybe you need to switch key, value to value, key.
i tend to forget the order of the parameters.
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);