AJAX not refreshing chat message section - javascript

I recently got a website aired and am having trouble getting the chat to work without having to have the user refresh the page (hence, the ajax). But the person on the other end still has to refresh in order to see the latest message. We're in the same room, so I can see if the chat refreshes or not; it doesn't, and here's the code
<script type="text/javascript">
var scroller = function(){
posts = document.getElementById("posts");
posts.scrollTop = posts.scrollHeight;
}
var menu = 3;
var checksum = function(){
if (menu == 3){
document.getElementById('smileys').style.display="block";
document.bob.smileyhider.innerHTML="−";
menu=1;
}
else {
document.getElementById('smileys').style.display="none";
document.bob.smileyhider.innerHTML="+";
menu=3;
}
}
//Chat ajax loader
var updater = 10;
function update(){
var xhr;
if(updater < 200){ updater = 200 }
if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }
else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
xhr.onreadystatechange = function(){
if (xhr.readyState==4 && xhr.status == 200){
document.getElementById('posts').innerHTML = xhr.responseText;
}
}
setTimeout(update, (++updater)*10);
xhr.open("GET","chatlog<?php echo date("d");?>.log",true);
xhr.send(null);
}
</script>

You are never actually calling update to kick off the ajax requests. I wouldn't nest it either
You want to use setInterval instead. setTimeout will only run once.
I would just use a static value for updater, like 3 seconds
/
var updater = 3000;
function update(){
var xhr;
if(updater < 200){ updater = 200 }
if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }
else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
xhr.onreadystatechange = function(){
if (xhr.readyState==4 && xhr.status == 200){
document.getElementById('posts').innerHTML = xhr.responseText;
}
}
xhr.open("GET","chatlog<?php echo date("d");?>.log",true);
xhr.send(null);
}
setInterval(update, updater);

Related

Having trouble making a XMLHttpRequest()

I am trying to make an XMLHttpRequest, however, I am having issues. The page keeps refreshing automatically even when returning false or using e.preventDefault(). I'm trying to get cities to eventually pass through an options block. (I've started the option section and will complete it after I figure out the get request issue.) I'm trying to do this using pure Javascript because I've already done it using Angular and Node. Any help would be appreciated.
HTML:
<form id="citySearchForm" method="get" onSubmit="return searchFormFunc();">
<div>
<p>Choose a city:</p>
<input type="text" placeholder="Enter a city" id="getCitiesInput" name="city">
<input type="submit" value="submit">
</div>
<div id="weather"></div
<p><span id="temp"></span></p
<p><span id="wind"></span></p>
</form>
Javascript:
var citySearch = document.getElementById("citySearchForm");
// citySearch.addEventListener("submit", searchFormFunc);
function searchFormFunc(e){
cityName = document.getElementById('getCitiesInput').value;
var searchCityLink = "http://autocomplete.wunderground.com/aq?query=";
var search = searchCityLink.concat(cityName);
console.log("link : " + search);
var xhr = XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
var r = JSON.parse(xhr.response || xhr.responseText); // IE9 has no property response, so you have to use responseText
console.log(r);
} else {
console.log('error');
}
};
xhr.open("GET", link, true);
xhr.send(null);
var r = JSON.parse(xhr.response);
return false;
// e.preventDefault();
}
You are specifying that you want this to be an async request. So you need to parse your response inside of the onreadystatechange or onload.
function ajax(url, callback) {
var xhr;
if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest();
else {
var versions = ["MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0",
"Microsoft.XmlHttp"]
for(var i = 0, len = versions.length; i < len; i++) {
try {
xhr = new ActiveXObject(versions[i]);
break;
}
catch(e){}
} // end for
}
/** Here you can specify what should be done **/
xhr.onreadystatechange = function() {
if(xhr.readyState < 4) {
return;
}
if(xhr.status !== 200) {
return;
}
// all is well
if(xhr.readyState === 4) {
callback(xhr);
}
}
xhr.open('GET', url, true);
xhr.send('');
}
Answer from documentation by user6123921
You have to use var xhr = new XMLHttpRequest();
you have to define an onreadystatechange event listener
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
var r = JSON.parse(xhr.response || xhr.responseText); // IE9 has no property response, so you have to use responseText
console.log(r);
/* do stuff with response */
}
};

How to chain ajax calls using plain javascript

I've looked for the answers but couldn't find anything with plain Javascript. What would be the appropriate way? I tried to use the same approach repetitively but it didn't work. How can I solve this with pure Javascript?
function someFunction(){
var url = "someUrl";
var xmlhttp = new XMLHttpRequest ();
xmlhttp.open("GET", url, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function (){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
obj = JSON.parse(xmlhttp.responseText);
length = obj.ajax.length;
for(var i = 0; i < length; i++ ){
try{
var someVar = obj.ajax.elements[i].id;
var url2 = "someOtherUrl"+someVar+"/features";
var xmlhttp = new XMLHttpRequest ();
xmlhttp.open("GET", url, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function (){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
obj2 = JSON.parse(xmlhttp.responseText);
length2 = obj2.ajax.length;
for(var j= 0; j < length2; j++){
var elementNames = obj2.elements[j].name;
}
}
}
}
}
}
You can call that someFunction() recursively. To do so, You just have to invoke that same function after 200 ok response.
In following code I've added a restriction to return form recursive callback stack after a fixed amount of requests in chain.
EDIT : for multiple urls
callDone = 0;
urls = ['http://url1','http://url2','http://url3'];
totalCall = urls.length - 1;
function someFunction(){
//Edit: > Fetch url from array
var url = urls[ callDone ] ;
var xmlhttp = new XMLHttpRequest ();
xmlhttp .open( "GET", url, true);
xmlhttp .send();
xmlhttp .onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
//your stuff with response...
if( callDone < totalCall ){
callDone++;
someFunction();
}
else{
return;
}
}
}
}

