Load results script

[John84]

Before I go on, lemme just say that I don't know squat about javascript. That being said...

I am using the following javascript to load results onto my page...

var xml = xmlObject();
var url;
var button;
var result;
function xmlObject () {
	if (typeof XMLHttpRequest == 'undefined') {
		objects = Array(
			'Microsoft.XmlHttp',
			'MSXML2.XmlHttp',
			'MSXML2.XmlHttp.3.0',
			'MSXML2.XmlHttp.4.0',
			'MSXML2.XmlHttp.5.0'
		);
		for (i = 0; i < objects.length; i++) {
			try {
				return new ActiveXObject(objects[i]);
			} catch (e) {}
		}
	} else {
		return new XMLHttpRequest();
	}
}
function resultElement () {
	if (!document.getElementById('result')) {
		result = document.createElement('div');
		result.id = 'result';
		document.body.appendChild(result);
	}
}
function handleResults () {
	if (xml.readyState == 4) {
		if (xml.responseText == 'url.blank') {
			result.innerHTML = 'Enter a valid URL';
		} else {
			result.innerHTML = xml.responseText;
		}
	} else {
		result.innerHTML = 'Loading..';
	}
}
function getResults () {
	resultElement();
	xml.open('get', 'results.php?url=' + escape(url.value));
	xml.onreadystatechange = handleResults;
	xml.send(null);
}
function loadHandler () {
	url = document.getElementById('url');
	button = document.getElementById('button');
	button.onclick = getResults;
}
window.onload = loadHandler;

problem is, the results are loading at the bottom of my page. Is there a way to make it load in a specified div?

 

[w1ww]

function handleResults () {
if (xml.readyState == 4) {
if (xml.responseText == 'url.blank') {
result.innerHTML = 'Enter a valid URL';
} else {
result.innerHTML = xml.responseText;
}

Something like: $('DIVTHATYOUWANT').innerHTML = xml.responseText;

instead of result.innerHTML = xml.responseText; !

But I'm not an expert in AJAX so, best of luck ! Don't forget to identify the div with id="NAME"

Let me know the result

 

[John84]

didnt work =(

ive narrowed it down to this portion...

function resultElement () {
	if (!document.getElementById('result')) {
		result = document.createElement('div');
		result.id = 'result';
		document.body.appendChild(result);
	}
}

... instead of creating a div I would like it to load on an existing div

Test page is here

 

[3l3ctr1c]

Check this out :

var xml = makeXML();
var form;
var loading;
var results;
function makeXML () {
	if (typeof XMLHttpRequest == 'undefined') {
		objects = Array(
			'Microsoft.XmlHttp',
			'MSXML2.XmlHttp',
			'MSXML2.XmlHttp.3.0',
			'MSXML2.XmlHttp.4.0',
			'MSXML2.XmlHttp.5.0'
		);
		for (i = 0; i < objects.length; i++) {
			try {
				return new ActiveXObject(objects[i]);
			} catch (e) {}
		}
	} else {
		return new XMLHttpRequest();
	}
}
window.onload = function () {
	form = document.getElementById('form');
	loading = document.getElementById('loading');
	results = document.getElementById('results');
	form.onsubmit = function () {
		results.style.display = 'none';
		results.innerHTML = '';
		loading.style.display = 'inline';
		xml.open('get', './MYFILE.php?VAR=' + escape(this.FORMVAR.value));
		xml.onreadystatechange = function () {
			if (xml.readyState == 4 && xml.status == 200) {
				results.style.display = 'block';
				results.innerHTML = xml.responseText;
				loading.style.display = 'none';
			}
		}
		xml.send(null);
		return false;
	}
}

On the page here it ^^ is used-
Make a div as "loading" and put the loading text/image in it, and add a CSS to the page with the following

#loading {
	display: none;
}

PS : Don't forget to add the "results" tag too and configure what all files/variables you'll use in the javascript.

-- 3l3ctr1c