datepicker simple event creation - javascript

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

Edit date format from MM/DD/YYYY to DD/MM/YYY

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'
});

bootstrap 3 tooltip using html not working

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.

Changing Date should change data

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
})

Getting values from html inputs

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));
});

getJSON not working in Safari

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>"
);
}
}
);

Categories

Resources