I have to create an input type text form on my webpage to modify a setTimeout value based on user input in my javascript code while its running. Can i do that and if i can how can i?
I tired to send a String to my backend from user input and than with ajax calls assign the String to a variable in javascript but it does not work because of the inner html is a String , and when i converted it to an int it does not work also.
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("idovalt").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "toltes", true);
xhttp.send();
}
Here is an input form:
var idovalt = 1000;
setTimeout(function(){ize()}, idovalt);
Strring or integer is irrelevant to the matter.
HTML:
<input type="text" id="idovalt" value="1000">
JS:
function ize() {
// do something
}
setTimeout(ize, document.getElementById('idovalt').value);
If you want to write some code directly to the first argument of setTimeout(), the code should be quoted.
e.g.,
setTimeout('alert("Hello!")', 1000);
Yes can approach this, i going to use Jquery for event handling, but of course may change it.
var myInput = $("#timeoutDelay"),
timeOut = null;
function setTimeOutOnInputChange(timeout) {
timeOut = setTimeout(function () {
console.log("Your code...");
//Ize();
}, timeout);
}
// I did not get why you are doing this, asynchronous call execute after the timeout function, thats why you need to wait until is ready to change de timeout, in case time out value comes from server and not for user input, otherwise it doesn't makes sense.
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("idovalt").innerHTML = this.responseText;
setTimeOutOnInputChange(parseInt(this.responseText)); // Assuming does not return an object
}
};
xhttp.open("GET", "toltes", true);
xhttp.send();
}
myInput.change(function () {
var val = this.value;
if (timeOut != null) {
clearTimeout(timeOut);
}
if (isNaN(val)) {
console.error("Input is not a number");
} else {
setTimeOutOnInputChange(val);
}
});
Related
This code is used to read a .txt file in Javascript:
function readFile(fileName) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
console.log(his.responseText);
return this.responseText
}
};
xhttp.open("GET", fileName, true);
xhttp.send();}
This code print out the file contents into the console.
I want to use the file content for further processing. When I try to read the contents using these two lines inside JavaScript:
contents = readFile("data.txt");
console.log(contents);
the console displays: undefined.
How can I fix that?
You can't use the asynchronous result in a synchronous way, instead you can call another function when the promise resolves and do what want there.
function readFile(fileName) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
console.log(his.responseText);
doSomething(this.responseText); //call the function when the promise resolves and do what you want there
}
};
xhttp.open("GET", fileName, true);
xhttp.send();
}
function doSomething(text) {
//do what you want to do with the text here. 'text' here is the responseText
console.log(text);
}
So basically I have an ajax function pretty standard one. Like so:
function ajax_call(rest_req, url, success_callback, fail_callback) {
// if (request_in_progress)
// return;
// request_in_progress = true;
var xhttp = new XMLHttpRequest;
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
// request_in_progress = false;
if (this.status == 200) {
success_callback(this);
}
else {
fail_callback(this);
}
}
};
xhttp.open(rest_req, url, true);
xhttp.send();
}
When I use the ajax function this way:
(function() {
function setup() {
ajax_call("GET", "url1", function(xhttp) {
response = JSON.parse(xhttp.responseText);
if (response["error"] != 100)
document.getElementById('url1-reading').innerHTML = '---';
else
document.getElementById('url1-reading').innerText = response["response"];
},
function() {}
);
ajax_call("GET", "url2" , function(xhttp) {
response = JSON.parse(xhttp.responseText);
if (response["error"] != 100)
document.getElementById('url2-reading').innerHTML = '---';
else
document.getElementById('url2-reading').innerText = response["response"];
},
function() {}
);
console.log('Refresh');
}
setInterval(setup, 1000);
})();
This code behaves differently than what I expect. When I run this code, there are some times when the results that were suppose to go to url1 success_callback goes inside url2's success_callback.
To put another way the response variable inside url1 ajax_call is what I expected to show up as response variable for url2. So in effect the ajax_call seem to not know what success_callback is for what even though I explicitly pass it in as a parameter.
I'm coming from a C++ background so this is a difficult concept to grasp. How do I do this the right way? I hope my question is clear. Please tell me what is not clear so I can clarify.
The way you declare it, response is a global variable. Try changing response = to let response =
I am very new to JS, trying to create simple page which does next:
takes IP of some server
then sends a get request to this server
parses get response,
adds filtered lines to the table on html page.
I was able to do all the steps through the browser console but when, moving to the JS file with get function for some reason function does not return value.
In below code snip line 6 will print undefined in the console.
Any idea how to return "statuses" from the function getStatus?
Should it be some timeout between line 5 and 6?
Thanks!
$("input[type='text']").keypress(function(event){
if(event.which === 13){
var address = $(this).val();
var urlStat = 'http://'+address+':666/bla?open=stats';
var status = getStatus(urlStat);
console.log(status);
$("input[type='text']").val('');
$('table').append("<tr><th>"+address+"</th><th><ul></ul></th><th></th></tr>");
}
});
function getStatus(url){
var xhr = new XMLHttpRequest;
xhr.open("GET", url);
xhr.send();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var regexStatus = /(\w+ state:.*?)</g
var response = xhr.responseText;
var statuses = response.match(regexStatus);
console.log('Inside function getStatus'+statuses);
return statuses;
};
}
};
The problem with your code is that the status is returned after your your request has been sent. That gives a small delay. Because you immediatly ask for the return value of getStatus, you will get undefined.
You could solve this problem with a callback function:
function getStatus(url,callback){
var xhr = new XMLHttpRequest;
xhr.open("GET", url);
xhr.send();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var regexStatus = /(\w+ state:.*?)</g
var response = xhr.responseText;
var statuses = response.match(regexStatus);
console.log('Inside function getStatus'+statuses);
if(callback) callback(statuses);
};
}
};
You call the getStatus function with a function, which is called after you got a response from you request.
E.g:
getStatus(url,function(statuses){
console.log(statuses);
});
EDIT
For a better and longer explanation, consider to check out How do I return the response from an asynchronous call?
somehow this code just blanks and isn't really doing anything.
Doesn't even show any errors.
So can Someone help?
function connectStart(mycon){ //connection start for contacting
return function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var jsonReturn = JSON.parse(this.responseText);
mycon; //calls the makeAnn() Function
}
};
// mypref() stands for the preference code location for the myphp.php
xmlhttp.open("GET", mypref()+"myphp.php?q="+myvar,true);
xmlhttp.send();
}
}
function makeAnn(){
return function(){
console.log(jsonReturn);
if ( jsonReturn !== "NO"){
alert("Announcement Was Posted");
} else {
alert("Error Encoding Data");
}
} //end of return function()
}
function mainFunction(){ //is called by an onclick event
var myvar = "I Shall Return!";
connectStart(makeAnn()); // i used invocation to combine them
}
Somehow it never shows any actual complaints or anything on the console log.
No alerts or whatever.
Doesn't write the data sent to the php or database.
No nothing really.
And I have tried the Php and html, their both fine.
It's just this part of my code that won't work.
You are not calling the function inside your onreadystatechange handler. See below.
function connectStart(mycon){ //connection start for contacting
return function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var jsonReturn = JSON.parse(this.responseText);
// mycon; //wouldn't do anything
mycon(); // THIS should work better...
}
};
// mypref() stands for the preference code location for the myphp.php
xmlhttp.open("GET", mypref()+"myphp.php?q="+myvar,true);
xmlhttp.send();
}
}
EDIT:
The other problem which I now noticed is that you are referencing jsonReturn way, way out of its scope.
function connectStart(mycon){ //connection start for contacting
return function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var jsonReturn = JSON.parse(this.responseText);
mycon(jsonReturn); // pass jsonReturn as a parameter
}
};
// mypref() stands for the preference code location for the myphp.php
xmlhttp.open("GET", mypref()+"myphp.php?q="+myvar,true);
xmlhttp.send();
}
}
function makeAnn(){
return function(jsonReturn){ // pass in as a parameter
console.log(jsonReturn);
if ( jsonReturn !== "NO"){
alert("Announcement Was Posted");
} else {
alert("Error Encoding Data");
}
} //end of return function()
}
function mainFunction(){ //is called by an onclick event
var myvar = "I Shall Return!";
connectStart(makeAnn()); // i used invocation to combine them
}
I'm trying to wait for the AJAX request to complete. It would be easy if the method xmlhttp.open would support async = false but Ant Galio does not support this option and only asynchronous requests are permitted. The question is how can I wait for the callback to be called.
var ajaxFinished = false;
var xmlhttp = new XMLHttpRequest();
this.debug("-- onreadystatechange is being defined");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
ajaxFinished = true;
var data = xmlhttp.responseText;
if (xmlhttp.status == 200) {
that.debug('downloadSettings: SUCCESS');
[...]
} else {
that.debug('downloadSettings:');
that.debug('-- Error: ');
that.debug('-- ResponseText: "'+data+'"')
}
}
}
while (ajaxFinished == false) {
}
this.debug("-- open connection");
xmlhttp.open("GET", requestUrl, true); /* Ant Galio does not support synchronous */
this.debug("-- send");
xmlhttp.send();
I'm looking for some kind of active waiting. I know about another solution but I'm interested in a solution that would not require changing more of the code than is my example above.
Thanks!
yes, you can
function getFile(url) {
if (window.XMLHttpRequest) {
AJAX=new XMLHttpRequest();
} else {
AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
if (AJAX) {
AJAX.open("GET", url, false);
AJAX.send(null);
return AJAX.responseText;
} else {
return false;
}
}
var fileFromServer = getFile('http://somedomain.com/somefile.txt');
w3c definition http://www.w3.org/TR/XMLHttpRequest/#the-open()-method
client . open(method, url [, async = true [, user = null [, password = null]]])
You can't. There is no "active waiting" in JavaScript, there can be only one active execution a time ("single-threaded").
There is a workaround.
Instead of using the the blocking while loop for poll use the nonblocking setInterval()..
so your code might look something like this.
var ajaxFinished = false;
var xmlhttp = new XMLHttpRequest();
this.debug("-- onreadystatechange is being defined");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
ajaxFinished = true;
var data = xmlhttp.responseText;
if (xmlhttp.status == 200) {
that.debug('downloadSettings: SUCCESS');
[...]
} else {
that.debug('downloadSettings:');
that.debug('-- Error: ");
that.debug('-- ResponseText: "'+data+'"')
}
}
}
//Polling function
function checkEvent(){
if(ajaxFinished == true){
//your code i.e xmlhttp.open("GET", requestUrl, true);
}
clearInterval(chkeventid);//Clear Interval via ID for single time execution
}
var chkeventid=self.setInterval("checkEvent()",100);//The poll call
The setInterval method is treated a bit differently in JS as you know so you may use it as against the while loop.