Adding Elements to Weebly via Javascript Not Working
Question
I have some Javascript code that reads a published Google Sheet and reads it to the webpage. For some reason upon embedding this int Weebly, it just doesn't want to take it. No elements are created at all as far as i can tell. Here is my code, any help is awesome.
<!DOCTYPE html><!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var spData = null;
function doData(json) {
spData = json.feed.entry;
}
function readData(parent) {
var data = spData;
var ScoreObjs = [];
var ScoreObj = new Object();
for(var r=4; r < data.length; r++) {
var cell = data[r]["gs$cell"];
var val = cell["$t"];
console.log(val);
if (cell.col == 1) {
ScoreObj.team1 = val;
}
else if (cell.col == 2) {
ScoreObj.team2 = val;
}
else if (cell.col == 3) {
ScoreObj.score1 = val;
}
else if (cell.col == 4) {
ScoreObj.score2 = val;
ScoreObjs.push(ScoreObj);
ScoreObj = new Object();
}
}
toFormat(ScoreObjs);
}
function toFormat(obj) {
for (var x = 0; x < obj.length; x++)
{
var data = obj[x];
var team1 = data.team1;
var team2 = data.team2;
var score1 = data.score1.toString();
var score2 = data.score2.toString();
var child1 = document.createElement("div");
child1.className = "paragraph";
document.body.appendChild(child1);
var child2 = document.createElement("strong");
child1.appendChild(child2);
var child3 = document.createElement("font");
child3.color = "#FFFFFF";
child3.innerHTML = team1 + " vs " + team2 + "<br />ESEA Scrim";
child2.appendChild(child3);
var child4 = document.createElement("font");
child4.color = "#00FF00";
child4.innerHTML = score1 + ":" + score2;
child1.appendChild(child4);
}
}
$(document).ready(function(){
readData($("#data"));
});
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1BSsomIQwFhifrFB8ybQ6xF0t-KdJNKtCBHotY3X8O98/1/public/values?alt=json-in-script&callback=doData"></script>
</head>
</html>
2 answers
solution1
1 ACCPTED 2017-03-07 02:59:03
Change:
<script
src="https://spreadsheets.google.com/feeds/cells/1BSsomIQwFhifrFB8ybQ6xF0t-KdJNKtCBHotY3X8O98/1/public/values?alt=json-in-script&callback=doData"></script>
To:
<script id="data"
src="https://spreadsheets.google.com/feeds/cells/1BSsomIQwFhifrFB8ybQ6xF0t-KdJNKtCBHotY3X8O98/1/public/values?alt=json-in-script&callback=doData"></script>
solution2
0 2017-03-23 20:07:05
This could be because the javascript code runs first and renders some problems. I had the same problem.
Include script tags in the footer and not in the head section. In fact you will find default Weebly script tags below the footer. Add your custom javascript code along with that.
OR (MORE PREFERABLE) Create a javascript(.js) file externally upload it to Assets in weebly theme editor and then add it to your HTML header file along with other default weebly script tags.
eg. a javascript file named editsite.js will be added like this (after uploading to assets):
<script type="text/javascript" src="/files/theme/editsite.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.