AJAX

michellez · 27 Jan 2009 at 10:13

Played with the tutorials @ http://www.w3schools.com/Ajax/ to get my head rounds the basics. Trying to slightly amend the basic examples here so it happens when a button is pressed instead.

It's a simple form with 1 text box where you enter a domain. When you hit submit it should throw out the whois result returned by whois.php.

It works in IE7, but not Firefox though. I've put the alerts in to help debug, and it does come up saying "Your browser is Opera, Firefox, or Safari". The output is then blank though.

whois.js:

Code:

//Browser Support Code
function showWhois(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
		alert("Your browser is Opera, Firefox, or Safari");
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
			alert("Your browser is IE1");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
				alert("Your browser is IE2");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('whoisResult');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var idomain = document.getElementById('domainInput').value;
	var queryString = "?domain=" + idomain + "&sid="+Math.random();
	ajaxRequest.open("GET", "whois.php" + queryString, true);
	ajaxRequest.send(null); 
}

Thanks,
Shell

michellez · 27 Jan 2009 at 10:18

Now I'm confused. Realised in IE7 it comes up with "Your browser is Opera, Firefox, or Safari" o_O

Am I doing something silly?

Thanks,
Shell

michellez · 27 Jan 2009 at 10:41

Suspected that Augmented after actually thinking it through properly

Sist_si: hm, yeh. Been googling some more and people keep saying that!

michellez · 27 Jan 2009 at 11:24

Seen the fancy stuff, looks cool. I need to get the function working first though!

I'm now using prototype and I have got to the exact same point! I get a response in IE but not Firefox. Eh?

IE7 = out of the whois in a dialog, sweet
Firefox = "no response" message in the dialog

whois.js:

Code:

function showWhois()
	{
		var idomain = $F('domainInput');
		var url = 'whois.php';
		var pars = 'domain=' + idomain;
		
		var myAjax = new Ajax.Request(
			url, 
			{
				method: 'get', 
				parameters: pars, 
				onComplete: function(transport){
					var response = transport.responseText || "no response text";
					alert("Success! \n\n" + response);
				},
				onFailure: function(){ alert('Something went wrong...') 
				}
			});
		
	}

function showResponse(originalRequest)
	{
		//put returned XML in the textarea
		//$('whoisResult').value = originalRequest.responseText;
		var response = transport.responseText || "no response text";
		alert("Success! \n\n" + response);
	}

Thanks,
Shell

michellez · 27 Jan 2009 at 11:30

Just installed FireBug in hope...

I note that I get:

Prototype is not defined
prototype.js
Line 1355

IE produces no errors tho..

michellez · 27 Jan 2009 at 11:44

michellez · 27 Jan 2009 at 12:02

Ok. There has got to be something daft I'm missing with Firefox! Do you not use a div or something? I've tried span and textarea as well. Blank in Firefox, but populated fine in IE.

I've gone as simple as the following which is simply trying to get the basic thing to output some rubbish in a div when I hit the button (noting I am now using Ajax.Updater instead).

I know it's executing the URL as I can see it in the Apache logs.

whois.js

Code:

function getHTML()
{
	var url = 'whois.php';
	var pars = 'someParameter=ABC';
	
	var myAjax = new Ajax.Updater(
		'placeholder', 
		url, 
		{
			method: 'get', 
			parameters: pars
		});
	
}

whois.html

Code:

<html>
<head>
<script src="prototype.js"></script> 
<script src="whois.js"></script> 
</head>
<body>

<form name="myForm">
Domain:
<input type="text" id="domainInput">

<button onclick="getHTML()">
Submit
</button>
</form>

<br>
Meh:
<div id="placeholder"></div>

</body>
</html>

whois.php is set at the moment to simply echo out some random gobble de gook text.

michellez · 27 Jan 2009 at 12:16

I've found some one stating on another forum "remember that you cannot connect to another domain using AJAX in Mozilla based browsers, so you can use just relative path of request like '/test/file.php'" ... but I am!

Searched round Firefox settings as well incase.

michellez · 27 Jan 2009 at 12:48

Thank you SimonCHere... Sorted.
Makes sense now you say it...!

michellez · 27 Jan 2009 at 12:53

Hm, now it doesn't work in IE lol

Used this option:

Code:

<input type="button" id="sub1" value="Submit" onclick="getHTML()">

Wanting to avoid actually using a form submit as I don't want the page to reload (plans down the line...).

Thanks,
Shell

michellez · 27 Jan 2009 at 13:07

Still nothing in IE. Firefox is still good though.

Thanks for you help SimonCHere.

michellez · 27 Jan 2009 at 13:33

Argh. Argh.. and Argh!

It was a , I had accidently deleted in the js file at some point...!

Thanks again,
Shell