Facebook Like Profile Edit Using Java

Facebook Like Profile Edit with Jquery Using Java

______________________________________________________________________________

Thank You For the Srinivas Tamada because it is designed based on his tutorial

Sample Demo:

Database Design
user table contains user_id, username, password and profile.

CREATE TABLE `users` (
`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>

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");
}

%>

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
}

OutPut:

AdSenseHeader

Facebook Like Profile Edit Using Java

0 comments:

Post a comment

Facebook Like Profile Edit Using Java

Next

Newer Post

Previous

Older Post

0 comments:

Post a comment