We Keep Coding

Javascript function is not working as expected

I have a function which is not working is expected.
The problem is that, I have set
if (Trim(ObjPriXMLHTTP.responseText) != 0) then it should go inside and run another function, which is not going currently when my if (Trim(ObjPriXMLHTTP.responseText) != 0) == 1.
The debugger just throws me out of the parent function.
I want that to run when value is other than 0
Below is my js function
function getCounterForCheck() {
StrPriFnName = "getCounterForCheckInward(" + document.getElementById('TxtInwardNo').value + ")";
var ObjPriXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP")
ObjPriXMLHTTP.open("GET", "FrmInwardXMLHTTP.aspx?para=" + StrPriFnName, false);
ObjPriXMLHTTP.send("");
if (Trim(ObjPriXMLHTTP.responseText) != 0) {
function getOtherDBInward() {
StrPriFnName = "FunGetOTHERDBInward(" + document.getElementById('TxtInwardNo').value + ")";
var ObjPriXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP")
ObjPriXMLHTTP.open("GET", "FrmInwardXMLHTTP.aspx?para=" + StrPriFnName, false);
ObjPriXMLHTTP.send("");
if (Trim(ObjPriXMLHTTP.responseText) != "") {
var StrPriData = ObjPriXMLHTTP.responseText.split('~');
document.getElementById('HidRefMkey').value = StrPriData[0];
document.getElementById('TxtDeliveredBy').value = StrPriData[1];
document.getElementById('cmbRecdDept').value = StrPriData[2];
FunEmpFillDept();
document.getElementById('cmbRecdEmp').value = StrPriData[3];
document.getElementById('HidCurrentEmp').value = StrPriData[3];
document.getElementById('Txt_RefBillNo').value = StrPriData[6];
igdrp_getComboById("DtmInfRef_DocDate").setValue(Trim(StrPriData[7]));
igedit_getById("TxtWN_Billamt").setValue(StrPriData[8]);
document.getElementById('TxtRemarks').value = StrPriData[9];
document.getElementById('TxtPartyName').value = StrPriData[10];
}
else {
alert("ERROR: Document does not exist");
//alert("ERROR: Document does not exist and status also");
document.getElementById('TxtInwardNo').focus();
return false;
}
}
}
else {
//alert('invoice not found');
}
}

There are a couple of issues with that code.
Until ES2015, it was invalid to declare a function inside a flow-control block (like the body of an if), and it remains a Really Bad Idea™. But that's what your code is doing.
You've declared the function, but you haven't called it. So stepping right out is exactly what the debugger should do; there was nothing left to do in getCounterForCheck.
In comments, you've said Trim(ObjPriXMLHTTP.responseText) will return "1" or "0" (e.g., strings). But you're comparing that to 0 (the number). Since you're using loose comparison (!=), JavaScript will coerce the value for you, and in this particular case it will do so in the way you're probably expecting. I raise it just because it might make sense for Trim to explicitly convert the value and return 1 or 0 (e.g., as numbers).
Declare the function outside the if block, and call it if you want to call it. Something like:
function getCounterForCheck() {
StrPriFnName = "getCounterForCheckInward(" + document.getElementById('TxtInwardNo').value + ")";
var ObjPriXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP")
ObjPriXMLHTTP.open("GET", "FrmInwardXMLHTTP.aspx?para=" + StrPriFnName, false);
ObjPriXMLHTTP.send("");
if (Trim(ObjPriXMLHTTP.responseText) != 0) {
getOtherDBInward();
}
else {
//alert('invoice not found');
}
function getOtherDBInward() {
StrPriFnName = "FunGetOTHERDBInward(" + document.getElementById('TxtInwardNo').value + ")";
var ObjPriXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP")
ObjPriXMLHTTP.open("GET", "FrmInwardXMLHTTP.aspx?para=" + StrPriFnName, false);
ObjPriXMLHTTP.send("");
if (Trim(ObjPriXMLHTTP.responseText) != "") {
var StrPriData = ObjPriXMLHTTP.responseText.split('~');
document.getElementById('HidRefMkey').value = StrPriData[0];
document.getElementById('TxtDeliveredBy').value = StrPriData[1];
document.getElementById('cmbRecdDept').value = StrPriData[2];
FunEmpFillDept();
document.getElementById('cmbRecdEmp').value = StrPriData[3];
document.getElementById('HidCurrentEmp').value = StrPriData[3];
document.getElementById('Txt_RefBillNo').value = StrPriData[6];
igdrp_getComboById("DtmInfRef_DocDate").setValue(Trim(StrPriData[7]));
igedit_getById("TxtWN_Billamt").setValue(StrPriData[8]);
document.getElementById('TxtRemarks').value = StrPriData[9];
document.getElementById('TxtPartyName').value = StrPriData[10];
}
else {
alert("ERROR: Document does not exist");
//alert("ERROR: Document does not exist and status also");
document.getElementById('TxtInwardNo').focus();
return false;
}
}
}
I haven't looked closely at the function, but if it doesn't have to be nested inside getCounterForCheck, you might move it out.

