We Keep Coding

selection in a loop freezes my page

i'm a complete newbie when it comes to Js, trying to make some very simple script that takes a string of binary numbers from a txt document on my server using ajax, to then put it in a string var and change the first 0 it finds in a 1, using an if construct inside a loop.
Problem is, when the page tries to execute the if line, it simply freezes. Taking the same if construct out of the loop, the script is executed no problem, so i'm guessing it has something to do with either that or/and some fundamental misunderstanding of how Js scripts works in the first place.
Here is the script:
function loadPos()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
document.getElementById("demo").innerHTML = this.responseText;
};
xhttp.open("GET", "posizioni.txt", true);
xhttp.send();
}
function takeFirst()
{
var i=0;
var check=false;
var oldPos=[];
loadPos();
oldPos = document.getElementById("demo").innerHTML;
for(i=0;!check||i<10;i++)
{
if(oldPos[i]=="0")
{
oldPos[i]="1";
check=true;
}
}
document.getElementById("demo").innerHTML=oldPos;
}

I don't see any use of loop in it if you can achieve the same without it. Please update your function to the following:
function takeFirst()
{
loadPos();
var oldPos = document.getElementById("demo").innerHTML;
if(oldPos.indexOf("0") > -1){
oldPos = oldPos.replace('0', '1');
}
document.getElementById("demo").innerHTML = oldPos;
}

I think you want for(i=0;!check && i<10;i++).
But there is another way to do this using break;
function loadPos()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
document.getElementById("demo").innerHTML = this.responseText;
};
xhttp.open("GET", "posizioni.txt", true);
xhttp.send();
}
function takeFirst()
{
var i=0;
var oldPos=[];
loadPos();
oldPos = document.getElementById("demo").innerHTML;
for(i=0;i<10;++i)
{
if(oldPos[i]=="0")
{
oldPos[i]="1";
break;
}
}
document.getElementById("demo").innerHTML=oldPos;
}

Api Call Ajax n seconds GET request

The API shows live values and changes very frequently, so I am trying to make a call every second and show it to the webpage.
I tried a get request call every N seconds using set_interval() but the values load only once and don't make a call again.
<p id="val"></p>
<p id="val2"></p>
<p id="val3"></p>
<script>
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = myFunction(xhttp);
function myFunction() {
if (xhttp.readyState == 4) {
var xmlDoc = xhttp.responseXML;
var val1= xmlDoc.getElementsByTagName('value_1')[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML =
v3.nodeValue;
document.getElementById('val').innerHTML =
v1.nodeValue;
document.getElementById('val2').innerHTML =
v2.nodeValue;
}
}
myFunction();
setInterval(myFunction, (1000));
</script>

var xhttp = new window.XMLHttpRequest();
here xhttp object create once when the script is running And you get proper output for one time. So you need to call this after 1 second.
function myFunction() {
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4) {
var xmlDoc = xhttp.responseXML;
var val1=xmlDoc.getElementsByTagName('value_1'[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML=v3.nodeValue;
document.getElementById('val').innerHTML=v1.nodeValue;
document.getElementById('val2').innerHTML=v2.nodeValue;
}
}
setInterval(myFunction,(2000));
Happy coding :)

Try this:
function myFunction() {
function foo(){ alert("Hello"); }
setTimeout(myFunction, 1000);
foo();
}
myFunction();

The code to make the API call is outside the function.
function myFunction()
{
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = myFunctionRes(xhttp);
}
function myFunctionRes()
{
if (xhttp.readyState == 4)
{
var xmlDoc = xhttp.responseXML;
var val1= xmlDoc.getElementsByTagName('value_1')[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML =
v3.nodeValue;
document.getElementById('val').innerHTML =
v1.nodeValue;
document.getElementById('val2').innerHTML =
v2.nodeValue;
}
}
setInterval(myFunction, (1000));

Trouble with having global JavaScript variables updated

I am trying to get a XML document sorted and decided to go for the "sort via XSLT" approach.
However, I am having trouble updating my two global variables that should contain the content of the XML and XSLT files and I can't really figure out why.
Up until now I never had this kind of problem and global variables used to work... I also didn't declare them inside the functions, but used the global name instead and also tried using window.variable, but to no avail.
Does anyone have an idea why the code doesn't update the global variable?
best regards,
daZza
<script type="text/javascript">
var xml = "";
var xsl = "";
function callSort()
{
loadSortXML();
loadSortXSLT();
sortXML();
}
function loadSortXML()
{
var xmlHttp = null;
var xmlData;
var xmlFile = "data/LessonsLearned.xml";
if (typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp)
{
try
{
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e)
{
xmlHttp = null;
}
}
}
if (xmlHttp)
{
var url = xmlFile;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
xml = xmlHttp.responseXML;
}
}
xmlHttp.send();
}
}
function loadSortXSLT()
{
var xmlHttp = null;
var xmlData;
var xmlFile = "data/xslt.xml";
if (typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp)
{
try
{
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e)
{
xmlHttp = null;
}
}
}
if (xmlHttp)
{
var url = xmlFile;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
xsl = xmlHttp.responseXML;
}
}
xmlHttp.send();
}
}
function sortXML()
{
console.log("XML " + xml);
console.log("XSL "+ xsl);
var parser = new DOMParser();
var domToBeTransformed = parser.parseFromString(xml, "text/xml");
var xslt = parser.parseFromString(xsl, "text/xml");
var processor = new XSLTProcessor();
processor.importStylesheet(xslt);
var newDocument = processor.transformToDocument(domToBeTransformed);
var serializer = new XMLSerializer();
var newDocumentXml = serializer.serializeToString(newDocument);
alert(newDocumentXml);
}
</script>

