Download
//dbconfig.php <? $conn = mysql_connect("localhost","root","ednalan"); mysql_select_db("dbname",$conn); ?> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $(".delete_button").click(function() { var id = $(this).attr("id"); var dataString = 'id='+ id ; var parent = $(this).parent(); $.ajax({ type: "POST", url: "deleteajax.php", data: dataString, cache: false, beforeSend: function() { parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");; }, success: function() { parent.slideUp('slow', function() {$(this).remove();}); } }); return false; }); }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:14px; } .comment_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.update {list-style:none;font-size:1.2em; } ol.update li{ height:50px; border-bottom:#dedede dashed 1px; background-color:#ffffff} #main { width:300px; margin-top:20px; margin-left:100px; font-family:"Trebuchet MS"; } .delete_button { margin-left:10px; font-weight:bold; float:right; } h1 { margin-top:20px; margin-bottom:20px; background-color:#dedede; color:#000000; font-size:18px; } </style> <div> <div>Delete Records with jQuery Effect<br />( FadeOut and SlideUp )</div> <div></div> <ol> <?php include("dbconfig.php"); $sql="select * from updates order by msg_id desc"; $result = mysql_query($sql); while($row=mysql_fetch_array($result)) { $message=stripslashes($row["message"]); $msg_id=$row["msg_id"]; ?> <li><?php echo $message; ?> <a href="#">X</a></li> <?php } ?> </ol> </div> //deleteajax.php <?php if($_POST['id']) { $id=$_POST['id']; $id = mysql_escape_String($id); $sql = "delete from updates where ms_id='$id'"; mysql_query( $sql); } ?>
0 Response to "[Web-development (jquery)] Delete Records with jQuery Effect and ajax ( FadeOut and SlideUp )"
Post a Comment