Maintain scroll position in list

I have a select list, which is populated with my logfile. Every second javascript sends GET request to the server which reads the log file and populates the list. But after every GET request, the list scrolls back to top. What I want to do is to make the requests don't affect the scroll so I can freely scroll through the list.
<select id = "list" name=servers size=38 style=width:1028px>
<script type="text/javascript">
window.onload = function () {
if (bytes === undefined) {
var bytes=0;
}
var url = "/test/log.php?q=";
function httpGet(url)
{
var xhttp = new XMLHttpRequest();
xhttp.open("GET", url, true);
xhttp.onload = function (e) {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
var list = "";
console.log(xhttp.responseText);
obj = JSON.parse(xhttp.responseText);
for(var key in obj) {
list += obj[key];
if (sessionStorage.logfile == null) {
sessionStorage.logfile == "Log";
}
}
bytes = parseInt(list);
document.getElementById("list").innerHTML = sessionStorage.logfile + list;
sessionStorage.logfile += list;
}
};
xhttp.onerror = function (e) {
console.error(xhttp.statusText);
}
};
xhttp.send();
}
var updateInterval = 1000;
function update() {
httpGet(url + bytes);
setTimeout(update, updateInterval);
}
update();
}
</script>

Maybe you should use SSE,check this:
http://www.w3schools.com/html/html5_serversentevents.asp, but if you just need to make the code works, here is how:
<select id = "list" name=servers size=38 style=width:1028px>
<script type="text/javascript">
//here, a new global var to keep the index;
var old_index=-1;
window.onload = function () {
//every change on select list, we register in this function..
document.getElementById("list").onchange = keepValue;
if (bytes === undefined) {
var bytes=0;
}
var url = "/test/log.php?q=";
function httpGet(url)
{
var xhttp = new XMLHttpRequest();
xhttp.open("GET", url, true);
xhttp.onload = function (e) {
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
var list = "";
console.log(xhttp.responseText);
obj = JSON.parse(xhttp.responseText);
for(var key in obj) {
list += obj[key];
if (sessionStorage.logfile == null) {
sessionStorage.logfile == "Log";
}
}
bytes = parseInt(list);
document.getElementById("list").innerHTML = sessionStorage.logfile + list;
sessionStorage.logfile += list;
//here, back it to the old selected index
//when old_index=-1, means first execution
if (old_index==-1)
{old_index = document.getElementById("list").length-1;}
document.getElementById("list").selectedIndex = old_index;
}
};
xhttp.onerror = function (e) {
console.error(xhttp.statusText);
}
};
xhttp.send();
}
var updateInterval = 1000;
function update() {
httpGet(url + bytes);
//i will not change your logic here, but you can write it using setInterval instead.
setTimeout(update, updateInterval);
}
update();
}
//here, the function to register the list index
function keepValue(evt)
{
old_index = evt.target.selectedIndex;
//or document.getElementById('list').selectedIndex;
}
</script>
EDIT:
ResponseText is in JSON format.
{"key":"2186 <option> 18:42:19.716 7963 [DEBUG main() cnet.cpp:167] Using public ip: 192.168.0.107 </option>
<option> 18:42:19.716 7963 [DEBUG main() cnet.cpp:168] Using local ip: 192.168.0.107 </option>
<option> 18:42:19.717 7963 [DEBUG init() redis.cpp:75] Initializing redis client application </option>"}

passing variale to javascript callback function

Faced a problem with passing a variable into javascript callback function. Can't understand, why it doesn't work.
Here is the code. I pass variable 'i' through many functions. 'function1' is just an example, there is a big piece of code.
also the code in callback, 'var tmpl' is just an example, don't pay attention to that. The problem is why i can't pass 'i' variable.
function function1() {
for (var i = 0; i < 10; i++){
RequestData(i);
}
}
function RequestData(i, callback){
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getitemID='+i, true);
xhr.send();
xhr.onreadystatechange = function() { // (3)
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else {
alert(xhr.responseText);
callback(JSON.parse(xhr.responseText));
}
xhr.close();
}
}
RequestData(i, function (json) {
alert('here!');
var tmpl = [
'<div id="content"><div id="bodyContent">',
'<button onclick="RequestData("+i+")">Load Data!</button></div>',
'<div>#here!</div>'
].join('');
var body = document.querySelector('body');
alert(body);
for (var i = 0; i < json.length; i++) {
var html = tmpl.replace('#here!', json[i].itemid);
body.insertAdjacentHTML('afterbegin', html);
}
});
if i try to calling callback like this: function RequestData(i, callback) {- i get 'unresolved type or variable 'i'' error, and callback doesn't work. else if i do not pass 'i' in callback - i do not get this error, but looks like callback doesn't work too, because this code for callback don't work RequestData(function (json) { alert('here!');} - i don't receive a message 'here', but no errors. in both situations callback call is: callback(JSON.parse(xhr.responseText));

First of all, i is undefined because you are calling RequestData(i, function()), while i is not defined.
You only call RequestData from function1() but that method is never executed and never has a callback specified.
To make it work, remove the RequestData(i) call from function1(). Then put the method call RequestData(i, function (json) { inside the the for loop. Finally call function1() and you will get your result. (not with clean code though).
function function1() {
for (var i = 0; i < 10; i++){
RequestData(i, function (json) {
alert('here!');
var tmpl = [
'<div id="content"><div id="bodyContent">',
'<button onclick="RequestData("+i+")">Load Data!</button></div>',
'<div>#here!</div>'
].join('');
var body = document.querySelector('body');
alert(body);
for (var i = 0; i < json.length; i++) {
var html = tmpl.replace('#here!', json[i].itemid);
body.insertAdjacentHTML('afterbegin', html);
}
});
}
}
function RequestData(i, callback){
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getitemID='+i, true);
xhr.send();
xhr.onreadystatechange = function() { // (3)
if (xhr.readyState != 4) return;
if (xhr.status != 200) {
alert(xhr.status + ': ' + xhr.statusText);
} else {
alert(xhr.responseText);
callback(JSON.parse(xhr.responseText));
}
//xhr.close(); // this is not an existing function
}
}
// run the for loop by calling this method
function1();

Calling to ajax multiple times from javascript

for(var x=0 ; x<=23 ; x++)
{
AjaxRequest16 = null;
AjaxRequest16 = getXmlHttpRequestObject(); // method here to load the request
if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0)
{
AjaxRequest16.open("GET", "ajax.php?id=16&AreaID=" +encodeURIComponent(AreaID)+ "&month="
+encodeURIComponent(document.getElementById("cboMonths").value)+ "&TimeSlot=" +encodeURIComponent(x), true);
AjaxRequest16.send(null);
AjaxRequest16.onreadystatechange = function()
{
if(AjaxRequest16.readyState == 4)
{
var innerHTML = AjaxRequest16.responseText.toString();
/* Retrieve data from the server and display. */
document.getElementById("divTime"+x).innerHTML = innerHTML;
}/* end if */
}/* end function */
}/* end if */
}/* end if */
I'm trying to call ajax multiple times to load data in a set of divs: 24 of them, they start with divTime0, divTime1, divTime2, divTime3...... divTime23. Each time its called, the value for the TimeSlot corresponds with the div e.g. TimeSlot=0 goes in divTime0.
I know the ajax calls here are overriding each other but have no idea how to solve it without writing out 24 blocks of code to get it working. N.B. this is working if i execute singularly without the for loop but it will just populate 1 of the 24 divs
The following code worked to load 24 divs with images:
for(var x=0 ; x<=23 ; x++)
document.getElementById("timeanalysisimg"+x).src="ajax.php?id=15&AreaID=" +encodeURIComponent(AreaID);
I'm trying to do something similar without having to write unnecessary code. Any ideas?
I got it working. Just pasting the solution
for(var x=0 ; x<=9 ; x++)
{
test(x, AreaID); // calling the function which resides externally to the loop
}
An external method:
function test(x, AreaID)
{
var AjaxRequest16 = null;
AjaxRequest16 = getXmlHttpRequestObject();
if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0)
{
AjaxRequest16.open("GET", "ajax.php?id=16&AreaID=" +encodeURIComponent(AreaID)+ "&month="
+encodeURIComponent(document.getElementById("cboMonths").value)+ "&TimeSlot=" +encodeURIComponent(x), true);
AjaxRequest16.send(null);
AjaxRequest16.onreadystatechange = function()
{
if(AjaxRequest16.readyState == 4)
{
var innerHTML = AjaxRequest16.responseText.toString();
/* Retrieve data from the server and display. */
document.getElementById("divTime"+x).innerHTML = innerHTML;
}
}
}
}

Put the block into a function:
for(var x=0 ; x<=23 ; x++)
{
(function(x) {
var AjaxRequest16 = getXmlHttpRequestObject();
//rest of the code
}(x));
} //end of for loop

you can do something like:
for(var x=0 ; x<=23 ; x++)
{
req(x);
}
function req(x){
var AjaxRequest16 = null;
AjaxRequest16 = getXmlHttpRequestObject(); // method here to load the request
if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0)
{
AjaxRequest16.open("GET", "ajax.php?id=16&AreaID=" +encodeURIComponent(AreaID)+ "&month="
+encodeURIComponent(document.getElementById("cboMonths").value)+ "&TimeSlot=" +encodeURIComponent(x), true);
AjaxRequest16.send(null);
AjaxRequest16.onreadystatechange = function()
{
if(AjaxRequest16.readyState == 4)
{
var innerHTML = AjaxRequest16.responseText.toString();
/* Retrieve data from the server and display. */
document.getElementById("divTime"+x).innerHTML = innerHTML;
}/* end if */
}/* end function */
}/* end if */
}

I changed all the code, but it does exactly what you want, without using asynchronous = false, and browser freezing:
function ajaxRequest(url, callback) {
var req = null;
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) // if IE
{
try {
req = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
}
} else {
throw ("No Ajax support!");
return;
}
req.open('GET', url, true);
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (typeof (callback) == "function") callback(req);
}
};
req.send(null);
return req;
}
function loadMyData() {
var x = parseInt(arguments[0]);
if (x > 23) {
alert("all 24 is loaded!");
}
var url = "ajax.php?id=16&AreaID=" + encodeURIComponent(AreaID) +
"&month=" + encodeURIComponent(document.getElementById("cboMonths").value) +
"&TimeSlot=" + encodeURIComponent(x);
var callback = Function('req', 'document.getElementById("divTime' + x + '").innerHTML =' +
' req.responseText;' +
'loadMyData(' + x + ');');
ajaxRequest(url, callback);
}
loadMyData(0);

