Sample Demo:
CREATE TABLE `users` (
`user_id` INT NOT NULL primary key AUTO_INCREMENT ,
`username` VARCHAR(45) NULL unique,
`password` VARCHAR(45) NULL ,
`profile` TEXT,
);
`user_id` INT NOT NULL primary key AUTO_INCREMENT ,
`username` VARCHAR(45) NULL unique,
`password` VARCHAR(45) NULL ,
`profile` TEXT,
);
updateprofile.jsp
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//Edit link action
$('.edit_link').click(function()
{
$('.text_wrapper').hide();
var data=$('.text_wrapper').html();
$('.edit').show();
$('.editbox').html(data);
$('.editbox').focus();
});
//Mouseup textarea false
$(".editbox").mouseup(function()
{
return false
});
//Textarea content editing
$(".editbox").change(function()
{
$('.edit').hide();
var boxval = $(".editbox").val();
//alert("boxval"+boxval);
///var dataString = 'data='+ boxval;
//var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
var dataString = '&profile='+boxval;
//alert("datastring"+dataString);
$.ajax({
type: "POST",
url: "update_profile_ajax.jsp",
data: dataString,
cache: false,
success: function(html)
{
//alert(boxval);
$('.text_wrapper').html(boxval);
$('.text_wrapper').show();
}
});
});
//Textarea without editing.
$(document).mouseup(function()
{
$('.edit').hide();
$('.text_wrapper').show();
});
});
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.mainbox
{
width:250px;
margin:50px;
}
.text_wrapper
{
border:solid 1px #0099CC;
padding:5px;
width:187px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:solid 1px #0099CC;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
</style>
</head>
<body>
<div class="mainbox">
<a href="#" class="edit_link" title="Edit">Edit</a>
<%
String profile="";
Connection conn=null;
try{
Class.forName("com.mysql.jdbc.Driver");
conn=(Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","ramu");
String sql="select profile from users where user_id=1";
PreparedStatement ps=conn.prepareStatement(sql);
ResultSet rs=ps.executeQuery(sql);
while(rs.next())
{
profile=rs.getString("profile");
}
}
catch(Exception ae)
{
out.println("Exception"+ae);
}
%>
<div class="text_wrapper"><%= profile %> </div>
<div class="edit" style="display:none">
<textarea class="editbox" cols="23" rows="3" ></textarea>
</div>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//Edit link action
$('.edit_link').click(function()
{
$('.text_wrapper').hide();
var data=$('.text_wrapper').html();
$('.edit').show();
$('.editbox').html(data);
$('.editbox').focus();
});
//Mouseup textarea false
$(".editbox").mouseup(function()
{
return false
});
//Textarea content editing
$(".editbox").change(function()
{
$('.edit').hide();
var boxval = $(".editbox").val();
//alert("boxval"+boxval);
///var dataString = 'data='+ boxval;
//var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
var dataString = '&profile='+boxval;
//alert("datastring"+dataString);
$.ajax({
type: "POST",
url: "update_profile_ajax.jsp",
data: dataString,
cache: false,
success: function(html)
{
//alert(boxval);
$('.text_wrapper').html(boxval);
$('.text_wrapper').show();
}
});
});
//Textarea without editing.
$(document).mouseup(function()
{
$('.edit').hide();
$('.text_wrapper').show();
});
});
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.mainbox
{
width:250px;
margin:50px;
}
.text_wrapper
{
border:solid 1px #0099CC;
padding:5px;
width:187px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:solid 1px #0099CC;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
</style>
</head>
<body>
<div class="mainbox">
<a href="#" class="edit_link" title="Edit">Edit</a>
<%
String profile="";
Connection conn=null;
try{
Class.forName("com.mysql.jdbc.Driver");
conn=(Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","ramu");
String sql="select profile from users where user_id=1";
PreparedStatement ps=conn.prepareStatement(sql);
ResultSet rs=ps.executeQuery(sql);
while(rs.next())
{
profile=rs.getString("profile");
}
}
catch(Exception ae)
{
out.println("Exception"+ae);
}
%>
<div class="text_wrapper"><%= profile %> </div>
<div class="edit" style="display:none">
<textarea class="editbox" cols="23" rows="3" ></textarea>
</div>
</div>
</body>
</html>
update_profile_ajax.jsp
<%@ page import="java.sql.*"%>
<%@page import="java.util.*"%>
<%
if(request.getParameter("id")!=null)
{
//int id=Integer.parseInt(request.getParameter("id"));
String profile=request.getParameter("boxval");
//String lastname=request.getParameter("lastname");
int id=1;
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection conn=(Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","ramu");
Statement stmt=conn.createStatement();
//System.out.println(id);
stmt.executeUpdate("UPDATE users set profile='"+profile+"'where id="+id+"");
conn.close();
}
catch(Exception e)
{
out.println(e);
}
}
else
{
out.println("wrong");
}
%>
<%@page import="java.util.*"%>
<%
if(request.getParameter("id")!=null)
{
//int id=Integer.parseInt(request.getParameter("id"));
String profile=request.getParameter("boxval");
//String lastname=request.getParameter("lastname");
int id=1;
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection conn=(Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","ramu");
Statement stmt=conn.createStatement();
//System.out.println(id);
stmt.executeUpdate("UPDATE users set profile='"+profile+"'where id="+id+"");
conn.close();
}
catch(Exception e)
{
out.println(e);
}
}
else
{
out.println("wrong");
}
%>
update_profileCss.css
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.mainbox
{
width:250px;
margin:50px;
}
.text_wrapper
{
border:solid 1px #0099CC;
padding:5px;
width:187px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:solid 1px #0099CC;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.mainbox
{
width:250px;
margin:50px;
}
.text_wrapper
{
border:solid 1px #0099CC;
padding:5px;
width:187px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:solid 1px #0099CC;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
OutPut:
0 comments:
Post a comment