Javascript Functions Confusing AJAX Responses from CGI Request/Response

I have 3 Javascript functions called from the body onload in the HTML page.
Each Javascript function is contained in it's own Javascript file. Each Javascript file corresponds to another CGI script on the server.
The bodyonload.js looks like:
function bodyOnload() {
getElementsA();
getElementsB();
getElementsC();
}
Each getElements function simply calls a CGI script to get the contents for 3 different selectboxes.
The problem is that as all 3 functions are called asynchronously the select boxes are getting the wrong results. It's almost like the 3 functions are stepping on each other and putting the CGI responses in the wrong selectbox. I know the CGI responses are correct. This works fine if I serially call each function from the others. Like calling the 2nd function from the first and the 3rd function from the second. The asynchronous nature of them running at the same time seems to cause the problem.
This is the general code for each javascript file that contains the getElements functions.
function getElementsA() {
strURL = "http://test.com/scriptA.cgi";
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
fillselectboxA(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send();
}
function fillselectboxA(str)
{
document.getElementById("selectBoxA").length=0;
var results = new Array();
results = str.split(/\n/);
var size = results.length;
var select = document.getElementById("selectBoxA");
for (x=0;x<size;x++)
{
var element = results[x];
select.options.add(new Option(element, x))
}
}
-------------------
function getElementsB() {
strURL = "http://test.com/scriptB.cgi";
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form- urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
fillselectboxB(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send();
}
function fillselectboxB(str)
{
document.getElementById("selectBoxB").length=0;
var results = new Array();
results = str.split(/\n/);
var size = results.length;
var select = document.getElementById("selectBoxB");
for (x=0;x<size;x++)
{
var element = results[x];
select.options.add(new Option(element, x))
}
}
------------------------
function getElementsC() {
strURL = "http://test.com/scriptC.cgi";
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
fillselectboxC(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send();
}
function fillselectboxC(str)
{
document.getElementById("selectBoxC").length=0;
var results = new Array();
results = str.split(/\n/);
var size = results.length;
var select = document.getElementById("selectBoxC");
for (x=0;x<size;x++)
{
var element = results[x];
select.options.add(new Option(element, x))
}
}

It's almost like the 3 functions are stepping on each other
That's exactly what's happening, you're overwriting the onreadystatechange handler set on getElementsA when you call getElementsB, and then again when you call getElementsC. That's because this and self are the global object in all three functions (assuming they're all similar to getElementsA).
You can circumvent that by changing your function calls to object instantiation:
function bodyOnload() {
new getElementsA();
new getElementsB();
new getElementsC();
}

Parsing or using variables from a called script?

I have an AJAX function which loads content from a file and displays in the file that called it.
But the script that was called I want to loop an array which is actually set in the script that called it... this is main script that calls the file:
function call_file(file, div_id) {
var xmlhttp;
if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(div_id).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", file, true);
xmlhttp.send();
}
var global = new Array();
global[0] = 1;
global[1] = 2;
call_script('html.html', 'main');
html.html is the file that is called which has this:
<script>
i = 0;
for(var id in global) {
alert(i + ' = ' + id);
i++;
}
</script>
Is this at all possible?

One way is to extract the script and eval it yourself. For example:
//....
document.getElementById(div_id).innerHTML = xmlhttp.responseText;
var str = xmlhttp.responseText;
var reg = /<script>([^>]*)<\/script>/img;
while(reg.test(str))eval(RegExp.$1);
//...