you should make your ajax calls asenkron false try this:
for(var x=0 ; x<=23 ; x++)
{
AjaxRequest16 = null;
AjaxRequest16 = getXmlHttpRequestObject(); // method here to load the request
if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0)
{
AjaxRequest16.open("GET", "ajax.php?id=16&AreaID=" +encodeURIComponent(AreaID)+ "&month="
+encodeURIComponent(document.getElementById("cboMonths").value)+ "&TimeSlot=" +encodeURIComponent(x), false);
AjaxRequest16.send(null);
AjaxRequest16.onreadystatechange = function()
{
if(AjaxRequest16.readyState == 4)
{
var innerHTML = AjaxRequest16.responseText.toString();
/* Retrieve data from the server and display. */
document.getElementById("divTime"+x).innerHTML = innerHTML;
}/* end if */
}/* end function */
}/* end if */
}/* end if */

Sequentially load content with ajax
here is a simple ajax function for modern browsers (chrome,safari,ie10,android,ios)
function ajax(a,b,c){//url,function,just a placeholder
c=new XMLHttpRequest;
c.open('GET',a);
c.onload=b;
c.send()
}
and this is how you load content sequentially
var current=0,
x=23;
function handler(){
document.getElementById("divTime"+current).innerHTML=this.response;
current++
if(current<x){
ajax('url.php?id='+current,handler)
}
}
ajax('url.php?id='+current,handler);
this way you don't overwrite previous ajax calls.
Multiple simultaneous ajax calls is a bad solution.
anyway to achieve multiple ajax calls at the same time you need to create multiple ajax request functions.
var ajaxcall=[];
ajaxcall[0]=new XMLHttpRequest;
ajaxcall[0].CUSTOMID=0;
ajaxcall[0].open('GET','url.php?id='+0);
ajaxcall[0].onload=function(){console.log(this.CUSTOMID,this.response)};
ajaxcall[0].send();

