Basic help with Auto Save PHP ajax help

[impact]

Hello,

I am novice in Ajax as well as in java script. I want to create an auto save form in my site. From morning I have been studying different tutorials and got this, but for some reasons I just can make the PHP work. Any help will be appreciated.

<script type="text/javascript">

window.addEvent('domready', function(){
var box = $('box');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});

$('save_button').addEvent('click', function() {
box.style.display="block";
box.setHTML('Save in progress...');

/* AJAX Request here... */
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "secure/saveTitle.php?title="
+document.getElementById('title').value, true);
httpObject.send(null);

}

function getHTTPObject(){
if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}

fx.start({
}).chain(function() {
box.setHTML('Saved!');
this.start.delay(1000, this, {'opacity' : 0});
}).chain(function() {
box.style.display="none";
this.start.delay(0100, this, {'opacity' : 1});
});
});
});

<form name="event_title" method="get">
<div align="center">
<table width="100%" border="0">
<tr>
<td><div align="center"><div id="box"></div></div></td>
</tr>
</table>
<input name="title" type="text" class="createSteps" size="45" maxlength="125" id="title" />
&nbsp;
<input name="save_button" type="button" class="createSteps" id="save_button" value="save"/>
&nbsp; </div>
</form>

I guess the highlighted code isn't working.

[jason_m]

hey,
not trying to what unhelpful but your code looks pretty difficult to pick apart as to what is the actual cause.

try reading this link (http://www.ibm.com/developerworks/web/library/wa-ajaxintro2/) as a guide and see if you can find out what the issue is.

[Fotiman]

Are you using jQuery? I see things like $('box') and $('save_button'), but if this were jQuery then it would need to be $('#box') and $('#save_button'). Do you have your own $ function?

A few comments:
1. Your getHTTPObject method is backwards... that is, it will return an ActiveX object before it would use the browsers native XMLHttpRequest object. See Cross Browser XMLHttpRequest Explained [webmasterworld.com] for a better approach.

2. You might try using Firefox with Firebug to add break points in your code and see what's going on. Alternatively, you could add some alerts just to see what the browser thinks it's doing.