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>"
);
}
}
);
Related
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'm using javascript DataTables to display a csv file on a webpage. Below is my
javascript file:
var CsvToHtmlTable = CsvToHtmlTable || {};
CsvToHtmlTable = {
init: function (options) {
options = options || {};
var csv_path = options.csv_path || "";
var el = options.element || "table-container";
var allow_download = options.allow_download || false;
var csv_options = options.csv_options || {};
var datatables_options = options.datatables_options || {};
var custom_formatting = options.custom_formatting || [];
$("#" + el).html("<table class='table table-striped table-condensed' id='" + el + "-table'></table>");
$.when($.get(csv_path)).then(
function(data){
var csv_data = $.csv.toArrays(data, csv_options);
var table_head = "<thead><tr>";
for (head_id = 0; head_id < csv_data[0].length; head_id++) {
table_head += "<th>" + csv_data[0][head_id] + "</th>";
}
table_head += "</tr></thead>";
$('#' + el + '-table').append(table_head);
$('#' + el + '-table').append("<tbody></tbody>");
for (row_id = 1; row_id < csv_data.length; row_id++) {
var row_html = "<tr>";
var color = "red";
//takes in an array of column index and function pairs
if (custom_formatting != []) {
$.each(custom_formatting, function(i, v){
var col_idx = v[0]
var func = v[1];
csv_data[row_id][col_idx]= func(csv_data[row_id][col_idx]);
})
}
for (col_id = 0; col_id < csv_data[row_id].length; col_id++) {
if (col_id === 2) {
row_html += "<td>" + parseFloat(csv_data[row_id][col_id]) + "</td>";
}
else {
row_html += "<td>" + csv_data[row_id][col_id] + "</td>";
}
if (parseFloat(csv_data[row_id][2]) <= 1 && parseFloat(csv_data[row_id][2]) > 0.7) {
color = "red";
}
else if (parseFloat(csv_data[row_id][2]) <= 0.7 && parseFloat(csv_data[row_id][2]) >= 0.5) {
color = "orange";
}
else {
color = "yellow";
}
}
row_html += "</tr>";
$('#' + el + '-table tbody').append(row_html).css("background-color", color));
}
$('#' + el + '-table').DataTable(datatables_options);
if (allow_download)
$("#" + el).append("<p><a class='btn btn-info' href='" + csv_path + "'><i class='glyphicon glyphicon-download'></i> Download as CSV</a></p>");
});
}
}
And below is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSV to HTML Table</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dataTables.bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h2>CSV to HTML Table</h2>
<div id='table-container'></div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.csv.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/csv_to_html_table.js"></script>
<script type="text/javascript">
function format_link(link){
if (link)
return "<a href='" + link + "' target='_blank'>" + link + "</a>";
else
return "";
}
CsvToHtmlTable.init({
csv_path: 'data/fatty_acid_profiles.csv',
element: 'table-container',
allow_download: true,
csv_options: {separator: ','},
datatables_options: {"paging": false},
custom_formatting: [[4, format_link]]
});
</script>
</body>
</html>
My webpage currently looks like this:
I want to know is it possible in DataTables that for 2nd & 3rd columns, I get a Filter along with the column name so that we can select for which specific values we want to view data for, something like what we have in Excel (using Sort & Filter)?? Please help!!
Yes, it is possible with a customized solution.
You need to read all columns and add distinct members to dropdowns like this.
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
});
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
});
});
}
});
});
By using column().search() functionality, you will have a column based filter with dropdowns. You can move dropdowns from header to footer by changing .appendTo($(column.header()).empty()) to .appendTo($(column.footer()).empty()).
Examples:
jsFiddle (header dropdowns)
jsFiddle (footer dropdowns)
I have this weather page that every time I click the button it changes from Celcius to Fahrenheit or vice-versa.
What is happening is that once I click the first time, it works fine, but then if I click it again or more times, my console log shows that it executes it twice and does not render the element anymore (#link).
$("#data").on('click', '#link', function () {
var html2 = "";
html2 += '<button class="temp" id="link">'
if (flag == 0){
console.log("c to f");
html2 += "<h1>" + celciusToFahrenheit(Math.round(json.main.temp)) + " °F</h1>";
flag = 1;
} else if (flag == 1){
console.log("f to c");
html2 += "<h1>" + Math.round(json.main.temp) + " °C</h1>";
flag = 0;
}
html2 += "</button>"
$("#link").html(html2);
});
I am including the entire file bellow:
$(document).ready(function() {
function getCurrentLocation(callback) {
if (!navigator.geolocation) return;
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
url = ('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=metric&appid=b464bb8dd84e7e7d36103593a472ae9a');
callback(url);
});
}
function celciusToFahrenheit(celcius) {
var fahrenheit = celcius * (9 / 5) + 32;
return fahrenheit;
}
getCurrentLocation(function(currLocMap) {
$.getJSON(url, function(json) {
var html = "";
var flag = 0;
html += '<button class="temp" id="link">'
html += "<h1>" + Math.round(json.main.temp) + " °C </h1>";
html += "</button>"
html += "<h1>" + json.name + "</h1>";
html += "<h3>" + json.weather[0].main + "</h3>";
html += "<h3>" + json.weather[0].description + "</h3>";
$("#data").on('click', '#link', function () {
var html2 = "";
html2 += '<button class="temp" id="link">'
if (flag == 0){
console.log("c to f");
html2 += "<h1>" + celciusToFahrenheit(Math.round(json.main.temp)) + " °F</h1>";
flag = 1;
console.log(flag);
} else if (flag == 1){
console.log("f to c");
html2 += "<h1>" + Math.round(json.main.temp) + " °C</h1>";
flag = 0;
console.log(flag);
}
html2 += "</button>"
$("#link").html(html2);
});
console.log(json);
console.log(json.name);
console.log(json.main.temp);
console.log(json.weather[0].main);
console.log(json.weather[0].description);
console.log(json.weather[0].icon);
$("#data").html(html);
});
});
});
button#link { background:none;border:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->
</head>
<body>
<div id="data">
<h4>You are here:</h4>
</div>
</body>
</html>
That's because you're recreating the button inside the click event handler. You should change the content of the h1 tag in your handler instead of recreating the entire button, something like so:
$("h1",$(this)).html("new content");
Below demo app is showing three different progressbars.
Now user needs to select which progressbar he/she wants to change value
and then on button click which is provided at same page.
var app = angular.module('myApp',[]);
app.component('listComponent', {
template:'<div ng-repeat="progress in $ctrl.obj.bars track by $index">' +
'<progress value="{{progress}}" max="{{$ctrl.obj.limit}}">{{progress}}</progress><br>'+
'</div>'+
'<br>' +
'<div>' +
'Selected Progressbar : {{$ctrl.selectedProgressbar}}' +
'<span>' +
'<select name="selectedProgressbar" ng-model="$ctrl.selectedProgressbar">' +
'<option ng-repeat="progress in $ctrl.obj.bars track by $index" value="{{$index}}">{{progress}}</option>' +
'</select>' +
'</span>' +
'<span ng-repeat="btn in $ctrl.obj.buttons">' +
'<button class="btn" ng-click="$ctrl.changeProgress(btn, $ctrl.selectedProgressbar)">{{btn}}</button>' +
'</span>' +
'</div>',
controller: function () {
this.obj = {
"buttons": [
10,
38,
-13,
-18
],
"bars": [
62,
45,
62
],
"limit": 230
};
function changeProgressbar(val){
var val = parseInt(val);
var barValue = this.obj.bars[this.selectedProgressbar];
var selectedBar = this.selectedProgressbar;
var bars = this.obj.bars;
// this.obj.bars[0] = parseInt(this.obj.bars[0]) + parseInt(val);
// if we remove comment from above code and comment below one then progresbar value changes at same time
// but with below code its not changing at same time its changing when we click on any button or change progreebar selection
if(val > 0){
var total = parseInt(barValue) + val;
var update = setInterval(function() {
if (parseInt(barValue) > total) {
clearInterval(update);
}
barValue = parseInt(barValue) + 1;
bars[selectedBar] = barValue;
}, 15);
}
}
this.changeProgress = changeProgressbar;
}
});
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="This is just demo application by using Angular 1.6">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Progressbar in Angular 1.6</title>
<style type="text/css" media="screen">
progress:after {
display: block;
content: attr(value);
text-align:center;
}
</style>
</head>
<body ng-app="myApp">
<list-component></list-component>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script>
</script>
</body>
</html>
jsBin is here,
now after selecting any progressbar then click on any first two buttons then no change is found on progreebar
but as soon as you click again or select some other progressbar then value is changing.
After going through your code, I found some issues there.
You should change the changeProgressbar function and remove the interval function.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Progressbar in Angular 1.6</title>
<style type="text/css" media="screen">
progress:after {
display: block;
content: attr(value);
text-align:center;
}
</style>
</head>
<body ng-app="myApp">
<list-component></list-component>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.component('listComponent', {
// isolated scope binding
template:'{{$ctrl.obj.bars}}<div ng-repeat="progress in $ctrl.obj.bars track by $index">' +
'<progress value="{{progress}}" max="{{$ctrl.obj.limit}}">{{progress}}</progress><br>'+
'</div>'+
'<br>' +
'<div>' +
'Selected Progressbar : {{$ctrl.selectedProgressbar}}' +
'<span>' +
'<select name="selectedProgressbar" ng-model="$ctrl.selectedProgressbar">' +
'<option ng-repeat="progress in $ctrl.obj.bars track by $index" value="{{$index}}">{{progress}}</option>' +
'</select>' +
'</span>' +
'<span ng-repeat="btn in $ctrl.obj.buttons">' +
'<button class="btn" ng-click="$ctrl.changeProgress(btn, $ctrl.selectedProgressbar)">{{btn}}</button>' +
'</span>' +
'</div>',
controller: function () {
this.obj = {
"buttons": [
10,
38,
-13,
-18
],
"bars": [
62,
45,
62
],
"limit": 230
};
function changeProgressbar(val){
var val = parseInt(val);
var barValue = this.obj.bars[this.selectedProgressbar];
var selectedBar = this.selectedProgressbar;
var bars = this.obj.bars;
// this.obj.bars[0] = parseInt(this.obj.bars[0]) + parseInt(val);
// if we remove comment from above code and comment below one then progresbar value changes at same time
// but with below code its not changing at same time its changing when we click on any button or change progreebar selection
if(val > 0){
var total = parseInt(barValue) + val;
if (parseInt(barValue) > total) {
clearInterval(update);
}
else
{
barValue = total;
bars[selectedBar] = barValue;
}
}
}
this.changeProgress = changeProgressbar;
}
});
</script>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
I'm very new to both JQuery and Javascript. I have an feed, I would like to display these feed inside a collapsible div AS a collapsible div. I have the following Javascript file:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(showFeed);
function showFeed() {
var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
di.innerHTML = '<h3>' + entry.title + '</h3>';
di.innerHTML += '<p>' + entry.contentSnippet + '</p>';
container.appendChild(di);
}
} else {
var container = document.getElementById("headlines");
container.innerHTML = '<li>Get your geek news fix at site</li>';
}
});
}
</script>
<body>
<div data-role="collapsible-set" id="headlines"></div>
</body>
This should fetch all my feed names and put them in a collapsible div, it does exactly that but it shows the names as plain HTML text instead of a JQuery Mobile collapsible div.
#AML, that is more a comment than an answer because a don't analyse your entire code, but I will put here for formatting purposes.
In the line:
var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
You don't take a pointer(di) to the new created element, you take a result of the setAttributeNode(...), You need to split the code in two lines like that:
var di = document.createElement("div");
di.setAttribute("data-role", "collapsible");
There are a problem with setAttributeNode actually is setAttribute.
Now is working, see at http://pannonicaquartet.com/test/feeds.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.collapsible{
display : none;
}
h3{
background-color : lightgray;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function showFeed() {
var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.onclick = function(evt){
var elP = this.children[1];
if(elP.style.display == 'inline'){
elP.style.display = 'none';
}else{
elP.style.display = 'inline';
}
};
div.innerHTML = '<h3>' + entry.title + '</h3>';
div.innerHTML += '<p class="collapsible">' + entry.contentSnippet + '</p>';
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(showFeed);
</script>