Jan
Dynamic delete with animation using prototype
12 Jan 2009 06:26 pm
There are many JavaScript libraries available for downloads that enable you to create an ajax driven animated website.
In this example we use scriptaculous/prototype libraries to create a dynamic delete with animated action.
First you need to download scriptaculous scripts from http://script.aculo.us/downloads
Put prototype.js, and the six files scriptaculous.js,
builder.js, effects.js, dragdrop.js, controls.js and slider.js
in a directory of your website, e.g. /js
Now, you can include the scripts by adding the following
tags to the HEAD section of your HTML pages:
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
scriptaculous.js will automatically load the other files of the script.aculo.us distribution in, provided they are accessible via the same path.
How to create dynamic delete with animation using prototype
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
Custom made javascript function to perform the job
<script type="text/javascript">
function doit(id)
{
if (confirm('Sure you wanna delete?')) {
var url = 'delete.php';
var data = 'id='+id;
var target = '';
var myAjax = new Ajax.Updater( target,
url,
{method: 'get', parameters: data, onComplete: remove(id) }
); }
return false;
}
function remove(id)
{
Effect.Fade('del-'+id);
new Effect.Appear("status");
var div = $('status');
div.style.backgroundColor = '#eeeeff';
div.style.border = '1px solid #00ffff';
div.style.font = 'bold 10pt arial';
div.innerHTML = 'Deleted record id= ' + id ;
new Effect.Fade("status", {duration:3});
}
</script>
<div id="del-1"><a href="delete.php?id=1" onClick="return doit(1)" class="delete" id="delete-1">Del1</a></div>
<div id="del-2"><a href="delete.php?id=2" onClick="return doit(2)" class="delete" id="delete-2">Del2</a></div>
<div id="del-3"><a href="delete.php?id=3" onClick="return doit(3)" class="delete" id="delete-3">Del3</a></div>
<div id="del-4"><a href="delete.php?id=5" onClick="return doit(5)" class="delete" id="delete-5">Del4</a></div>
By : sean | Category: Ajax Tutorial | Comments [0]
Comments