HTML Tutorial – In-line text editing and storing to database
So, lets start with HTML code:
|
1
2
3
4
5
6
7
|
<div id="status"></div> <div id="content"> <div id="editable" contentEditable="true"> Lorem ipsum dolor sit amet... </div> <button id="save">Save</button> </div> |
We created a div #editable, which contains the editable text, with a button to save the changes. We will use div #status to display the server message.
You can add CSS as you wish, but important thing to remember is that, initially we will like to hide the Save button. We would like to show the button, only if the #editable div is clicked. Similarly, as the #status will be empty initially, so we will hide it as well.
|
1
2
3
4
5
6
7
8
9
10
11
|
#status{ display:none; margin-bottom:15px; padding:5px 10px; border-radius:5px;}#save{ display: none; margin: 5px 10px 10px;} |
You can add CSS for other elements as you like.
Now, lets start the jQuery code.
|
1
2
3
4
5
6
7
8
|
$("#editable").click(function (e) { $("#save").show(); e.stopPropagation();});$(document).click(function() { $("#save").hide();}); |
The above code shows the save button if anywhere in the editable div is clicked, and hide the button if anywhere outside the div is clicked.
Now, we should post the text data to the server so that we can save it in the database.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
$("#save").click(function (e) { var content = $('#editable').html(); $.ajax({ url: 'save.php', type: 'POST', data: { content: content }, success:function (data) { if (data == '1') { $("#status") .addClass("success") .html("Data saved successfully") .fadeIn('slow') .delay(3000) .fadeOut('slow'); } else { $("#status") .addClass("error") .html("Error, data could not be saved") .fadeIn('slow') .delay(3000) .fadeOut('slow'); } } }); }); |
The above code gets the data from the #editable and posts to the send.php file. If the data is posted successfuly, the PHP file recieves the data and inserts to database. If the data is stored in database successfully, then it should return 1. In that case we can display the success message in the #status. Otherwise we can display error message.
The contents of PHP file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php $content = $_POST['content']; //get posted data $content = mysql_real_escape_string($content); //escape string $sql = "UPDATE content SET text = '$content' WHERE element_id = '1' "; if (mysql_query($sql)) { echo 1; }?> |
The above PHP code receives the data and updates in the database table, content.
As you noticed, I had added some static text in the #editable div in the HTML code above. But since, we are updating the text in the database, therefore, instead of displaying the static data in our div, we should be fetching the data from database and display in it.
|
1
2
3
4
5
6
7
8
9
|
<div id="editable" contentEditable="true"><?php//get data from database.include("db.php");$sql = mysql_query("select text from content where element_id='1'");$row = mysql_fetch_array($sql);echo $row['text'];?></div> |
Source: gazpo.com
you may also like:
Leave a Reply
