So Im building a set of functions to call inside a page. They all reside inside a file "seeingPlotFunc.js" and I call it and some of the functions inside the body of the html file. There are dome global empty arrays declared at the beginning, but when the functions that update them are called, they still return empty:
relevant code in seeingPlotFunc.js:
var seeingPlot = seeingPlot || {};
seeingPlot.jsondata1 = [];
seeingPlot.initialData = function () {
d3.json(seeingPlot.initialphp1, function(error1, data1) {
// after getting the data it's parsed into array
data1.forEach(function(d){
d.date = seeingPlot.parseDate(d.date);
d.f_tok = +d.f_tok;
seeingPlot.jsondata1.push(d);
})
})
}
and the relevant code in the html file:
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript"
src="JS/seeingPlotFunc.js"></script>
<script type="text/javascript">
seeingPlot.initialData();
console.log(seeingPlot.jsondata1);
</script>
</body>
and it returns an empty array. If I call it just after pushing all the data into the array it returns the proper value. I've been banging my head with this one for some LONG hours...
I think the function in d3.json gets called asynchronously. So you need wait for a callback function and only then will you get your array.
seeingPlot.initialData = function (OnComplete) {
d3.json(seeingPlot.initialphp1, function(error1, data1) {
// after getting the data it's parsed into array
data1.forEach(function(d){
d.date = seeingPlot.parseDate(d.date);
d.f_tok = +d.f_tok;
seeingPlot.jsondata1.push(d);
})
OnComplete();
})
}
And your HTML
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript"
src="JS/seeingPlotFunc.js"></script>
<script type="text/javascript">
seeingPlot.initialData(function ()
{
console.log(seeingPlot.jsondata1);
});
</script>
</body>
Related
I would like to check using liquid language, if is there somewhere in the page, a script being called twice or more.
For example:
<script src="myscripts.js"></script>
<script src="myscripts.js"></script>
Is it possible using liquid or should I use javascript to validate?
I'm not sure about liquid, but if you wanted to go the JS route, this could work:
//locate all `<script>` tags and save the elements into an array
var scriptTags = [];
document.querySelectorAll('script').forEach(function(tag) {
scriptTags.push(tag)
});
//Put just the URLs of the script tags into an array
var scriptUrls = scriptTags.map(function(tag) {
return tag.src;
});
//Get a list of any URL that appears more than once
var duplicateUrls = scriptUrls.filter(function(url, i) {
return scriptUrls.indexOf(url) != i;
});
console.log(duplicateUrls);
<script src="dupe.js"></script>
<script src="other1.js"></script>
<script src="dupe.js"></script>
<script src="other2.js"></script>
<script src="other3.js"></script>
Can I do the following
lets assume I get page content like
var data = $('html').html();
if the page contain object
mydata = {
test:"mydata"
}
can I access this object some how ?? I want to get the info stored in that object like
console.log(data.mydata);
and it should return
test:"mydata"
Is there are way to get an object from JQuery data object like
var data = $('html').html();
note: the object in script tag like this
<script>
window.mydata = {
test:"mydata"
}
</script>
as I said I'm trying to access the data through jquery object or returned dom
var data = $('html').html();
I don't have direct access to window.mydata
is there anyway to access window.mydata from the data returned from this function
$('html').html();
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
<p>Lorem Ipsum</p>
<script type="text/javascript">
var data = $('html').html();
var mydata = {
test:"mydata"
}
console.log(data);
console.log(mydata); // Object { test: "mydata" }
console.log(mydata.test); // "mydata"
</script>
</body>
</html>
You can attach data in a DOM element using the .data API and retrieve it in the same format.
In your case it will be something like
<script>
window.mydata = {
test:"mydata"
}
$("html").data("someKey", window.myData);
// later retrieve it
var data = $("html").data("someKey");
console.log(data.test); /* should print mydata */
</script>
Update (after OP comment)
// assign your string which you get from Amazon to this variable
var fileContents = 'Some text which has script tags <script>window.mydata = {test:"mydata"}<\/script>';
$("#codeInject").html(fileContents).hide();
console.log(window.mydata);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="codeInject"></div>
Is it possible to get out the code that is inside a json file? You can have a look at it here: http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4
What is the code or method should I use to put the html code inside any raw div?
I tried to use jsonp, but there is a mistake:
unexpected token <
<script>
function myFunction(data){
var arr = JSON.parse(data);
document.getElementById('advBlock').innerHTML = arr;
}
</script>
<script type="text/javascript" src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
The JSONP data is already a Javascript object, not a JSON string, so you don't need to parse it:
<div id="advBlock"></div>
<script>
function myFunction(data) {
document.getElementById('advBlock').innerHTML = data;
}
</script>
<script src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
<div id="advBlock"></div>
<script src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
<script> function myFunction(data) { document.getElementById('advBlock').innerHTML = data; } </script>
You have to add the script before your function call.
I'm having trouble getting values from MBean when my javascript is in an external file.
Example:
<script src='scripts/externaljs.js' type='text/javascript' />
<script>
getString();
<script>
//externaljs.js
function getString(){
var string = "#{testMBean.getName()}";
alert(string);
}
It always returns "#{testMBean.getName()}" instead of the string value.
But if I declare it inside my .xhtml file it returns the proper value.
<script>
var string = "#{testMBean.getName()}";
alert(string);
</script>
Am I doing anything wrong here?
This is because your MBean value is only substituted in your view. If you want your external JavaScript file to see those values you can store them in an array / object, or pass them as arguments.
<script>
var mBeanValues = {
string: "#{testMBean.getName()}"
}
</script>
<script src="external.js></script>
<script>
getString()
</script>
=====
// external.js
function getString() {
alert(mBeanValues.string)
}
OR
<script src="external.js"></script>
<script>
getString("#{testMBean.getName()}")
</script>
=====
// external.js
function getString(string) {
alert(string)
}
I keep getting Uncaught ReferenceError: $ is not defined error.
I assume everything is ok and working. My JQuery code is inside my Javascript file. I assume that isn't how it works? Should I have a JQuery file?
I have this inside the head of my HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
This is my Javascript file:
function typing(id, sentence){
var result = $.Deferred();
var index=0;
var intObject= setInterval(function() {
document.getElementById(id).innerHTML+=sentence[index];
index++;
if(index==sentence.length){
clearInterval(intObject);
}
}, 100);
return result.promise();
}
var sleep = function(ms) {
var result = $.Deferred();
setTimeout(result.resolve, ms);
return result.promise();
};
typing('container','Subject Name:').then(function() {
return sleep(500);
}).then(function() {
return typing('container',' Carlos Miguel Fernando')
});
Where did I go wrong?
Your question is fairly unclear, but essentially, you just have to make sure jQuery is loaded before your code. So for instance:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
or
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
// Your code
</script>
But not
<!-- Not like this -->
<script src="your-code.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Note the order of tags.
These tags do not need to be in the head, and in fact, putting them there is not best practice. They must be in head or body. Best practice barring a specific reason to do something else is to put them at the very end of body, e.g.:
<!-- site content here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
</body>
</html>