I'm trying to do a simple http request to my server in a tizen web application for gear s2.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>Wearable UI</title>
<link rel="stylesheet" href="../../lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="../../css/style.css">
<!--<script type="text/javascript" src="toggle.js"></script>-->
<script type="text/javascript" >
function checkToggle(name){
//make box2 = box1 when checked
var checkbox = document.getElementById(name);
if (checkbox.checked == 1){
HTTPReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=1');
console.log("set "+name+" ON");
}else{
HTTPReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=0');
console.log("set "+name+" OFF");
}
}
function HTTPReq(theUrl){
console.log('httpReq');
var client = new XMLHttpRequest();
client.open('GET', theUrl);
client.send();
}
</script>
</head>
<body>
<div class="ui-page" data-enable-page-scroll="false">
<div class="ui-content">
<div class="ui-switch">
<div class="ui-switch-text">
Led001
</div>
<div class="ui-toggleswitch ui-toggleswitch-large">
<input type="checkbox" class="ui-switch-input" id="Led001" onclick="checkToggle('Led001')">
<div class="ui-switch-button"></div>
</div>
<div class="ui-switch-sub-text">
Bedroom Light
</div>
</div>
</div>
<script src="controls.js"></script>
</div>
</body>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</html>
When i emulate this i get the error: Uncaught ReferenceError: checkToggle is not defined. How ever when i save the same file when i'm in web emulator mode and live editing. the code works....?
Can anyone explain this and tell me how to fix this. Thanks
Try:
document.getElementById("Led001").addEventListener("click", function(){
checkToggle("Led001")
})
And remove the onClick from your HTML
I'm not 100% sure how i fixed it but here is the code that works:
( function () {
var led001Button = document.getElementById("Led001"),
led002Button = document.getElementById("Led002");
function httpReq(theUrl){
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
// xmlhttp.onreadystatechange = function(){
// if (xmlhttp.readyState == xmlhttp.DONE){
// alert(xmlhttp.responseText);
// }
// else{
// alert(xmlhttp.statusText);
// }
// };
// xmlhttp.onerror = function(e){
// alert("onerror: " + xmlhttp.statusText);
// };
xmlhttp.open("GET", theUrl);
xmlhttp.send();
}
function checkToggle(name){
//make box2 = box1 when checked
var checkbox = document.getElementById(name);
if (checkbox.checked === true){
httpReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=1');
// console.log("set "+name+" ON");
}else{
httpReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=0');
// console.log("set "+name+" OFF");
}
}
if (led001Button) {
led001Button.addEventListener("change", function(){
checkToggle("Led001");
});
}
if (led002Button) {
console.log('test');
led002Button.addEventListener("change", function(){
checkToggle("Led002");
});
}
} () );
Thanks for all the replies they have all helped in some way.
Related
I have a simple Javascript function to be called when a button on the page is clicked. But it is getting called as soon as the page loads. Can anyone please tell me what the problem here is?
The HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn">ClicMe!</button>
<div id="demo"></div>
<script src="script.js"></script>
</body>
</html>
While the 'script.js' file is as follows.
var url = "example.txt";
function loadDoc(url, cFunction) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
var btn = document.getElementById("btn");
btn.onclick = loadDoc(url, myFunction);
You must attach an event listener that invoke the function when a user clicks a button:
btn.addEventListener('click', () => {
loadDoc(url);
});
The last line of your script is calling the function instead of assigning the handler to it. Since you have arguments that you want to call it with, you need to use something to bundle the arguments and function together for when it is called. If you replace the last line with the following, it should work:
btn.onclick = loadDoc.bind(undefined, url, myFunction) // "this" value is not needed, so it is left undefined
use an arrow function like this:
btn.onclick = () => loadDoc(url, myFunction);
You are explicitly calling loadDoc() function in your JS file.
You should try this -
var url = "https://jsonplaceholder.typicode.com/posts";
function loadDoc() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn" onclick='loadDoc()'>ClicMe!</button>
<div id="demo"></div>
<script src="script.js"></script>
</body>
</html>
I'm trying to call a function from a button in the html body when onclick. This function sends the id to a php for processing some information.
The problem is that when I press the button, it is not calling the function. Can anyone tell me what I'm doing wrong?
Thank you
This is the code,
<html>
<head>
<title>Carrental</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
function delete(id){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var available = this.responseText;
}
};
xhttp.open("GET", "add_delete_session.php?action=delete&id="+id, true);
xhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="delete(9)">Erase</button>
</body>
</html>
delete is an operator. You cannot use it as the name of a variable.
Rename the function.
You need to change the delete to another name function , delete is an operator , you can see the list of operators here : Expressions and operators
function ajaxCall(id){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var available = this.responseText;
}
};
xhttp.open("GET", "add_delete_session.php?action=delete&id="+id, true);
xhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="ajaxCall(9)">Erase</button>
</body>
You cant call the function delete. Just Rename it :)
The problem is delete is operator in JavaScript
The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.
So your code try to delete the object or element mentioned after it and is not calling method you wrote.
As per example in #Pluto https://stackoverflow.com/a/62086635/124891
You have to rename the method and call it.
I'm using Giphy's API to learn how to make a random GIF generator. The code below works fine for generating one GIF and putting it in the imageContainer, but I'm wondering what I can add to make a new GIF appear in the imageContainer when the randomDog button is clicked? As it looks now, the request for more GIFs is successful if you click the button, but they are not posted in the image container since there is already a GIF in it.
This is my JavaScript:
document.addEventListener('DOMContentLoaded', function () {
request = new XMLHttpRequest;
request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cute+dog', true);
document.getElementById("randomDog").onclick = function () {
if (request.status >= 200 && request.status < 400){
data = JSON.parse(request.responseText).data.image_url;
console.log(data);
document.getElementById("imageContainer").innerHTML = '<center><img src = "'+data+'" title="GIF via Giphy"></center>';
} else {
console.log('reached giphy, but API returned an error');
}
};
request.onerror = function() {
console.log('connection error');
};
request.send();
});
And this is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" type="text/css" href="dogstyle.css">
<meta charset="UTF-8">
<title>Sadness be gone!</title>
</head>
<body>
<div id="headers">
<h1> Having a bad day?</h1>
<h1> Not anymore! </h1>
</div>
<h3 id="subheader">Happiness and fluffyness is just a click away</h3>
<div id="imageContainer"></div>
<button id="randomDog" class="button">Click away!</button>
<script src="js/experiment.js"></script>
</body>
Thanks in advance!
Just move the lines initializing and sending the XMLHttpRequest inside of the click handler, and include the success function inside an onreadystatechange event handler.
(Note that the API key you are using returns an error for me when I use it in a snippet; unsure of how I would fix that but maybe it will work on your end.)
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("randomDog").onclick = function() {
request = new XMLHttpRequest;
request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cute+dog', true);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 400) {
data = JSON.parse(request.responseText).data.image_url;
console.log(data);
document.getElementById("imageContainer").innerHTML = '<center><img src = "' + data + '" title="GIF via Giphy"></center>';
} else {
console.log('reached giphy, but API returned an error');
}
}
}
request.onerror = function() {
console.log('connection error');
};
request.send();
};
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dogstyle.css">
<meta charset="UTF-8">
<title>Sadness be gone!</title>
</head>
<body>
<div id="headers">
<h1> Having a bad day?</h1>
<h1> Not anymore! </h1>
</div>
<h3 id="subheader">Happiness and fluffyness is just a click away</h3>
<div id="imageContainer"></div>
<button id="randomDog" class="button">Click away!</button>
<script src="js/experiment.js"></script>
</body>
Try this
....
document.getElementById("randomDog").onclick = function () {
if (request.status >= 200 && request.status < 400){
data = JSON.parse(request.responseText).data.image_url;
console.log(data);
// Clear the existing image first
document.getElementById("imageContainer").removeChild(document.getElementsByClassName("mygif")[0]);
// Now set the new image in image container
document.getElementById("imageContainer").innerHTML = '<center><img class="mygif" src = "'+data+'" title="GIF via Giphy"></center>';
} else {
console.log('reached giphy, but API returned an error');
}
};
....
I was wondering what I was doing wrong with this code? I'm trying to get the response for PC players from the API to be set to a tag in the html, but this isn't working.
Code:
<!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>Battlefield 4 Tracker</title>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="fullscreen">
<div class="fullscreen-content">
<div id="centered">
<h1>Battlefield 4 Stats Tracker</h1>
<input id="username" name="username" placeholder="PSN Username">
<button id="submit">Submit</button>
<p id="response">
Response goes here.
</p>
</div>
</div>
</div>
<script>
var request = new XMLHttpRequest();
var jsonResponse = request.open("GET", "http://api.bf4stats.com/api/onlinePlayers", false)
var obj = JSON.parse(jsonResponse);
document.getElementById("response").innerHTML = obj.pc[1].count + "";
</script>
</body>
</html>
Since you are using JQuery as suggested by the html you provided , you can use $.get method of it. This method is a simple wrapper to work with the xmlHTTP asynchronous calls. The success call back of this method is where you should populate the obj with response.
And obj.pc is also an object, so you should access it like obj.pc.count
<!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>Battlefield 4 Tracker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="fullscreen">
<div class="fullscreen-content">
<div id="centered">
<h1>Battlefield 4 Stats Tracker</h1>
<input id="username" name="username" placeholder="PSN Username">
<button id="submit">Submit</button>
<p id="response">
Response goes here.
</p>
</div>
</div>
</div>
<script>
var request = new XMLHttpRequest();
var obj = null;
var jsonResponse = $.get("http://api.bf4stats.com/api/onlinePlayers", function(response){
obj = response;
document.getElementById("response").innerHTML = obj.pc.count + "";
})
</script>
</body>
</html>
you forgot to send the XMLHttpRequest and what you get back is a object of object so you can call directly obj.pc.count. Try this one:
var json = new XMLHttpRequest();
json.open("GET", "http://api.bf4stats.com/api/onlinePlayers", false)
json.send(null)
var obj = JSON.parse(json.responseText);
document.getElementById("response").innerHTML = obj.pc.count;
You never sent the request. You're missing request.send(). You then listen for the load event, when you've gotten a response.
Here's an edited version of your code. I assumed that you want to loop through all the types of devices and count them.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullscreen">
<div class="fullscreen-content">
<div id="centered">
<h1>Battlefield 4 Stats Tracker</h1>
<input id="username" name="username" placeholder="PSN Username">
<button id="submit">Submit</button>
<p id="response">
Response goes here.
</p>
</div>
</div>
</div>
<script>
function reqListener () {
//THIS HAPPENS AFTER THE REQUEST HAS BEEN LOADED.
var obj = JSON.parse(this.responseText);
var counter = 0;
for(var k in obj) {
var o = obj[k];
counter += o.count;
}
document.getElementById("response").innerHTML = counter;
}
var request = new XMLHttpRequest();
request.addEventListener("load", reqListener);
request.open("GET", "http://api.bf4stats.com/api/onlinePlayers");
request.send();
</script>
</body>
</html>
You may want to consider other events such as a failed attempt to load the request, etc. Here's more info: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
The request is never send send();
The correct way to do this is to handle it in the onreadystatechange event.
Try this (together with a proper check):
var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
myFunction(obj);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(obj) {
document.getElementById("response").innerHTML = obj.pc.count;
}
or directly without extra function:
var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
document.getElementById("response").innerHTML = obj.pc.count;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
Demo
var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
document.getElementById("response").innerHTML = obj.pc.count;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
<div id="response"></div>
Try this one :-
<script>
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.responseText);
document.getElementById("response").innerHTML = obj.pc.count + "";
}
};
jsonResponse = request.open("GET", "http://api.bf4stats.com/api/onlinePlayers", true);
request.send();
</script>
I'm just trying to execute an Ajax request but instead end up having a ReferenceError: getData is not defined on Console. And this piece of code worked fine 6 months back or so. I've already referred some previously asked questions but no good.
Here's the code:
<html>
<head>
<script language = "text/javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<form>
<input type = "button" value = "Fetch the message"
onclick = "getData('data.txt', 'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched message will appear here.</p>
</div>
</body>
</html>
Your browser doesn't know what language "text/javascript" is. It only knows the language "javascript" and the MIME-type "text/javascript". You're mixing the two up.
You could either change it to language="javascript" or type="text/javascript".
<script type="text/javascript">
language is an outdated attribute anyway; type is more modern.