What it boils down to is the asynchronous nature of Ajax calls.
Each Ajax context must be kept alive until the request is over (completion or failure).
In your initial code, you use only one Ajax request context. The loop launches the first request, but then overwrites its context immediately with the second one long before the first was processed. When the server responds (a few milliseconds later), there is no handler left on the browser side to process the response (except for the 24th one).
What your workaround does is to create a different context and callback for each request, since your global function stores them in different closures.
However, as a result you will fire a hail of 24 Ajax requests simultaneously on the server, which is likely to cause unnecessary overhead, or even crashes if your PHP script does not expect to execute concurrently on the same request. Besides, synchronizing your code on completion of these requests will not be easy.
Here is what I use for my own apps :
// --------------------------------------------------------------------
// Ajax lite
// --------------------------------------------------------------------
function PageCache (target, void_contents)
{
this.text = {};
this.req = {};
this.void_contents = void_contents || 'void';
this.target = target;
}
PageCache.prototype = {
// synchronous load
load: function (page)
{
if (!this.text[page]) this.text[page] = this._launch_request (page);
return this.text[page];
},
// asynchronous load
fetch: function (page, action)
{
if (this.text[page])
{
action (this, page);
return;
}
if (this.req[page]) return;
this.req[page] = this._launch_request (page,
function(_this, _page, _action) {
return function(){
_this._loader(_page,_action);
};
}(this,page,action));
},
_launch_request: function (page, callback)
{
var req;
try {
req = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
req.open('GET', this.target.replace (/\$/, page), callback!=undefined);
if (callback) req.onreadystatechange = callback;
req.send(null);
return callback ? req : this._get_result (req);
},
_get_result: function (req)
{
return (req.status < 400)
? req.responseText
: this.void_contents;
},
_loader: function (page, action)
{
if (!this.req[page] || (this.req[page].readyState != 4)) return;
this.text[page] = this._get_result (this.req[page])
delete this.req[page];
if (action) action (this.text[page], page);
}
}
In your example, you could use it like so:
First, a bit of cleanup :
function compute_id (AreaID,x) {
return "id=16&AreaID="
+ encodeURIComponent(AreaID)
+ "&month="
+ encodeURIComponent(document.getElementById("cboMonths").value)
+ "&TimeSlot="
+ x; // I suspect all the encodeURIComponent() calls are unnecessary
}
var Ajax = new PageCache (
'ajax.php?$', // '$' will be replaced with fetch() parameter
'error loading data'); // contents in case of request failure
1) simultaneous requests (not recommended)
for (var x = 0; x != 24 ; x++) {
// store current x value in a closure
var request_done = function (_x) {
return function (responseText) {
document.getElementById("divTime"+_x).innerHTML = responseText;
}}(x);
}
Ajax.fetch (compute_id (AreaID,x), request_done);
}
2) sequential blocking requests (very bad, don't do it unless your code cannot proceed without the data)
for (var x = 0; x != 24 ; x++) {
document.getElementById("divTime"+x).innerHTML =
Ajax.load (compute_id (AreaID,x));
}
3) sequential non-blocking requests
var AjaxCtx = { x:0, max:24};
// launch first request
Ajax.fetch (compute_id (AreaID, AjaxCtx.x), request_done);
function request_done (responseText) {
document.getElementById("divTime"+AjaxCtx.x).innerHTML = responseText;
// request completion triggers the next
if (++AjaxCtx.x != AjaxCtx.max)
Ajax.fetch (compute_id (AreaID,AjaxCtx.x), request_done);
}

