Having one ajax request resulting in output on 2 different divs

[pyro]

Hi there,

I´m stuck with a problem and hopefully you can help me:

I am using ajax for a login form and need to return the feedback of the php code used at 2 different divs. So I thought I would let the php script return one text block that I would then split by javascript and pass each of the 2 blocks to the respective div, but somehow I can´t make it work.

Here is the code I use (thx go to Simone Rodriguez):

function xmlhttpPost(strURL,formname,responsemsg,responsediv,responsediv2) {

    var xmlHttpReq = false;

    var self = this;

    // Xhr per Mozilla/Safari/Ie7

    if (window.XMLHttpRequest) {

        self.xmlHttpReq = new XMLHttpRequest();

    }

    // per tutte le altre versioni di 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) {

			// Quando pronta, visualizzo la risposta del form
			window.alert("1");
			var siteFeedback = xmlHttp.responseText;
			window.alert("2");
			sfArr = siteFeedback.split("||");
            updatepage(sfArr[0],responsediv);
			if (sfArr[1] != null)
				{
	            updatepage(sfArr[1],responsediv2);					
				}

        }

		else{

			// In attesa della risposta del form visualizzo il msg di attesa
			updatepage(responsemsg,responsediv);

		}

    }

    self.xmlHttpReq.send(getquerystring(formname));

}

Now I was able to hunt the problem down that it obviously occurs between the alert box 1 and the alert box 2, which means on my screen keeps the ajax loading graphic, but the data wouldn´t be updated to the divs.

Now the update function is that (but I checked it and it works):

function updatepage(str,responsediv){
	window.scrollTo(0,0);
    document.getElementById(responsediv).innerHTML = str;
}

I would be really glad to get some pointers. Obviously the error needs to be happening at declaring the var, but since I am new to JS I cannot see an error there...

Thx :)

[Dormilich]

rename xmlHttp.respons eText (line #33) to self.xmlHttpReq .responseText.

[pyro]

great. works like a charm. thank you :)

[pyro]

I am obviously a super dummy concerning javascript :(

I now tried to make the script "better" by giving me the option to send answers from a script to several different divs. I tried doing so by introducing a pattern in responsediv so that each "|||" would be a split part and then by loop updating each div like below:

function xmlhttpPost(strURL,formname,responsemsg,responsediv) {
    var xmlHttpReq = false;
    var self = this;
	// Generate Array to send the responses to
	var rdArr = responsediv.split('|||');

    // Mozilla/Safari/Ie7
    if (window.XMLHttpRequest) 
		{
        self.xmlHttpReq = new XMLHttpRequest();
    	}

    // Other IEs
    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) 
			{
			// Get site Feedback
			var siteFeedback = self.xmlHttpReq.responseText;
			
			// Generate Arrays from respone
			var sfArr = siteFeedback.split('|||');

			// Durchlaufe Arrays und gib in den jeweiligen DIVs die Rückgaben
			for(var i=0;i<rdArr.length;i++)
				{
				//document.write("<b>sfArr["+sfArr[i]+"] AND rdArr["+rdArr[i]+"] <br><br><br><br>");
				updatepage(sfArr[i],rdArr[i]);
				}
     	   }
		else
			{
			// Show the loading text/gif in divs
			for(var i=0;i<rdArr.length;i++)
				{
				//document.write("<b>sfArr2["+responsemsg+"] AND rdArr2["+rdArr[i]+"] <br><br><br><br>");
				updatepage(responsemsg,rdArr[i]);
				}
			}
		}
    self.xmlHttpReq.send(getquerystring(formname));
	}

But thing is if I use the document.write thingy for debuging everything works fine, but if I use the updatepage function it would show the content in div1, but never the content of div2 giving that error message in firebug 3 times in a row per one request:

document.getEle mentById(respon sediv) is null
document.getEle mentById(respon sediv).innerHTM L = str;

Please enlighten me where I went wrong :)

[Dormilich]

Please enlighten me where I went wrong :)

here:

But thing is if I use the document.write thingy for debuging

you can’t debug something with document.write( ) (esp. nothing like AJAX) that runs after page load. use console.log() instead.

[pyro]

ok tried by console log so firebug doesn´t give me the errors from before but shows everything fine in the firebug log, still the 2nd div isn´t adjusted somehow...

[Dormilich]

if you have Firebug, you can set break points to inspect the values at the current position.

[pyro]

well in fact the console feedbacks are right after using them in the function updatepage() like that:

				console.log("<b>sfArr["+sfArr[i]+"] AND rdArr["+rdArr[i]+"]");
				//updatepage(sfArr[i],rdArr[i]);

and the function updatepage is just 1 line:

function updatepage(str,responsediv)
	{
	//window.scrollTo(0,0);
    document.getElementById(responsediv).innerHTML = str;
	}

whenever I replace the console by the function which is commented out now it doesn´t work any more and gives error messages as described above...
so somehow I don´t understand it....

[pyro]

Found the error!!! :) I am really dumb... the 2nd div I wanted to sent the results to always had a class attribute but no id attribute and I misread class for id....

thx for your time Dormilich :)