I run a JavaScript function that send a xmlHttpRequest to an .ashx (let's name it send_req() that run on page load for first time). For onreadystatechange, I have a function that receive XML data and show it on the page (let's name this one getanswer()).
I want to automatically update XML data on the page every 20 seconds. For that, I use setTimeout(send_req(),20000) in the end of writexml(), but it doesn't update data on the page. I add an alert() at the **** line in the code. It shows on the page every one second!
And my code works fine if I use it without setTimeout.
Here is my code
var Population = "";
var Available_money = "";
var resource_timer;
var httpReq_resource;
function send_req() {
if (window.ActiveXObject) {
httpReq_resource = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
httpReq_resource = new XMLHttpRequest();
}
var sendStr = "user_id=1";
if (httpReq_resource)
{
httpReq_resource.onreadystatechange = getanswer;
httpReq_resource.open("POST", "Answer_Resource_change.ashx");
httpReq_resource.send(sendStr);
}
}
function getanswer() {
var results = httpReq_resource.responseXML;
if (httpReq_resource.readyState == 4) {
if (httpReq_resource.status == 200) {
try {
var value;
var values = results.getElementsByTagName("values");
for (var i = 0; i < values.length; i++) {
value = values[i];
Population = value.getElementsByTagName("Population")[0].firstChild.nodeValue;
Available_money = value.getElementsByTagName("Available_money")[0].firstChild.nodeValue;
... and some more like two line up
}
make_changes();
**********************************
resource_timer = setTimeout(send_req(), 20000);
}
catch (e) {
}
}
}
}
function make_changes() {
$("li span#l1").text(Available_money + '/' + Population);
...and some more like up line
}
This:
resource_timer = setTimeout(send_req(), 20000);
Should be:
resource_timer = setTimeout(send_req, 20000);
The first executes the result of send_req() after 20 seconds, the second executes send_req itself.
Related
So I've been trying to do this for more than a day now. I'm getting a few user inputs through a form (ex - a name of a car), then I search through a JSON file to see whether its available. After this I'm trying to send the results of the search to a results page. I've been trying to use a cookie for this process. However there is a problem that I can't figure out. Following is my code,
This is getting input and searching:
function search() {
var name = $("input[name=carName]").val();
var cars = new Array();
$.getJSON("properties.json", function (data) {
$(data.cars).each(function (index, value) {
if (value.name == name) {
cars.push(value);
}
});
if (cars.length > 0) {
send(cars);
} else {
// do some handling
}
});
function send(cars) {
var str = JSON.stringify(cars);
Cookies.set("carResults", str);
window.location.replace("result.html");
}
This is the script from result.html
<script>
$(document).ready(function () {
var temp = Cookies.get("carResults");
var cars = JSON.parse(temp);
if(results!=null) {
for (var i = 0; i < results.length; i++) {
var temp1 = "Found a " + cars[i].name;
$("#resultArea").append(temp1);
}
} else {
$("#resultArea").append("Nothing to show");
}
});
</script>
PS. I'm using a javascript library called cookie.js for creating cookies
I have been having some issues with opening multiple webpages in phantomjs, I am first opening a website which contains a few links, which I want to open as well, and save a piece of text from each URL to my jobs_list which has many objects inside of it. And after all the URL's have been run, I want to exit phantomjs. But as it is right now it never exits, and I have trouble recieving data from second function.
var webPage = require('webpage');
var page = webPage.create();
var jobs_list = [];
page.open('url', function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
page.onConsoleMessage = function(msg) {
console.log(msg);
};
var list = page.evaluate(function() {
var jobs = [];
var job;
$('.test').each(function(){
$(this).find('span').each(function(){
var job_link = $(this).find('a');
var url = job_link.attr("href");
job = {title : job_link.text(), url : url, location : ""};
jobs.push(job);
})
});
return jobs;
});
var i = 0;
jobs_list = list;
next_page(i);
});
});
function next_page(i){
if (i <= (jobs_list.length-1)) {
var current_job = jobs_list[i];
var url = current_job.url;
page.open(url, function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {
var location = page.evaluate(function() {
var job_location;
$('.job-location').each(function(){
$(this).find('li').each(function(){
job_location = $(this).text();
})
})
console.log(job_location);
return job_location;
});
jobs_list[i].location = location;
if(i == (jobs_list.length-1)) {
phantom.exit(0);
}
});
});
console.log(i, current_job.title);
next_page(++i);
}
}
The problem is that the page.open call is asynchronous. If you look closely to your next_page function it can be shortened to this:
function next_page(i){
if (i <= (jobs_list.length-1)) {
var current_job = jobs_list[i];
var url = current_job.url;
page.open(url, function (status) {
...
});
console.log(i, current_job.title);
next_page(++i);
}
}
It means that next_page(++i); is executed before page.open(url, ...) even managed to load the first HTML content. This call leads to the next page.open(url, ...) being executed immediately, thus overwriting the previous request. And you're never going to get any data this way.
You have to do two things:
move the next_page(++i); call where the execution of one page is finished
reduce the number of condition checking
I propose:
function next_page(i){
if (i <= (jobs_list.length-1)) {
var current_job = jobs_list[i];
var url = current_job.url;
page.open(url, function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {
var location = page.evaluate(function() {
var job_location;
$('.job-location').each(function(){
$(this).find('li').each(function(){
job_location = $(this).text();
})
})
console.log(job_location);
return job_location;
});
jobs_list[i].location = location;
console.log(i, current_job.title);
next_page(++i);
});
});
} else {
phantom.exit(0);
}
}
That's quite an old version of jQuery. Perhaps you want to load a newer version. If the page already has jQuery included, you will likely break the page by loading another jQuery into it. Don't load an additional jQuery version at all in this case.
Is there a way to display your AJAX data back in the order in which you called your AJAX requests, without using promises, also no synchronous code or jQuery, but simply pure javascript?
For example:
//file 1 takes 3 seconds & file2 takes 1 second
input: ['example1.com', 'example2.com']
output: [example1_response, example2_response]
I started by setting up a small toy problem in my HTML page. I append two placeholder <div>'s with the text wait inside my webpage & then as my url requests completed the appropriate <div>'s placeholder text was replaced. But still it doesn't achieve the end goal of loading my content based on the order in which I made my requests.
JSFIDDLE:https://jsfiddle.net/nf4p1bgf/5/
var body = document.getElementsByTagName('body')[0]
var urls = [ "website1.com", "website2.com"];
//Helper function to simulate AJAX request
function fakeAjax(url,cb) {
var fake_responses = {
"website1.com": "data from website1.com",
"website2.com": "data from website2.com"
};
var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
console.log(`Requesting: ${url}. Response time: ${randomDelay}`);
setTimeout(function(){
cb(fake_responses[url]);
},randomDelay);
}
urls.forEach(function(url) {
//creating placeholder <div>'s before AJAX data returns
var div = document.createElement("div");
div.innerHTML = "this is a place holder - please wait";
body.appendChild(div);
fakeAjax(url, function(data) {
div.innerHTML = data;
});
});
EDIT & SOLUTION JSFiddle here: https://jsfiddle.net/fa707qjc/11/
//*********** HELPERS (SEE CODE BELOW HELPERS SECTION) ***********/
var body = document.getElementsByTagName('body')[0]
var urls = ["website1.com","website2.com"];
function fakeAjax(url,cb) {
var fake_responses = {
"website1.com": "data from website1.com",
"website2.com": "data from website2.com"
};
var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
console.log(`Requesting: ${url}. Response time: ${randomDelay}`);
setTimeout(function(){
cb(fake_responses[url]);
},randomDelay);
}
function createElement(typeOfElement, text){
var element = document.createElement(typeOfElement)
element.innerHTML = text;
return element;
}
function handleResponse(url, contents){
//if I haven't recieved response from x url
if( !(url in responses)){
responses[url] = contents;
}
//defining order for response outputs
var myWebsites = ['website1.com','website2.com'];
// loop through responses in order for rendering
for(var url of myWebsites){
if(url in responses){
if(typeof responses[url] === "string"){
console.log( responses[url])
//mark already rendered
var originalText = responses[url];
responses[url] = true;
var p = createElement('p', originalText);
body.appendChild(p);
}
}
//can't render it / not complete
else{
return;
}
}
}
//*********** CODE START ***********
function getWebsiteData(url) {
fakeAjax(url, function(text){
console.log(`Returning data from ${url} w/response: ${text}`)
handleResponse(url, text);
});
}
//As we get our responses from server store them
var responses = {};
// request all files at once in "parallel"
urls.forEach(function(url){
getWebsiteData(url);
})
Use Promise.
Promise.all(urls.map(function(url) {
return new Promise(function(resolve, reject) {
request(url, function(data, error) {
if (error) {
return reject(error);
}
resolve(data);
})
});
})).then(function(results) {
console.log(results);
});
Update: I read post that this one was flagged as a duplicate of. I generally get how callbacks are supposed to work. My problem is I'm calling the API in a loop that is creating objects, so I can't figure out how to put a callback in there to make the next method wait without calling that callback with each loop iteration.
I created objects and added API data to them. I use a callback so the next bit of code won't run until the API properties are available. The callback is not working.
function Media(boxCover, searchName, year) {
this.boxCover = boxCover;
this.searchName = searchName;
this.year = year;
this.genre = "";
this.imdbRating = "";
apiCall(this);
}
function makeMovieObjects(callback) {
var table = [
new Media('imgs/avengers.jpg', "Avengers", "2012"),
new Media('imgs/blade_runner.jpg', "Blade Runner", "1982")
];
callback(table);
}
function apiCall(obj){
var link = "http://www.omdbapi.com/?t=" + obj.searchName + "&y=" + obj.year + "&plot=short&r=json";
var oReq = new XMLHttpRequest();
oReq.open("get", link, true);
oReq.onload = reqListener;
oReq.send();
function reqListener() {
var apiReturn = JSON.parse(this.response);
obj.genre = apiReturn.Genre;
obj.imdbRating = apiReturn.imdbRating;
}
}
function init(table) {
for (var i = 0; i < table.length; i++) {
console.log(table[i]); // object contains all data
console.log(table[i].genre); // fails (API sourced data)
console.log(table[i].year); // success (data hard coded)
}
}
makeMovieObjects(init(table));
OMG, I am in need of a way to set up arrays of XML Requests based on the idShout - 1.
So it would be something like this...
var req = new Array();
req[idShout - 1] = ALL XML Data...
Here's what I got so far but it's not working at all :(
var idShout;
var req = new Array();
function htmlRequest(url, params, method)
{
req[req.push] = ajax_function();
for (i=0;i<req.length;i++)
{
(function (i) {
if (req[i])
{
if (method == "GET")
{
req[i].onreadystatechange = function()
{
if (req[i].readyState != 4)
return;
if (req[i].responseText !== null && req[i].status == 200)
{
document.getElementById("shoutbox_area" + idShout).innerHTML = req[i].responseText;
}
}
}
req[i].open(method,url,true);
if (method == "POST")
req[i].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (params == "")
req[i].send(null);
else
req[i].send(params);
return req[i];
}
else
return null;
})(i);
}
}
function ajax_function()
{
var ajax_request = null;
try
{
// Opera 8.0+, Firefox, Safari
ajax_request = new XMLHttpRequest();
}
catch (e)
{
// IE Browsers
try
{
ajax_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajax_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
//No browser support, rare case
return null;
}
}
}
return ajax_request;
}
function send(which)
{
var send_data = "shoutmessage=" + document.getElementById("shout_message" + which).value;
var url = smf_prepareScriptUrl(smf_scripturl) + "action=dreamaction;sa=shoutbox;xml;send_shout="+ which;
htmlRequest(url, send_data, "POST");
document.getElementById("shout_message" + which).value = "";
document.getElementById("shout_message" + which).focus();
return true;
}
function startShouts(refreshRate, shoutCount)
{
clearInterval(Timer[shoutCount-1]);
idShout = shoutCount;
show_shouts();
Timer[shoutCount - 1] = setInterval("show_shouts()", refreshRate);
return;
}
function show_shouts()
{
var url = smf_prepareScriptUrl(smf_scripturl) + "action=dreamaction;sa=shoutbox;xml;get_shouts=" + idShout;
htmlRequest(url, "", "GET");
}
Any help at all on this would be greatly appreciated...
Basically, I'm setting the Timer Arrays in a different function before this, and I call startShouts which is supposed to show all of the information, but startShouts gets called more than once, which is why I have idShout set to equal shoutCount. So it will go something like this: shoutCount = 1, shoutCount = 2, shoutCount = 3, everytime it is being called. So I set the req[idShout - 1] array and it should return the result right??
Well, I get no errors in Firefox in the error console with this code above, but it doesn't work... Any ideas anyone?? As it needs to output into more than 1 area... argg.
Thanks for any help you can offer here :)
Thanks guys :)
Also, a little more info on this...
Basically there is 1 or more Shoutboxes on any given page (Don't ask why?), I need to be able to grab the info of this and put it into the document.getElementById("shoutbox_area" + idShout), since the idShout for each element changes incrementing by 1 for each Shoutbox that is on that page. The values for the Shoutbox can be different, example the refreshRate can be different. 1 Shoutbox can have a refresh rate of like 2000 milliseconds, while the other can have a rate of 250 milliseconds, they need to be different and refresh at the times that are defined for them, so this is why I decided to make a Timer array, though not sure I have setup the Timer array the way it is meant to be setup for the setInterval function. Here is the way it get's done in a different javascript function that runs just before startShouts gets called...
This part is outside of the function and within the document itself:
var Timer = new Array();
And this part is in the function...
Timer[shoutCount - 1] = "";
So not sure if this is correctly setup for Timers...?
Since XHRs are asynchronous, by the time the readystatechange callback function fires the value of i has changed. You need to create a separate closure for the i variable during your loop. The easiest way to do this is wrap an anonymous function around the code block and call it with i passed as the first argument:
for (i=0;i<req.length;i++)
{
(function (i) {
if (req[i])
{
if (HttpMethod == "GET")
{
req[i].onreadystatechange = function()
{
if (req[i].readyState != 4)
return;
if (req[i].responseText !== null && req[i].status == 200)
{
document.getElementById("shoutbox_area" + idShout).innerHTML = req[i].responseText;
}
}
}
req[i].open(HttpMethod,url,true);
if (HttpMethod == "POST")
req[i].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (params == "")
req[i].send(null);
else
req[i].send(params);
return req[i];
}
else
return null;
})(i);
}