Trouble with AJAX including PHP

[Pro2000]

Hello everybody, I've written a program which contains AJAX...
The program is a messenger...
The code was:

var http = createRequestObject();
function createRequestObject(){
    var request_;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        request_ = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        request_ = new XMLHttpRequest();
    }
    return request_;
}
function getInfo(){
    http.open('get', 'Rooms_Func.php?id=23');
    http.onreadystatechange = handleInfo;
    http.send(null);
}
function handleInfo(){
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById('ChtPlc').innerHTML = document.getElementById('ChtPlc').innerHTML+response;
    }
}

The problem was:
when the user selects a text ... the text becomes unselected automaticially !!
I think the mistake was in:

document.getElementById('ChtPlc').innerHTML = document.getElementById('ChtPlc').innerHTML+response;

What do you think??
Please help me quickly :(

[hielo]

From your problem description it is not clear if you have a select list within a div ( or some other element) with id="ChtPlc". At any rate, the following code should do what you are aiming if your HTML code is similar to the following:

<div id="ChtPlc">
<select onchange="getInfo();"><option value="1">alpha</option><option value="2">beta</option></select>
</div>

Your javascript codewould then be:

var http = createRequestObject();
function createRequestObject(){
	var request_=null;
	if( window.XMLHttpRequest )
		request_ = new XMLHttpRequest();
	else if( window.ActiveXObject)
		request_ = new ActiveXObject("Microsoft.XMLHTTP");
return request_;
}

function getInfo(){
    http.open('GET', 'Rooms_Func.php?id=23');
    http.onreadystatechange = handleInfo;
    http.send('');
}
function handleInfo(){
    if(http.readyState == 4){
        var response = document.createTextNode(http.responseText);
        document.getElementById('ChtPlc').appendChild(response);
    }
}

[Pro2000]

From your problem description it is not clear if you have a select list within a div ( or some other element) with id="ChtPlc". At any rate, the following code should do what you are aiming if your HTML code is similar to the following:

Thanks for trying to help, but that does not help! :)
I said I want to write a messenger
And the messenger does not need a (Select) :)
I hope you can help :-/

[digital-ether]

Attach DOM nodes to your Document instead of replacing innerHTML. Any text selection will disappear when you remove text, then replace it with new text.
When attaching DOM nodes, only the added HTML Node is injected into your HTML, and the text selection will remain. It will also not flicker in older browsers (innerHTML replacement on an element with overflow had that bug).

It is also more efficient when you'll run into a long list of element. Its easier to work with also as its actual DOM elements and not dead HTML injected via innerHTML.
Eg: if you get 1000 elements, you may want to trim the last one off, thats easier with actual dom nodes.

[Pro2000]

Attach DOM nodes to your Document instead of replacing innerHTML. Any text selection will disappear when you remove text, then replace it with new text.

Thanks, In your reply I see that you did not understand my question well, I do not want to remove a text and that is not my problem.
My problem is that the text being removed and being created automatically, So If you have the answer please give me it with one or two examples. :-/

[digital-ether]

Thanks, In your reply I see that you did not understand my question well, I do not want to remove a text and that is not my problem.
My problem is that the text being removed and being created automatically, So If you have the answer please give me it with one or two examples. :-/

I thought your problem was:

The problem was:
when the user selects a text ... the text becomes unselected automaticially !!

This will happen because of:

function handleInfo(){
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById('ChtPlc').innerHTML = document.getElementById('ChtPlc').innerHTML+response;
    }
}

you want to actually insert DOM nodes, not replace innerHTML.

function handleInfo(){
    if(http.readyState == 4){

        var response = http.responseXML; // get XML, not TXT

        document.getElementById('ChtPlc').addChild(response); // add Child Nodes, not innerHTML
    }
}

Where Element.addChild() is a pseudo function that will clone your XML and insert it as a child of document.getElementById('ChtPlc').

Sorry if I'm misreading your question? I can be a bit dim at times..

[Pro2000]

Sorry if I'm misreading your question? I can be a bit dim at times..

Thanks for helping, I'm going to try it.. thanks again. :)

[Pro2000]

I've done that but the HTML page says:
<<Error: Object doesn't support this property or method>>
This is the HTML page(ctb.htm):

<script src="gtcht.js"></script>
<script language="javascript">
	function GtInf()
	{
		getInfo();
                             window.setTimeout('GtInf()',1000);
	}
</script>
<body bgcolor="#FFFFFF" onload="GtInf()">
<div id="ChtPlc" name="ChtPlc">
</div>
</span>

</body>

And this is gtcht.js:

var http = createRequestObject();
function createRequestObject(){
    var request_;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        request_ = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        request_ = new XMLHttpRequest();
    }
    return request_;
}
function getInfo(){
    http.open('get', 'GtCht.php');
    http.onreadystatechange = handleInfo;
    http.send(null);
}
function handleInfo(){
    if(http.readyState == 4){
        var response = http.responseXML; // get XML, not TXT
        document.getElementById('ChtPlc').addChild(response); // add Child Nodes, not innerHTML
    }
}

[digital-ether]

Sorry if I wasn't clear. DOM nodes do not have a native addChild() method. You have a create a function that will do that for you.

See: http://www.quirksmode.org/blog/archives/2005/12/xmlhttp_notes_c.html

First try doing:

function handleInfo(){
    if(http.readyState == 4){
        var response = http.responseXML; // get XML, not TXT
        document.getElementById('ChtPlc').appendChild(response.documentElement.cloneNode(true)); // add Child Nodes, not innerHTML
    }
}

That will probably only work in Firefox. But its a starting point.

Another solution is to iterate through each xml Node in the response, recursively, and create the corresponding DOM elements in your Document.

eg:

/**
* Clones XML nodes to the current Document's DOM
*/
function cloneXMLtoDOM(Node) {
	var DOMNode;
	if (Node.nodeName == '#text') {
		DOMNode = document.createTextNode(Node.data);
	} else {
		// clone root node
		DOMNode = document.createElement(Node.nodeName);
		// clone the attributes
		for(var i = 0; i < Node.attributes.length; i++) {
			DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);
		}
		// recursively clone the child nodes
		if (Node.hasChildNodes()) {	
			for(var i = 0; i < Node.childNodes.length; i++) {
				DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));
			}
		}
	}
	return DOMNode;
}

I haven't tested that fully so there may be bugs. Tested in FF2.0, IE6 and IE7.

This is how you would implement it in your code:

// after including the cloneXMLtoDOM() function

function handleInfo(){
    if(http.readyState == 4){
        var response = http.responseXML; // get XML, not TXT
        document.getElementById('ChtPlc').appendChild(cloneXMLtoDOM(response.documentElement)); // add Child Nodes, not innerHTML
    }
}

A good DOM ref: http://www.howtocreate.co.uk/tutorials/javascript/domstructure