Welcome to WebmasterWorld Guest from 54.163.61.66

Forum Moderators: open

Message Too Old, No Replies

Basic help with Auto Save PHP ajax help

     
9:34 am on Sep 12, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 12, 2009
posts: 137
votes: 0


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.
3:06 am on Sept 15, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 26, 2010
posts:74
votes: 0


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.
1:04 pm on Sept 15, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5012
votes: 23


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members