I am learning about JSON and I am having trouble displaying data from an endpoint. This first segment of code works just fine for me.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="mypanel"></div>
<script>
$.getJSON('http://time.jsontest.com', function(data) {
var text = `Date: ${data.date}<br>
Time: ${data.time}<br>
Unix time: ${data.milliseconds_since_epoch}`
$(".mypanel").html(text);
});
</script>
</body>
</html>
Changing the script to this endpoint does not display any data. How can I show this data?
<script>
$.getJSON('https://www.halowaypoint.com/en-us/games/halo-the-master-chief-collection/xbox-one/game-history?gamertags=ice%20cold%20bepsi&gameVariant=all&view=DataOnly', function(data) {
var text = `Gamertag: ${data[0].Gamertag}`
$(".mypanel").html(text);
});
</script>
Looking into it, it seems like you need to authenticate to get this data. If no json is returned, then the callback will not run. That's why if you put anything in the callback, even console.log("HERE"), it will not reach it.
If you want to authenticate, you will need to do an ajax request. $.getJSON is just a wrapper around $.ajax anyway.
Related
Okay, I should preface this by saying I'm pretty new to JS and HTML.
I am attempting to write a simple page that will take the value a user types into the form and use it to make a call to the Spotify api via my findArtist() function. I've set the project up with npm and have the proper dependencies in the node-modules directory and all of that stuff.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<header>
<h1>My Header</h1>
</header>
<section>
<form>
Search for an artist! <br/>
<input type="text" name="searchrequest" value="" onchange="findArtist()">
</form>
</section>
<script>
function findArtist () {
var artistName = document.getElementsByName("searchrequest")[0].value;
spotifyApi.searchArtists(artistName)
.then(function(data) {
console.log(data.body);
}, function(err) {
console.error(err);
});
}
</script>
</body>
</html>
When I type something in the search bar, I expect to see the call occur in my browsers console, where the JSON should be logged thanks to findArtist(), but nothing happens. Is this because I am attempting to use node when I should be using plain JS? Do I have to setup a server to make the call? I'm rather confused as to what my actual problem is.
I would like to add that I realize using onchange to call my function is going to put me over my api limit, so a suggestion on a better way to call the function would be appreciated as well.
Thanks for the help.
onchange detects changes only after you lose focus or blur from the textbox.
As this answer says oninput might just be the right method to look upto.
Fairly new to REST and web application and would like to create a front-end site with a button and a place where a result is displayed.
I have REST API structured like this:
http://hostserver.com/MEApp/MEService
This returns a value when browsing to it.
Now I would like to implement a GUI so that when you browse to c:\resourcebutton.html
There will be a button and when I click on it, it will call the REST API resource and returns the result. If I understood REST correctly it should work like this.
I have a html code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
How and where should I insert the GET method to call the API? Is it common to use Javascript?
Yes, you have to do this with JavaScript. In fact, you need Ajax.
To simplify things, you should download and include JQuery to your site, and then use something like this:
$.post( "http://hostserver.com/MEApp/MEService", function( data ) {
document.getElementById("demo").innerHTML = data;
//Or, in the JQuery-way:
$('#demo').html(data);
});
The jQuery Source can be found here: http://code.jquery.com/jquery-2.1.1.js
Your html-file would then look like this:
<!DOCTYPE html>
<html>
<head>
<script src="the/Path/To/The/Downloaded/JQuery.js"></script>
<script>
//Usually, you put script-tags into the head
function myFunction() {
//This performs a POST-Request.
//Use "$.get();" in order to perform a GET-Request (you have to take a look in the rest-API-documentation, if you're unsure what you need)
//The Browser downloads the webpage from the given url, and returns the data.
$.post( "http://hostserver.com/MEApp/MEService", function( data ) {
//As soon as the browser finished downloading, this function is called.
$('#demo').html(data);
});
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
Can i call a javascript function on load of a JSP file according to a request parameter value?
I want to send a request from my Servelt to the JSP and if the value of a parameter="something" i want to call a specific JS function.
Is that possible? Please send me any relevant example if it is available.
thnks in advance
According to your question i assume this is what you want try it
<%
String text = request.getParameter("parameter");
%>
<html>
<head>
<script>
var text1="<%=text%>";
if(text1.length>0)
{
//do what you want call function or something
}
</script>
</head>
<body>
</body>
<html>
I have been trying to change a image in a webpage using jquery and httprequest, without any luck... after research a lot I decide to ask for help.
The code is pasted bellow and I first try to ask for the json (what works fine) and then update the scr on the image... didn't work.
For a final test I use a mouseover and mouse out function and didn't work as well, funny thing is that other property like, show and hide works fine, the only problem is with the attr('scr','').
Thanks
<!DOCTYPE html>
<html>
<head>
<script src="..\js\jQuery.js"></script>
<script>
$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",
{plantSelected:"ARGYRANTHEMUM-POLLY"},
function(data){
$('#a1').attr('scr','data:image/jpg;base64,'+data.plantDetail.Image);
});
$(document).ready(function() {
$('#a1').mouseover(function(e) {
$('#a1'.attr('scr','http://www.containernurseries.co.nz/images/services.gif');
}).mouseout(function(e) {
$('#a1').attr('scr','http://www.containernurseries.co.nz/images/services.gif');
});
});
</script>
</head>
<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>
</body>
</html>
Looks like a typo, scr should be src when assigning the attribute for a1
There are several problems I found and wrestled with, but finally got some working code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$.getJSON("http://ip.jsontest.com", null,
function (data) {
console.log(data)
});
$(document).ready(function () {
($('#a1')).mouseover(function (e) {
($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
}).mouseout(function (e) {
($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
});
});
</script>
</body>
</html>
You can see it work here:
http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcTypeNoComments.html
This code uses a service called "JSONTest" to get properly formatted JSON code. This returns an object (data) of key/value {ip: "xxx.xxx.xxx.xxx"} which shows your ip address. Here is the services website that I use to get the JSON response:
http://teamaqua.github.com/JSONTest/
To see the console log output, just open a console in your browser (hit the F12 key, for instance, or open the FireBug plugin for FireFox. Drill down into the object to see the key/value pair properly formatted in the console.
I fixed your code with the scr->src typo fix and some other things needing fixing:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",
{plantSelected:"ARGYRANTHEMUM-POLLY"},
function (data) {
($('#a1')).attr('src', 'data:image/jpg;base64,' + data.plantDetail.Image);
});
$(document).ready(function () {
($('#a1')).mouseover(function (e) {
($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
}).mouseout(function (e) {
($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
});
});
</script>
</body>
</html>
You can see it (possibly) fail here:
http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcType.html
I get a cross-domain error in Chrome, and it seems to fail silently in IE and FireFox:
XMLHttpRequest cannot load
http://www.containernurseries.co.nz/json/jsonPlantDetails.php?plantSelected=ARGYRANTHEMUM-POLLY.
Origin http://www.sanbarcomputing.com is not allowed by
Access-Control-Allow-Origin.
Here is a good post that talks about one way to fix this (changing it to JSONP), but since your server returns JSON, not JSONP, it does not work either (I tried):
stackoverflow: access-control-allow-origin-not-allowed-by
You would need to return the result in the form of a JSONP JavaScript executable function from the server, I believe. To get a JSONP request sent, you would change this line:
$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",
To this:
$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php?callback=?",
jQuery then would automatically produce a JSONP request for you. It works, but since the result is not executable JavaScript, you get the following error in Chrome:
Uncaught SyntaxError: Unexpected token :
Since I think Chrome is trying to execute the JSON as a function, which it is not.
Changes need to be made to the server, I believe, to get this working cross-domain, if you need that.
Here is a good article on cross-domain issues:
https://developer.mozilla.org/en-US/docs/HTTP_access_control