All I want to do is use 5 text-boxes, a calender and a button to create an event on a date-picker calender.
Here is the format
I have read all about the .setDate() and .getDate() but I cannot get them to work. I have no experience with plugins only simple html and javascript. What is the datepicker object called and why does everyones code no have a name for their functions?
Anyone with experience with this plugin should be able to do this is in 5 seconds
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery & jQueryUI Base - jsFiddle demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<style type='text/css'>
table.ui-datepicker-calendar tbody td.highlight > a {
background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
color: #363636;
border: 1px solid #FFDE2E;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;
var events = [
{ Title: "Equipment: " + equip + "\nSize: " + size + dated +
"\nRequired on Surface: " + surface + "\nWork Order Number: " + orderNumber + "\nResponsible: " + responsible, Date: new Date("05/13/2013") },
{ Title: "Dinner", Date: new Date("02/25/2011") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
$("div").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});
});//]]>
var dated = $( "div.selector" ).datepicker( "getDate" );
function alerter(form) {alert (form.size.value)}
function dog () {div.setDate("+2d");}
function submit(form){
var equip1 = form.equipment.value;
var size1 = form.size.value;
var surface1 = form.surface.value;
var orderNumber1 = form.orderNumber.value;
var responsible1 = form.responsible.value;
var inputDate1 = form.inputDate.value
var events = [
{ Title: "Equipment: " + equip1 + "\nSize: " + size1 +
"\nRequired on Surface: " + surface1 + "\nWork Order Number: " + orderNumber1 + "\nResponsible: " + responsible1, Date: new Date(inputDate1) },
{ Title: "Dinner", Date: new Date("05/25/2013") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
}
</script>
</head>
<body>
<FORM>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='checkbox' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
<div id="datepicker"></div>
<button type="button" onclick="alerter(this.form)">Add Lowering Event</button><br>
</FORM>
</body>
</html>
Edited code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery & jQueryUI Base - jsFiddle demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<style type='text/css'>
table.ui-datepicker-calendar tbody td.highlight > a {
background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
color: #363636;
border: 1px solid #FFDE2E;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;
var date = document.getElementById('dateds').value
var events = [
{ Title: "Equipment: " + equip + "\nSize: " + size + date +
"\nRequired on Surface: " + surface + "\nWork Order Number: " + orderNumber + "\nResponsible: " + responsible, Date: new Date(date) },
{ Title: "Dinner", Date: new Date("02/25/2011") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});
});//]]>
var dated = $("#datepicker").datepicker( "getDate" );
function alerter() {alert (dated)}
function dog () {div.setDate("+2d");}
function submit(form){
var equip1 = form.equipment.value;
var size1 = form.size.value;
var surface1 = form.surface.value;
var orderNumber1 = form.orderNumber.value;
var responsible1 = form.responsible.value;
var inputDate1 = form.inputDate.value
var events = [
{ Title: "Equipment: " + equip1 + "\nSize: " + size1 +
"\nRequired on Surface: " + surface1 + "\nWork Order Number: " + orderNumber1 + "\nResponsible: " + responsible1, Date: new Date(inputDate1) },
{ Title: "Dinner", Date: new Date("05/25/2013") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
}
</script>
</head>
<body>
<FORM>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='checkbox' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
Date: <input type="text" id="dateds" /></p>
<div id="datepicker"></div>
<button type="button" onclick="alerter()">Add Lowering Event</button><br>
</FORM>
</body>
</html>
$("div").datepicker and $("div.selector").datepicker should both be $("#datepicker").datepicker. The first would attach a datepicker to every DIV on your page, the second doesn't work because you don't have a DIV with class selector.
Normally a datepicker is attached to an <input> element in the form, so when you submit the form the selected date will be submitted. Since you're putting it in a DIV, you could add an <input type="hidden"> element to the form:
<input type="hidden" name="date" id="date">
and add the following option to the datepicker:
altField: "date",
Using named versus anonymous functions is mainly a stylistic choice. If a short function is only used in one place, such as the onSelect option or an AJAX callback, it's common to put it inline as an anonymous function.
Related
so I have written some code that will allow someone to enter their order date and will return expected printing and delivery dates.
Only issue is its splitting out MM/DD/YYYY. Any help to get this working is much appreciated.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<script>
function myfunction() {
var future = new Date(document.getElementById("datepicker").value); // get today date
future.setDate(future.getDate() + 7); // add 7 days
var finalDate = future.getFullYear() + '-' + ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) + '-' + future.getDate();
var future2 = new Date(document.getElementById("datepicker").value);
future2.setDate(future2.getDate() + 10); // add 7 days
var finalDate2 = future.getFullYear() + '-' + ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) + '-' + future2.getDate();
alert('Your order will be printed on ' + finalDate + '\nYou should recieve your order ' + finalDate2);
}
</script>
</head>
<body>
<form onSubmit="myfunction()">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" lable="Submit">
<p id="demo"></p>
</form>
</body>
</html>
I'm edited in date format on your code: var finalDate and var finalDate2. Because in the code make a format date in your jquery.
In code below will changed format date to DD/MM/YYYY
So I changed to this code:
var finalDate = future.getDate() +'-'+ ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) +'-'+future.getFullYear();
var finalDate2 = future2.getDate() +'-'+ ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) +'-'+ future.getFullYear();
Then will get output like this
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy'
});
});
</script>
<script>
function myfunction(){
var future = new Date(document.getElementById("datepicker").value); // get today date
future.setDate(future.getDate() + 7); // add 7 days
var finalDate = future.getDate() +'-'+ ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) +'-'+future.getFullYear();
var future2 = new Date(document.getElementById("datepicker").value);
future2.setDate(future2.getDate() + 10); // add 7 days
var finalDate2 = future2.getDate() +'-'+ ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) +'-'+ future.getFullYear();
alert('Your order will be printed on ' + finalDate + '\nYou should recieve your order ' + finalDate2);
}
</script>
</head>
<body>
<form onSubmit="myfunction()">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" lable="Submit">
<p id="demo"></p>
</form>
</body>
</html>
UPDATE
For Changed Input Format to DD/MM/YYYY
Changed
$( "#datepicker" ).datepicker();
To
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy'
});
I try to use bootstrap 3 tooltip in my website, and use html to show the content of tooltip, but I get an error: Cannot read property 'user' of undefined.
<div class="container">
Hover over me
Hover over me
Hover over me
Hover over me
Hover over me
</div>
$(document).ready(function() {
var data = [{'user': "Amy"}, {'user': "Betty"}, {'user': "Cindy"}, {'user': "Debby"}, {'user': "Emily"}];
setTooltip(data);
})
function setTooltip(data) {
for (var i = 0; i < data.length; i++) {
$('[data-idx="' + i + '"]').tooltip({
html: true,
title: function() {
return "<p>User: " + data[i].user + "</p>";
}
});
}
}
This is the result in the console:
Does anybody have this problem? Thank you.
You will have to update your setTooltip function:
function setTooltip(data) {
for (var i = 0; i < data.length; i++) {
const name = data[i].user;
$('[data-idx="' + i + '"]').tooltip({
html: true,
title: "<p>User: " + name + "</p>"
});
}
}
Working fiddle:
https://jsfiddle.net/yqdhkcvz/10/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Tooltip Test</title>
</head>
<body>
<div class="container">
Hover over me
Hover over me
Hover over me
Hover over me
Hover over me
</div>
</body>
</html>
$(document).ready(function() {
var data = [{'user': "Amy"}, {'user': "Betty"}, {'user': "Cindy"}, {'user': "Debby"}, {'user': "Emily"}];
setTooltip(data);
})
function setTooltip(data) {
for (var i = 0; i < data.length; i++) {
$('[data-idx="' + i + '"]').tooltip({
title: "User: " + data[i].user
});
}
}
Please try the above solution it is working fine.
The issue I found in your code that you were using a function() to set the tooltip and the data[i] was undefined within that scope.
Tested link: https://jsbin.com/viyipewale/edit?html,js
Please try this following:
function setTooltip(data) {
for (var i = 0; i < data.length; i++) {
if($('[data-idx="' + i + '"]').length > 0){//Checking the element exists or not
$('[data-idx="' + i + '"]').tooltip({
title: "User: " + data[i].user
});
}
}
}
It's working fine.
Hello what I am not understanding why when the user inputs the date it it doesn't update the URL. I am taking the NASA API for the APOD and trying to make it interactive, the issue here is that when I manually change the URL the api data loads that data, but I lost on why my user input data is not working for it.
// Go to https://api.nasa.gov/index.html#apply-for-an-api-key to get an API Key
var apodContain = document.getElementById('apod');
var API_KEY = 'XEXvzGBBdF14FSu6UZyzoPYqazSsUkSwAsI8730G';
var datePick = document.getElementById('date');
datePick.max = todaysDate();
datePick.value = todaysDate();
var date = datePick.value;
var url = 'https://api.nasa.gov/planetary/apod?api_key=' + API_KEY + '&date=' + date;
function makeApiRequest(url) {
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function () {
if (myRequest.readyState === XMLHttpRequest.DONE) {
if (myRequest.status === 200) {
var responseText = myRequest.responseText;
myRequest.onload = function () {
var responseJson = JSON.parse(responseText);
console.log(responseJson);
renderHTML(responseJson);
}
} else {
var errorMessage = document.getElementById('error');
errorMessage.innerHTML = "This date this not work";
}
}
}
// intializes AJAX
myRequest.open('GET', url, true);
myRequest.send();
};
makeApiRequest(url);
datePick.addEventListener('change', function(e){
date = datePick.value;
url = 'https://api.nasa.gov/planetary/apod?api_key=' + API_KEY + '&date=' + date;
})
function todaysDate() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
return year + '-' + month + '-' + day;
datePicker.setAttribute("max", datePicker.value);
}
function renderHTML(data) {
var htmlString = "";
htmlString = "<img src = " + data.url + "></img>" + "<h1>" + data.title + "</h1>" + "<p>" + data.explanation + "</p>";
apodContain.insertAdjacentHTML('beforeend', htmlString);
}
h1{
text-align: center;
font: bold;
}
h5 {
text-align: center;
font: bold;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 500px;
height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>INFO 343 APOD</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>INFO 343 APOD</h1>
<div id="apod"></div>
<h5>Choose your date: <input id="date" type="date"></input></h5>
<div id="error"></div>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
.
You forgot to add
datePick.addEventListener('change', function(e){
date = datePick.value;
url = 'https://api.nasa.gov/planetary/apod?api_key=' + API_KEY + '&date=' + date;
makeApiRequest(url); // <- this
})
I have an input element that is a range slider that I wanted to turn into a slider with a lower and an upper bound. This feature isn't implemented yet for range although it's being discussed. As you can see this is a popular question.
My issue is that the way I was retrieving the results of the slider no longer seems to work and I don't understand why. My original slider works like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<label for="slider">
<input id="slider" type="range" value="0" oninput="sliderAmount.value = slider.value" min="0" max="100" step="1" />
stuff: <output name="sliderAmount" for="slider">0</output>
</label>
</form>
<div id="stuff"></div>
<script>
amt = document.getElementById("slider");
var amtChange = function () {
document.getElementById('stuff').innerHTML+='<div>'+amt.value+'</div>';
};
amt.onchange = amtChange;
</script>
</body>
</html>
Every time you slide the bar it updates the stuff div with the new result. I want to be able do the same thing with the jquery slider but update the stuff div with the range instead.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<form>
<label for="amount">Price range:</label>
<input id="amount" type="text" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>
</form>
<div id="stuff"></div>
<script>
amt = document.getElementById("amount");
var amtChange = function () {
document.getElementById('stuff').innerHTML += '<div>' + amt.value + '</div>';
};
amt.onchange = amtChange;
</script>
</body>
</html>
However, this doesn't seem to be able to pull the range from the slider input. If I go into the console in Chrome for the jquery example I can type amt.value and it will return the value every time. What am I missing here?
Just trigger the change() method for input while changing it's value.
Try this:
DEMO: FIDDLE
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]).change();
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1)).change();
});
You can use the change event of jQuery UI Range Slider. Use it and append updated changes to stuff like below.
$(function () {
var changes = '';
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
},
change: function (event, ui) {
changes += '<div>' + ui.values[0] + " - " + ui.values[1] + '</div>';
$("#stuff").html(changes);
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
});
Can someone help explain why the following code works in Chrome and IE, but not Safari. I believe the issue is somewhere with the getJSON. It is returning the JSON and works in other browsers, again just not safari. Thanks
Link to actual page: Link to actual page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Lenward Cunningham" />
<meta name="keywords" content="Louisiana Post Game Scores" />
<meta name="description" content="Post Game" />
<meta name="robots" content="all" />
<meta name="copyright" content="Lenward Cunningham" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Louisiana Post Game</title>
<link rel="apple-touch-icon" href="img/acadianaPGicon.png">
<link rel="stylesheet" type="text/css" href="assets/_styles.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id='header'><img src="img/acadianaPG200.jpg"></div>
<div id='content'></div>
<script type="text/javascript">
$(function() {
var url = "https://script.google.com/macros/s/AKfycbwFp0U_pYseCIXVUVfK_wOMoTgno76sk-JXDMGmPResdseOX3Xj/exec";
/*Populate list from JSON */
$.getJSON(url)
.done(function(data) {
for (var d in data) {
/*Process JSON Parameters*/
var game = data[d];
console.log(game)
if (game.matchup) {
var matchUp = game.matchup.split('\n');
var matchUp1 = matchUp[0];
var matchUp2 = matchUp[1];
}
var score1 = '';
var score2 = '';
if (game.score) {
var score = game.score.split('\n');
score1 = score[0];
score2 = score[1];
}
var gameStatus = game.gameStatus;
/*if (game.matchup === null || game.matchup === '')
continue;*/
$('#content').append(
"<div class='game'>"+
"<div class='team'><span class='rank'></span>"+matchUp1+"<span class='score'>"+score1+"</span></div>"+
"<div class='team'><span class='rank'></span>"+matchUp2+"<span class='score'>"+score2+"</span></div>"+
"<div class='status'>"+gameStatus+"</div>"+
"</div>"
);
}
})
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51502655-1', 'googledrive.com');
ga('send', 'pageview');
</script>
</body>
</html>
Use this json format
$.getJSON(
"https://script.google.com/macros/s/AKfycbwFp0U_pYseCIXVUVfK_wOMoTgno76sk-JXDMGmPResdseOX3Xj/exec",
function (data) {
for (var d in data) {
/*Process JSON Parameters*/
var game = data[d];
console.log(game)
if (game.matchup) {
var matchUp = game.matchup.split('\n');
var matchUp1 = matchUp[0];
var matchUp2 = matchUp[1];
}
var score1 = '';
var score2 = '';
if (game.score) {
var score = game.score.split('\n');
score1 = score[0];
score2 = score[1];
}
var gameStatus = game.gameStatus;
/*if (game.matchup === null || game.matchup === '')
continue;*/
alert();
$('#content').append(
"<div class='game'>" +
"<div class='team'><span class='rank'></span>" + matchUp1 + "<span class='score'>" + score1 + "</span></div>" +
"<div class='team'><span class='rank'></span>" + matchUp2 + "<span class='score'>" + score2 + "</span></div>" +
"<div class='status'>" + gameStatus + "</div>" +
"</div>"
);
}
}
);