Why HourGlass not working with synchronous AJAX request in Google Chrome?

I am executing a function where first I am making cursor to wait state(hourglass) and then I am sending a synchrounous AJAX request .After getting the response I am making cursor to default state.
The Actual Code is this..
// tests the smtp settings
function TestSettings()
{
var buttonparams= new Object();
buttonparams.IsCommandButton = true;
buttonparams.ButtonId = "testsettings";
buttonparams.ButtonText = "Sending Test Mail...";
buttonparams.ButtonOrigText = "Test Settings";
if(buttonparams.IsCommandButton == true)
HandleButtonStatus(true, buttonparams);
var request = function()
{
var ret = SendForm(buttonparams);
alert(ret);
}
window.setTimeout(request, 0);
}
function SendForm(pButtonParams)
{
var http;
var formdata;
http = yXMLHttpRequest();
http.open("POST", "./", false);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.setRequestHeader("Req-Type", "ajax");
formdata = xEncodePair("_object", "PrefMgr")+ "&";
formdata += xEncodePair("_action", "SmtpTest")+ "&";
formdata += GetEncodedFormData();
http.send(formdata);
if(http.status == 200)
{
if(pButtonParams.IsCommandButton == true)
HandleButtonStatus(false, pButtonParams);
return (http.responseText);
}
else
{
return ("Error " + http.status + ": " + http.statusText);
}
}
function HandleButtonStatus(pIsButtonStatusChange, pButtonParams)
{
var button = yById(pButtonParams.ButtonId);
if(pIsButtonStatusChange)
{
document.body.style.cursor = "wait";
button.value = pButtonParams.ButtonText;
button.disabled = true;
}
else
{
document.body.style.cursor = "default";
button.disabled = false;
button.value = pButtonParams.ButtonOrigText;
}
}

Try to assign:
var st = document.body.style;
and then refer to st in both functions. This could be a scope issue in AJAX callback function.
EDIT: Use callback function to restore cursor shape. Don't forget to do the same in case AJAX call fails.