How do I pull a JSON file that is separate from a RESTFUL API's functions as an authenticated user via an API?

I need to simulate an authenticated user to pull a JSON file. I am using Last.fm's API, but there is currently no method to pull the specific data I want. If I just pull it as plain text in browser, it shows up. However, I want data that is specific to an authenticated user. So, if I login to Last.fm as me, then pull the data, the data is different than if I just pull the data from anywhere.
Basically, the data contained in this file is specific to the user, and as there is no function specifically set to access this file, I don't know how I'd do that....
My function that pulls the current data is listed below:
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
function getRadio() {
var trackUrls = new Array();
var resValue;
var station;
var radioStation;
var url;
var data;
var neatDisplay;
var resultsDisplay = document.getElementById('result');
var radioTypeInput = document.getElementsByName('radioType');
var queryInput = document.getElementById('query');
var query = queryInput.value;
for (var i = 0, length = radioTypeInput.length; i < length; i++) {
if (radioTypeInput[i].checked) {
station = radioTypeInput[i].value;
break;
}
}
if (station == 1) {
radioStation = "recommended";
} else if (station == 2) {
radioStation = "library";
} else if (station == 3) {
radioStation = "mix";
} else {
radioStation = "music";
};
if (radioStation != "music") {
url = "https://crossorigin.me/" + "http://www.last.fm/player/station/user/" + query + "/" + radioStation;
} else {
url = "https://crossorigin.me/" + "http://www.last.fm/player/station/music/" + query;
};
console.log(url);
request = createCORSRequest("get", url);
if (request) {
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
data = JSON.parse(request.responseText);
for (i = 0; i < data.playlist.length; i++) {
trackUrls[i] = data.playlist[i].playlinks[0].url;
}
neatDisplay = trackUrls.join("\n ");
resultsDisplay.innerHTML = neatDisplay;
console.log(neatDisplay.toString());
neatDisplay = neatDisplay.toString();
return neatDisplay.toString();
} else if (request.status == 503) {
resultsDisplay.innerHTML = "Connection Error. The application may be overloaded."
} else {}
};
request.onerror = function() {
document.getElementById("result").innerHTML = "Connection Error. The application may be overloaded. Try again later"
};
request.send();
}
}
Ultimately, this used to pull Spotify links in the resulting data, but now it pulls YouTube. So, the problem only occurs if just pulling the file, without authentication.

Cache pages using XMLHttpRequest

Everything is and is run on the same domain in the latest versions of the major browsers.
var xmlhttp = new XMLHttpRequest();
var sites = ["/page1", "/page2", "/page3"];
var cache = {};
function xhrStart(url) {
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function isOkXhr() {
return (xmlhttp.readyState == 4 &&
(xmlhttp.status >= 200 && xmlhttp.status < 300));
}
function reload() {
var len = sites.length;
var i;
for (i = 0; i < len; i++) {
var url = sites[i];
xmlhttp.onreadystatechange = function() {
if (isOkXhr())
cache[url] = xmlhttp.responseText;
}
xhrStart(url);
}
}
Reload function should be to cache all pages, but in fact all queries return Aborted in the debugger, except the last one. What could be the problem?
You are using one XHR object and keep writing over it in the loop. When you call open() it aborts the previous request. The for loop does not wait for the request.
Either create a new XHR request or wait til the other request is done before you make the next request.
var sites = ["/page1", "/page2", "/page3"];
var cache = {};
function xhrStart(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status >= 200 && xmlhttp.status < 300) {
cache[url] = xmlhttp.responseText;
} else {
//what are you going to do for error?
}
}
};
xmlhttp.send();
}
for (var i = 0; i < sites.length; i++) {
var url = sites[i];
xhrStart(url);
}

how to separate the response div ids in ajax call

Please help me out to resolve the issue.
function createRequestObject(){
var req;
if(window.XMLHttpRequest){
//For Firefox, Safari, Opera
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
//For IE 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
//Error for an old browser
}
return req;
}
var http = createRequestObject();
function empajax(method,nameId)
{
url='college/cat/employee.jsp'+"?nameId="+nameId;
if(method == 'POST'){
http.open(method,url,true);
http.onreadystatechange = handleResponse;
http.send(null);
}
}
function handleResponse(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
if(response){
$("#empname").html(response);
$("#empnumber").html(response);
}
}
}
In the above ajax function, employee.jsp is returing below values in below divs. How to separate the div responses in the habdleResponse() function to set the values in corresponding divs like (empname,empnumber)
<div>
<b>ram</b>
</div>
<div>
<b>1234</b>
</div>
I just wan to set the employee name in the empname div and employee number in the empnumber div.
Thanks in advance!
You need to traverse your XML dom:
function handleResponse(){
if(http.readyState == 4 && http.status == 200){
var xmlResponse = xmlHttp.responseXML;
root = xmlResponse.documentElement;
names = root.getElementsByTagName("empname");
numbs = root.getElementsByTagName("empnum");
for (var i = 0 ; i < numbs.length; i++) {
throw(names[i].firstChild.data, numbs[i].firstChild.data);
}
Then just pass over the variables to a function that will throw them in the document:
function throw(name , number) {
var divider = document.createElement('div') ;
divider.innerHTML = "<div class='name'>" + name + " </div> <div class='numb'>" + number +"</div>"
document.appendChild(divider);
}
And then you'll have it. A separate div for each of your entry.

Categories