|
Sunday, 11 March 2007 |
|
First include this library at the top of your code (you can find the library in the source code section of this page). Do it in <head> tag. After loading the library you can write your code. You can find demo page here: demo page
Source code for index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Iframe Ajax</title>
<script type="text/javascript" src="webtoolkit.aim.js"></script>
<script type="text/javascript">
function startCallback() {
// make something useful before submit (onStart)
return true;
}
function completeCallback(response) {
// make something useful after (onComplete)
document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;
document.getElementById('r').innerHTML = response;
}
</script>
</head>
<body>
<form action="index.php" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
<div><label>Name:</label> <input type="text" name="form[name]" /></div>
<div><label>File:</label> <input type="file" name="form[file]" /></div>
<div><input type="submit" value="SUBMIT" /></div>
</form>
<hr/>
<div># of submited forms: <span id="nr">0</span></div>
<div>last submit response (generated by form action - index.php file): <pre id="r"></pre></div>
</body>
</html> Source code for webtoolkit.aim.js /**
*
* AJAX IFRAME METHOD (AIM)
* http://www.webtoolkit.info/
*
**/
AIM = {
frame : function(c) {
var n = 'f' + Math.floor(Math.random() * 99999);
var d = document.createElement('DIV');
d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
document.body.appendChild(d);
var i = document.getElementById(n);
if (c && typeof(c.onComplete) == 'function') {
i.onComplete = c.onComplete;
}
return n;
},
form : function(f, name) {
f.setAttribute('target', name);
},
submit : function(f, c) {
AIM.form(f, AIM.frame(c));
if (c && typeof(c.onStart) == 'function') {
return c.onStart();
} else {
return true;
}
},
loaded : function(id) {
var i = document.getElementById(id);
if (i.contentDocument) {
var d = i.contentDocument;
} else if (i.contentWindow) {
var d = i.contentWindow.document;
} else {
var d = window.frames[id].document;
}
if (d.location.href == "about:blank") {
return;
}
if (typeof(i.onComplete) == 'function') {
i.onComplete(d.body.innerHTML);
}
}
} |