I have a simple page with a "button/link" when i press the button i need to call the github api to return all issues logged in my repository and show in table format.
But when i hit the link nothing happends..
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix">
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
</script>
</div>
</body>
</html>
Can anyone point me to where i have gone wrong with my code
your script is inside your div tag. When you change the html inside it, whole script will be removed. Try to place the script outside the div tag.
<html>
<head>
<script src="json-to-table.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
<script src="script.responsive.js"></script>
</head>
<body>
<h2>All Issues</h2>
VIEW
<div id="ghapidata" class="clearfix"></div>
<script type="text/javascript">
$(function() {
$('#ghsubmitbtn').on('click', function(e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function(json) {
if(json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
}
else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
}
}
});
You should see errors in your console. You didn't close the functions right
$(function () {
$('#ghsubmitbtn').on('click', function (e) {
e.preventDefault();
$('#ghapidata').html('<div id="loader"><img src="css/loader.gif" alt="loader..."></div>');
var ghissues = 'https://api.github.com/repos/stroes/stroestest/issues';
requestJson(ghissues, function (json) {
if (json.message == "Not Found") {
$('#ghapidata').html("<h2>No Issues found in this repository</h2>");
} else {
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
}
});
});
});
please look here again
var jsonHtmlTable = ConvertJsonToTable(ghissues, 'jsonTable', null, 'Download');
The second parameter requires id of your table you have no table with id jsonTable i think that is the problem
Related
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript">
window.onload = function() {
$.getJSON('https://api.ipify.org/?format=json', function(data) {
$('.myip').text(data.ip);
});
};
</script>
<script type="text/javascript" src="https://api.ipify.org/?format=json"></script>
<script>
$('.send').on('click', function() {
document.getElementById('welcomeDiv').style.display = "block";
$.getJSON('https://ipapi.co/' + $('.ip').val() + '/json', function(data) {
$('.city').text(data.city);
$('.country_name').text(data.country_name);
$('.country_code').text(data.country_code);
$('.region').text(data.region);
$('.region_code').text(data.region_code);
$('.postal').text(data.postal);
$('.timezone').text(data.timezone);
$('.latitude').text(data.latitude);
$('.longitude').text(data.longitude);
$('.ip').text(data.ip);
$('.org').text(data.org);
$('.asn').text(data.asn);
});
});
</script>
<input type="text" name="ip" id="ip" maxlength="15" class="ipnput ip" value="">
<button type="button" class="submit send" id="showDiv" value="Check">Check</button>
In the javascript portion, I'm using ipify to grab the visiting users IP. I'd like to attach it to the html input value on load while running the second part of the JS that makes a call to ipapi with that ipify ip. New to JS so hoping someone could steer me in the right direction, thank you.
You got it pretty much right, but errors come from the typo.
In the onload handler you are targeting $('.myip') when in the HMTL you don't have an input with such classs. Also you need to use .val jQuery method.
Also the script element with ipify.org call in src is extra, not needed.
Try this:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript">
window.onload = function() {
$.getJSON('https://api.ipify.org/?format=json', function(data) {
$('.ip').val(data.ip);
});
};
</script>
<script>
$('.send').on('click', function() {
document.getElementById('welcomeDiv').style.display = "block";
$.getJSON('https://ipapi.co/' + $('.ip').val() + '/json', function(data) {
$('.city').text(data.city);
$('.country_name').text(data.country_name);
$('.country_code').text(data.country_code);
$('.region').text(data.region);
$('.region_code').text(data.region_code);
$('.postal').text(data.postal);
$('.timezone').text(data.timezone);
$('.latitude').text(data.latitude);
$('.longitude').text(data.longitude);
$('.ip').text(data.ip);
$('.org').text(data.org);
$('.asn').text(data.asn);
});
});
</script>
I have one test.html file with two <script> tags. I need to share a variable from one to another..
Sample code:
<script type="text/javascript">
var test = false;
function testing() {
test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
The output is always:
I am inside..
failed
I also tried to use the window class but it doesn't matter.. (window.test)
What I have to do to get the 'working' alert?
Thanks if anyone can help me. I saw some similar questions, but the answers wasn't a solution for me.
EDIT:
The original code (simplified):
<head>
...
<script type="text/javascript" src="detectblocker.js"></script>
<!-- GitHub: https://github.com/sitexw/BlockAdBlock/ -->
...
</head>
<body>
<script type="text/javascript">
var blocker = false;
function adBlockDetected() {
blocker = true;
alert('inside');
}
if(typeof blockAdBlock === 'undefined') {
adBlockDetected();
} else {
blockAdBlock.onDetected(adBlockDetected);
}
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
</script>
<div class="header">
...
</div>
<div class="content_body">
<div class="requirs">
<ul>
...
<script type="text/javascript">
if (blocker == true) {
document.write("<li>enabled!</li>")
} else {
document.write("<li>disabled!</li>")
}
</script>
...
</ul>
</div>
</div>
...
</body>
The output is an alert() "inside" and the <li> "disabled".. (Blocker is enabled..).
The only difference I can see is on the end of the first <script> tag:
blockAdBlock.setOption({
checkOnLoad: true,
resetOnEnd: true
});
So why the snippet is working and my code not? Confusing...
If you do not use var before a variable it becomes a global variable like
test = true;
The variable test will be true during the page and also in your next scripts and functions.
Try this:
<script type="text/javascript">
var test = false;
function testing() {
var test = true;
alert('I am inside..');
}
testing();
</script>
...
<script type="text/javascript">
if (test == true) {
alert('working');
} else {
alert('failed');
}
</script>
There are two ways of doing it.
1) create a hidden element and set your variable from your first script to attribute of that element.
This is your hidden element
<input type="hidden" id="hiddenVar"/>
and can set it in javascript as
document.getElementById("hiddenVar").setAttribute("myAttr",test)
Now you can get it in next script as
document.getElementById("hiddenVar").getAttribute("myAttr")
2) By .data() you can read about it here
var originalContentFirst = $('#first').html();
$('#first').hover(function() {
$('#first').html('<strong>New HTML</strong>');
}, function() {
$('#first').html(originalContentFirst);
});
var originalContentSecond = $('#second').html();
$('#second').hover(function() {
$('#second').html('<strong>New HTML</strong>');
}, function() {
$('#second').html(originalContentSecond);
});
var originalContentThird = $('#third').html();
$('#third').hover(function() {
$('#third').html('<strong>New HTML</strong>');
}, function() {
$('#third').html(originalContentThird);
});
var originalContentFourth = $('#fourth').html();
$('#fourth').hover(function() {
$('#fourth').html('<strong>New HTML</strong>');
}, function() {
$('#fourth').html(originalContentFourth);
});
This was copied and adapted from elsewhere on this website. As you can see, its function is pretty basic. I have 4 divs (terrible ids, I know), and on a hover it should replace the HTML in them with the new HTML. Any idea why this is not doing anything at all? I'm sure I'm missing something rather elementary, but I can't figure out what the hell it is?
Edit: full HTML
<!DOCTYPE html>
<html>
<head>
<title>Bio</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script language="Javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<div id=first>
<span>About Me</span>
</div>
<div id=second>
<span>Past Jobs</span>
</div>
<div id=third>
<span>Projects</span>
</div>
<div id=fourth>
<span>About</span>
</div>
</body>
</html>
As Jaromanda X said - you're loading the script ABOVE the html, therefore it has nothing to attach to.
$(function() { // this waits until all html loaded
var originalContentFirst = $('#first').html();
$('#first').hover(function() {
$('#first').html('<strong>New HTML</strong>');
}, function() {
$('#first').html(originalContentFirst);
});
var originalContentSecond = $('#second').html();
$('#second').hover(function() {
$('#second').html('<strong>New HTML</strong>');
}, function() {
$('#second').html(originalContentSecond);
});
var originalContentThird = $('#third').html();
$('#third').hover(function() {
$('#third').html('<strong>New HTML</strong>');
}, function() {
$('#third').html(originalContentThird);
});
var originalContentFourth = $('#fourth').html();
$('#fourth').hover(function() {
$('#fourth').html('<strong>New HTML</strong>');
}, function() {
$('#fourth').html(originalContentFourth);
});
}); // this closes it
I'm trying to source a function that takes in an array "XY". JS throws an error saying that I can't index the variable. But this seems crazy since it's just loading a function - of course the array isn't defined yet! What am I missing?
function reformat(XY) {
"use strict";
var exper = [];
exper.X = [];
exper.Y = [];
for(var i=0;i<XY.length;i++){ // here, throws error "Uncaught TypeError: Cannot read property 'length' of undefined "
exper.X[i] = XY[i][0];
exper.Y[i] = XY[i][1];
}
}; // END reformat
Function is used as a callback after data is loaded:
<script type="text/javascript">
loadXY("XY.csv", reformat);
</script>
function loadXY(fname,callback){
d3.csv(fname, function(data) {
var XY = data.map(function(d) { return [ Number(d["X"]), Number(d["Y"])]; });
});
callback(XY);
}
EDIT: adding html context in case that helps:
<!doctype html>
<html>
<head>
<title>Experiment</title>
<meta charset="utf-8">
<script src="easeljs-min.js" type="text/javascript"> </script>
<script src="numeric-min.js" type="text/javascript"> </script>
<script src="jquery-min.js" type="text/javascript"> </script>
<script src="jquery.csv-0.71.min.js" type="text/javascript"> </script>
<script src="d3.min.js" type="text/javascript"> </script>
<script src="reformat.js" type="text/javascript"> </script>
<script src="loadXY.js" type="text/javascript"> </script>
<link rel=stylesheet href="task.css" type="text/css" media="screen">
</head>
<body>
<script type="text/javascript">
loadXY("XY.csv", reformat);
</script>
<canvas id="easel" width="640" height="480"> Stop Using IE! </canvas>
</body>
You are initializing XY inside of the previous loop. you need to move callback(XY); into the function above it like so:
function loadXY(fname,callback){
d3.csv(fname, function(data) {
var XY = data.map(function(d) { return [ Number(d["X"]), Number(d["Y"])]; });
callback(XY);
});
}
Please check out this jsfiddle:
http://jsfiddle.net/xNEZH/2/
It works fine in my jsfiddle
[BOX APPEARS WHEN TEXT IS INPUTTED IN INPUT]
but doesn't work on my browsers BUT I am using the latest versions of safari, firefox and chrome.
What is the matter?
HTML / JAVASCRIPT CODE:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script>
$(document).ready(function () {
(function watchInputForChanges(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
setTimeout(watchInputForChanges, 100);
})();
});
</script>
<link href="cloud.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center1">
<form>
<input type="text" class="input1" autofocus="focus" />
</form>
</div>
<br><br>
<div class="center1">
<div class="box">f</div>
</div>
</body>
</html>
I believe that you need to add this:
$(document).ready(function () {
//function name does not exist outside this scope
(function watchInputForChanges(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
setTimeout(watchInputForChanges, 100);
})();
});
Drav Sloan pointed out that you are missing the jQuery include as well
Apologies for not answering the direct question (simply "why doesn't this work outside of fiddle?") but I can't resist: not sure why you're polling for changes; you can bind a listener to the element. For example (in the document ready function...)
In the HTML itself:
<script src="/scripts/jquery.js"></script> <!--or wherever your script source is!!-->
Then if you're putting your scripts into tags on the same page (instead of external):
<script>
$(document).ready(function () {
(function() {
$input = $('.input1');
$box = $('.box');
$input.on('keypress input paste', function() {
if ($box.not(':visible') && $input.val() != "") {
$box.show();
} else {
$box.hide();
}
});
})();
});
</script>
Catches manual entry or pasted entry.
http://jsfiddle.net/xNEZH/12/