A good and successful web application must have good user interface to interact more users and increase its usability. Application built with ajax saves number of page refreshes. I have few application/scripts which run completely on Ajax which makes it fast, user friendly and interactive to name few of them below is the list
You can find complete list here Ajax application example. Today we are going to design a dynamic table, in which we can dynamically add rows to table using javascript remove rows number of times without refreshing a page even once and thats also with cool javascript animation. Say thanks to ajax.
.jpg)
Script.js This file contains all the javascript. which includes the functionality to add remove rows in the table dynamically. Main role was played by javascript in this dynamically add rows to table using javascript.
You can find complete list here Ajax application example. Today we are going to design a dynamic table, in which we can dynamically add rows to table using javascript remove rows number of times without refreshing a page even once and thats also with cool javascript animation. Say thanks to ajax.
.jpg)
<div style="margin-left: 20%;margin-top: 5%;"> <input type="button" value="Add Record" id="add_new"><p> </p><table width="70%" border="0" cellpadding="0" cellspacing="0" class="table-list"> <tbody><tr> <th width="20%">First Name</th> <th width="20%">Last Name</th> <th width="40%">Email</th> <th width="20%">Phone Number</th> <th width="20%">Delete</th> </tr> <tr> <td>jquery</td> <td>ajax</td> <td>jquery@ajax.com</td> <td>242525</td> <td><a href="#" id="1" class="del">Delete</a></td> </tr> <tr> <td>php</td> <td>mysql</td> <td>php@mysql.com</td> <td>242525</td> <td><a href="#" id="2" class="del">Delete</a></td> </tr> <tr> <td>html</td> <td>css</td> <td>html@css.com</td> <td>242525</td> <td><a href="#" id="3" class="del">Delete</a></td> </tr> <tr> <td>wordpress</td> <td>plugins</td> <td>wordpress@plugins.com</td> <td>242525</td> <td><a href="#" id="4" class="del">Delete</a></td> </tr> </tbody></table> </div>
Ajax.php This file will contain all the processing, like inserting record row in mysql and deleting record row from database table. Before saving the data dont forget to sanitize the input to stop xss attacks and sql injections. We are returning data in a json format to minimize the connection overload and make application faster. This is how it works in dynamically add rows to table using javascript. Its a demo app so i havent added database code in it. If you are dealing with database dont forget to use mysql_real_escape_string() or PDO classes
if(isset($_POST) && count($_POST)){ $action = $_POST['action']; $fname = $_POST['fname']; $lname = $_POST['lname']; $email = $_POST['email']; $phone = $_POST['phone']; $item_id = $_POST['item_id']; if($action == "save"){ // Add code to save data into mysql echo json_encode( array( "success" => "1", "row_id" => time(), "fname" => htmlentities($fname), "lname" => htmlentities($lname), "email" => htmlentities($email), "phone" => htmlentities($phone), ) ); } else if($action == "delete"){ // Add code to remove record from database echo json_encode( array( "success" => "1", "item_id" => $item_id ) ); }}else{ echo json_encode( array( "success" => "0", "item_id" => "No POST data set" ) );}
Style.css
*{ font-family: verdana; font-size: 12px;}input[type='button']{ background: #5B8EEE; width: 90px; height: 30px; border: 1px solid #CBDBFA; color: white; font-weight: bold; margin-right: 10px;}.table-list{ font-family: verdana; font-size: 12px; border: 1px solid #EAEAEA; padding: 2px;}.table-list th{ background: #EDF2F6; border-bottom: 1px dotted #DDDDDD; color: #444444; font-size: 12px; font-weight: normal !important; height: 28px; line-height: 28px; padding-left: 5px; text-align: left;}.table-list td{ border-bottom: 1px dotted #EAEAEA; font-family: Arial,Helvetica,sans-serif; font-size: 12px; height: 28px; padding: 5px; text-align: left;}.table-list tr:hover{ background: #E3F3F9;}.entry-form{ background: #EDF2F6; width: 350px; padding: 10px; border: 5px solid #C5D7E2; box-shadow: 3px 3px 5px #888; position: absolute; top: 25%; left: 35%; display: none; border-radius: 5px;}.entry-form input[type='text']{ border: 1px solid #BBBBBB; box-shadow: 2px 2px 4px #C5D7E2 inset; height: 25px; width: 200px;}.entry-form input[type='text']:focus{ border: 1px solid #C5D7E2;}$(document).ready(function(){ $("#save").click(function(){ ajax("save"); }); $("#add_new").click(function(){ $(".entry-form").fadeIn("fast"); }); $("#close").click(function(){ $(".entry-form").fadeOut("fast"); }); $("#cancel").click(function(){ $(".entry-form").fadeOut("fast"); }); $(".del").live("click",function(){ ajax("delete",$(this).attr("id")); }); function ajax(action,id){ if(action =="save") data = $("#userinfo").serialize()+"&action="+action; else if(action == "delete"){ data = "action="+action+"&item_id="+id; } $.ajax({ type: "POST", url: "ajax.php", data : data, dataType: "json", success: function(response){ if(response.success == "1"){ if(action == "save"){ $(".entry-form").fadeOut("fast",function(){ $(".table-list").append(""+response.fname+""+response.lname+""+response.email+""+response.phone+"<a href="#" id=""+response.row_id+"" class="del">Delete</a>"); $(".table-list tr:last").effect("highlight", { color: '#4BADF5' }, 1000); }); }else if(action == "delete"){ var row_id = response.item_id; $("a[id='"+row_id+"']").closest("tr").effect("highlight", { color: '#4BADF5' }, 1000); $("a[id='"+row_id+"']").closest("tr").fadeOut(); } } }, error: function(res){ alert("Unexpected error! Try again."); } }); }});
If you like this and really appreciate dynamically add rows to table using javascript dont forget to share it
0 comments:
Post a Comment