My Ajax Ready State Function doesnt fire in between

JavaScript
1 

//Next Ticket
function nextticket(flag,mode)
{
		nextticketid=document.formobject.nextticketid.value;
		currentticketid=document.formobject.currentticketid.value;
		xmlHttp=GetXmlHttpObject()
		if (xmlHttp==null)
		{
			alert ("Your browser does not support AJAX!");
			return false;
		}
		if((document.formobject.Missing.value==2) && (currentticketid==0))
		{
				alert ("No Current Ticket to be Tagged as Missing");
				document.getElementById("CallMissingTicketDiv").style.display="none";
				document.getElementById("TransferTicketDiv_Services").style.display="none";
				document.getElementById("TransferTicketDiv_Counter").style.display="none";
				with(document.formobject)
				{
					TransferSelection[0].checked=true;
					Transfer.value=1;
				}
				document.formobject.Missing.value=1;
				return false;
		}else if(document.formobject.Transfer.value==2)
		{
			if(document.formobject.Services.value==-1)
			{
				alert ("No Service Active to Transfer this Ticket");
				document.getElementById("CallMissingTicketDiv").style.display="none";
				document.getElementById("TransferTicketDiv_Services").style.display="none";
				document.getElementById("TransferTicketDiv_Counter").style.display="none";
				with(document.formobject)
				{
					TransferSelection[0].checked=true;
					Transfer.value=1;
				}
				return false;
			}
		}else if(document.formobject.Transfer.value==3)
		{
			if(document.formobject.Counters.value==-1)
			{
				alert ("No Counter Active to Transfer this Ticket");
				document.getElementById("CallMissingTicketDiv").style.display="none";
				document.getElementById("TransferTicketDiv_Services").style.display="none";
				document.getElementById("TransferTicketDiv_Counter").style.display="none";
				with(document.formobject)
				{
					TransferSelection[0].checked=true;
					Transfer.value=1;
				}
				return false;
			}
		}else if((document.formobject.CallMissingTicket.value==2) && (document.formobject.MissingTickets.value==-1))
		{
				alert ("No Missing Ticket Selected");
				return false;
		}
		if(flag==1)
		{
			MissingValue=document.formobject.Missing.value;
			if(MissingValue==2)
			{
				flag=2;	
			}
		}
		var current=document.getElementById("ticketserved").innerHTML;
		disablenextbutton();
		var url='nextticket.php';
		url=url+"?flag="+flag;
		url=url+"&mode="+mode;
		url=url+"&nextticketid="+nextticketid;
		url=url+"&currentticketid="+currentticketid;
		url=url+"&Transfer="+document.formobject.Transfer.value;
		url=url+"&TransferredServiceID="+document.formobject.Services.value;
		url=url+"&TransferredCounterID="+document.formobject.Counters.value;
		url=url+"&CallMissingTicket="+document.formobject.CallMissingTicket.value;
		url=url+"&MissingTickets="+document.formobject.MissingTickets.value;
		url=url+"&ServiceLoadedByCounter="+document.formobject.ServicesLoadedByCounter.value;
		url=url+"&sid="+Math.random();
		document.formobject.Missing.value=1;
		document.formobject.CallMissingTicket.value=1;
		document.formobject.Transfer.value=1;
		document.getElementById("trmissingtickets").style.display="none";
		document.getElementById("CallMissingTicketDiv").style.display="none";
		document.getElementById("MissingTicketCheckBox").checked=false;	
		document.getElementById("CallMissingTicketDiv").style.display="none";
		document.getElementById("TransferTicketDiv_Services").style.display="none";
		document.getElementById("TransferTicketDiv_Counter").style.display="none";
		document.getElementById("trservices").style.display="none";
		document.getElementById("trcounters").style.display="none";
		document.getElementById("trcounterservices").style.display="none";
		xmlHttp.open("GET",url,true);	
		xmlHttp.onreadystatechange=StateNextTicket;
		xmlHttp.send(null);
		setTimeout("enablenextbutton()",15000);
		return false;
}

//Ajax Display Function
function StateNextTicket()
{
		if (xmlHttp.readyState==4)
		{ 	
		
				var result=xmlHttp.responseText;
				var resultarray=result.split("----------!!!!!!________RSI_________!!!!!!!!--------");
				if(resultarray[1]=="No")
				{
					document.formobject.currentticketid.value=0;
					document.getElementById("ticketwaiting").innerHTML="No Ticket Waiting";
					document.getElementById("ticketserved").innerHTML="-";
					document.getElementById("totalticketwaiting").innerHTML="-";
					document.getElementById("referencenumber").innerHTML="-";
					getTicketWaitingAuto();
				}else if(resultarray[1]=="Yes")
				{
					document.formobject.currentticketid.value=resultarray[2];
					document.getElementById("ticketserved").innerHTML=resultarray[3];
					document.getElementById("referencenumber").innerHTML=resultarray[4];
					document.getElementById("totalticketwaiting").innerHTML=resultarray[5];
					getTicketWaitingAuto();
				}
		}
}

function enablenextbutton()
{
	document.getElementById("Next").disabled=false;
	document.getElementById("Destroy").disabled=false;
	document.getElementById("Recall").disabled=false;
	document.getElementById("Call").disabled=false;
	document.getElementById("MissingButton").disabled=false;
}

function disablenextbutton()
{
	document.getElementById("Next").disabled=true;
	document.getElementById("Destroy").disabled=true;
	document.getElementById("Recall").disabled=true;
	document.getElementById("Call").disabled=true;
	document.getElementById("MissingButton").disabled=true;
}

I am working on the above function - the problem is at times my rendering function doesnt update document.getElementById(“ticketserved”).innerHTML and it remains the same.

Any idea what could be the reason

2

In a quick glance, it seems the syntactically everything seems good and at least it should work. Though did you try to see (alert) the value of the variable ‘result’? If it has the corrected returned value then it should work quite fine as far as i know.

Is there any JS error in the error console?

BTW, I would really recommend using some well tested JS frameworks. jQuery AJAX is my favorite one which has good way of handling AJAX requests and returning data with callback functions.

3

Since you say that every once in a while it doesn’t update the #ticketserved element, probably best to eliminate the obvious first. Is resultarray[1] = “no” ?

For things like this I find the debugger keyword to be very helpful. If you add it above the test for resultarray[1] it will cause the Javascript debugger to break at that point letting you inspect the values for all the variables:


                var result=xmlHttp.responseText;
                var resultarray=result.split("----------!!!!!!________RSI_________!!!!!!!!--------");
[b]debugger;[/b]
                if(resultarray[1]=="No")
                {
                    document.formobje

Of course you can always set a breakpoint in the debugger itself which is more flexible since you can set conditions on it (break only when resultarray[1] == ‘no’). Don’t go into production with that debugger statement in the code.