Tuesday, 6 August 2013

Live Table Edit with Jquery ,Ajax and Java

// siddhu vydyabhushana // 5 comments
Very thankful to srinivas tamada for writing this post already he did live table edit in php but now am going to teach you how to do this in pure java.i hope you like it .Lets start...

                            Download this code:  click here
Database:
i took a single table named fullnames columns is,firstname,lastname



CREATE TABLE fullnames
(
id INT PRIMARY KEY AUTO_INCREMENT,
firstname VARCHAR(70),
lastname VARCHAR(70)
);

wireframe:
index.jsp : For displaying records



<table width="100%">
<tr class="head">
<th>First Name</th><th>Last Name</th>
</tr>
<%
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:edit","","");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from fullnames");
int i=1;
while(rs.next())
{
int id=rs.getInt(1);
String firstname=rs.getString(2);
String lastname=rs.getString(3);
if(i%2==0)
{
%>
<tr id="<%=id%>" class="edit_tr">
<% 
} 
else 
{ %>
<tr id="<%=id%>" bgcolor="#f2f2f2" class="edit_tr">
<% } %>
<td width="50%" class="edit_td">
<span id="first_<%=id%>" class="text"><%=firstname %></span>
<input type="text" value="<%=firstname%>" class="editbox" id="first_input_<%=id%>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<%=id%>" class="text"><%=lastname%></span> 
<input type="text" value="<%=lastname%>"  class="editbox" id="last_input_<%=id %>"/>
</td>
</tr>

<%
i++;
}
con.close();
}
 catch(Exception e)
 {
 out.println(e);
 }
%>

</table>

Javascript Code:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html('<img src="load.gif" />');


if(first.length && last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.jsp",
data: dataString,
cache: false,
success: function(html)
{

$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
});

$(".editbox").mouseup(function() 
{
return false
});

$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});
</script>
css code:
 
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#333;
color:#FFFFFF
}
I connected jsp to ms access database after downloading this code you have to set data source name path and place it in webapps folder of apache run it . even though if have any doubts comment here i will clarify it. mail me vydyas@gmail.com

5 comments:

  1. packers and movers noida sector 12 @ http://www.noidapackers.co.in/
    packers and movers noida sector 53 @ http://www.noidapackers.co.in/
    packers and movers noida sector 51 @ http://www.noidapackers.co.in/
    packers and movers noida sector 50 @ http://www.noidapackers.co.in/
    packers and movers noida sector 49 @ http://www.noidapackers.co.in/
    packers and movers noida sector 41 @ http://www.noidapackers.co.in/
    packers and movers noida sector 39 @ http://www.noidapackers.co.in/
    packers and movers noida sector 62 @ http://www.noidapackers.co.in/
    packers and movers noida sector 61 @ http://www.noidapackers.co.in/

    ReplyDelete
  2. Hi,

    I tried to compile the code in net beans but it doesnt accept the below tag.

    id="<%=id%>" class="edit_tr">

    please help.

    thanks
    Ashneel Kumar

    ReplyDelete