PHP / jQuery - Instant Editable Fields
- cancer10
- Proficient
- Joined: Jun 29, 2006
- Posts: 268
- Status: Offline
December 10th, 2009, 10:20 am
Hi,
I was looking for a solution (using php/jquery) similar to the one as shown in the screen shot.
I have a user database with 3 fields:
id (auto number)
name (varchar)
email (varchar)
the user lists gets populated in a grid (html table), clicking on either the name or the email address would convert the label into an editable text box and after editing once i remove the cursor from the textbox, the data gets saved in the database.
Any help with a code snippet will be highly appreciated.
Thanks
I was looking for a solution (using php/jquery) similar to the one as shown in the screen shot.
I have a user database with 3 fields:
id (auto number)
name (varchar)
email (varchar)
the user lists gets populated in a grid (html table), clicking on either the name or the email address would convert the label into an editable text box and after editing once i remove the cursor from the textbox, the data gets saved in the database.
Any help with a code snippet will be highly appreciated.
Thanks
Interview Questions & Answers - http://www.focusinterview.com
My Profile: http://outlineme.com/cancer10
My Profile: http://outlineme.com/cancer10
- Anonymous
- Bot
- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
December 10th, 2009, 10:20 am
- UPSGuy
- Lurker ಠ_ಠ
- Joined: Jul 25, 2005
- Posts: 2735
- Loc: Nashville, TN
- Status: Offline
December 10th, 2009, 12:58 pm
Here's a snippet for the UI portion:
Two more things to be done. First, you need to populate the href with your original DB value (instead of John Smith). Second, you need to write the php page that will take the post $_REQUEST and save it back to the DB (in the script, the reference to this file is 'saveTheValue.php' so when you make your file, replace that with your file name).
I don't have a lot of time right now to set up and tear down a quick DB for testing, so I'm leaving those parts to you. I don't like giving turn-key solutions anyways, so consider the rest homework.
Code: [ Select ]
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function convertToInput(containerId, link) {
$('#' + containerId).html("<input type='text' value='" + link.text + "' onBlur='saveNewValue(\"" + containerId + "\", this.value);' />");
}
function saveNewValue(containerId, val) {
$('#' + containerId).html("<a href='javascript:void(0);' onClick='convertToInput(\"" + containerId + "\", this);' >" + val + "</a>");
$.ajax({
url: "saveTheValue.php",
data: "value=" + val,
type: 'POST',
timeout: 1000,
error: function(){ alert('AJAX call timed out'); }
});
}
</script>
</head>
<body>
<div id="nameContainer">
<a href="javascript:void(0);" onClick="convertToInput('nameContainer',this);" >John Smith</a>
</div>
</body>
</html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function convertToInput(containerId, link) {
$('#' + containerId).html("<input type='text' value='" + link.text + "' onBlur='saveNewValue(\"" + containerId + "\", this.value);' />");
}
function saveNewValue(containerId, val) {
$('#' + containerId).html("<a href='javascript:void(0);' onClick='convertToInput(\"" + containerId + "\", this);' >" + val + "</a>");
$.ajax({
url: "saveTheValue.php",
data: "value=" + val,
type: 'POST',
timeout: 1000,
error: function(){ alert('AJAX call timed out'); }
});
}
</script>
</head>
<body>
<div id="nameContainer">
<a href="javascript:void(0);" onClick="convertToInput('nameContainer',this);" >John Smith</a>
</div>
</body>
</html>
- <html>
- <head>
- <title>Example</title>
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
- <script type="text/javascript">
- function convertToInput(containerId, link) {
- $('#' + containerId).html("<input type='text' value='" + link.text + "' onBlur='saveNewValue(\"" + containerId + "\", this.value);' />");
- }
- function saveNewValue(containerId, val) {
- $('#' + containerId).html("<a href='javascript:void(0);' onClick='convertToInput(\"" + containerId + "\", this);' >" + val + "</a>");
- $.ajax({
- url: "saveTheValue.php",
- data: "value=" + val,
- type: 'POST',
- timeout: 1000,
- error: function(){ alert('AJAX call timed out'); }
- });
- }
- </script>
- </head>
- <body>
- <div id="nameContainer">
- <a href="javascript:void(0);" onClick="convertToInput('nameContainer',this);" >John Smith</a>
- </div>
- </body>
- </html>
Two more things to be done. First, you need to populate the href with your original DB value (instead of John Smith). Second, you need to write the php page that will take the post $_REQUEST and save it back to the DB (in the script, the reference to this file is 'saveTheValue.php' so when you make your file, replace that with your file name).
I don't have a lot of time right now to set up and tear down a quick DB for testing, so I'm leaving those parts to you. I don't like giving turn-key solutions anyways, so consider the rest homework.
I'd love to change the world, but they won't give me the source code.
- cancer10
- Proficient
- Joined: Jun 29, 2006
- Posts: 268
- Status: Offline
December 10th, 2009, 9:40 pm
works like a charm....many thanks for your help 
Interview Questions & Answers - http://www.focusinterview.com
My Profile: http://outlineme.com/cancer10
My Profile: http://outlineme.com/cancer10
- UPSGuy
- Lurker ಠ_ಠ
- Joined: Jul 25, 2005
- Posts: 2735
- Loc: Nashville, TN
- Status: Offline
December 11th, 2009, 6:18 am
I'd love to change the world, but they won't give me the source code.
Page 1 of 1
To Reply to this topic you need to LOGIN or REGISTER. It is free.
Post Information
- Total Posts in this topic: 4 posts
- Users browsing this forum: No registered users and 104 guests
- You cannot post new topics in this forum
- You cannot reply to topics in this forum
- You cannot edit your posts in this forum
- You cannot delete your posts in this forum
- You cannot post attachments in this forum
