Simple jQuery script to edit HTML5 text and save using ajax
Very often, in the process of editing site content, it is necessary (and also very convenient) to see the finished result on the browser page. Using the property tags HTML5 - contenteditable, Jquery, Ajax and PHP create a simple text editor HTML5 site.
Our editor will have the following properties:
- when you click on the text intended for editing, this text can be edited immediately;
- when you press the Escape key after editing the text, all changes to the current text are discarded;
- if you lose the focus, or click to edit another text, the changed text is sent to the server, a message about the status of sending and response of the server is displayed.
Below is the HTML code of the editable page:
As you can see, each editable text is enclosed in a tag with the contenteditable property enabled — an HTML5 chip that allows editing text directly in the browser. To save on the server, you need to accurately identify the editable text, so the id we have contains the material identifier and the database field, separated by underscores, for example - id = "item1_title".
The "save" button is here for those who are used to clicking on the save button. It does not perform any special load, because when you click on the button, our text loses focus and remains (if changed).
')
In the title of our page we connect style.css and jquery:
Next comes the script itself:
We accept our edited text on the server - the file save.php
Our editor is especially convenient for tabular data (for example, price list), where text formatting is not necessary, but it is necessary to correct it quickly, or enter new data (we will modernize the script). For myself, I am upgrading a script to add, fill in the database of goods. It will be as convenient to fill the database in this way, as in Excel, which we are so used to.
Demo version of our simple HTML editing script [5 .
Download an example .
Our editor will have the following properties:
- when you click on the text intended for editing, this text can be edited immediately;
- when you press the Escape key after editing the text, all changes to the current text are discarded;
- if you lose the focus, or click to edit another text, the changed text is sent to the server, a message about the status of sending and response of the server is displayed.
Below is the HTML code of the editable page:
<!DOCTYPE html> <html lang="ru"> <body> <div id="wrap"> <h1 id="item1_title" contenteditable="true" ><a href="http://jquery.ua-opt.com/htm5-text-edit.html"> jquery HTML5 ajax</a></h1> <h3 id="item1_subtitle" contenteditable="true"> <i> HTML5 </i>, Jquery-Ajax-Php-mysql.</h3> <div id="item1_content" contenteditable="true"> html 5. . .</div> <button id="save"></button> </div> </body> </html> As you can see, each editable text is enclosed in a tag with the contenteditable property enabled — an HTML5 chip that allows editing text directly in the browser. To save on the server, you need to accurately identify the editable text, so the id we have contains the material identifier and the database field, separated by underscores, for example - id = "item1_title".
The "save" button is here for those who are used to clicking on the save button. It does not perform any special load, because when you click on the button, our text loses focus and remains (if changed).
')
In the title of our page we connect style.css and jquery:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title> jquery ajax</title> <link rel="stylesheet" href="css/style.css"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> Next comes the script itself:
<script> var contentold={}; // function savedata(elementidsave,contentsave) { // ajax $.ajax({ url: 'save.php', //url type: 'POST', data: { content: contentsave, // id:elementidsave }, success:function (data) { // - if (data == contentsave) // , ok { $('#'+elementidsave).html(data); // , $('<div id="status"> :'+data+'</div>') // .insertAfter('#'+elementidsave) .addClass("success") .fadeIn('fast') .delay(1000) .fadeOut('slow', function() {this.remove();}); // } else { $('<div id="status"> :'+data+'</div>') // .insertAfter('#'+elementidsave) .addClass("error") .fadeIn('fast') .delay(3000) .fadeOut('slow', function() {this.remove();}); // } } }); } $(document).ready(function() { $('[contenteditable="true"]') // .mousedown(function (e) // { e.stopPropagation(); elementid=this.id; contentold[elementid]=$(this).html(); // $(this).bind('keydown', function(e) { // Escape if(e.keyCode==27){ e.preventDefault(); $(this).html(contentold[elementid]); // } }); $("#save").show(); // "" }) .blur(function (event) // { var elementidsave=this.id; //id var contentsave = $(this).html(); // event.stopImmediatePropagation(); if (elementid===elementidsave) // id id , , {$("#save").hide(); } // , if (contentsave!=contentold[elementidsave]) // { savedata(elementidsave,contentsave); // } }); }); </script> We accept our edited text on the server - the file save.php
<?php //include("db.php"); $id= filter_input (INPUT_POST , 'id' , FILTER_SANITIZE_STRING ); $id=explode('_', $id); $itemid=mysql_real_escape_string($id[0]); $itempole=mysql_real_escape_string($id[1]); $content = $_POST['content']; //get posted data //$content = mysql_real_escape_string($content); //escape string //$sql = "UPDATE content SET $itempole = '$content' WHERE element_id = '$itemid' "; if ($content) { print $content; } else print '№1'; ?> Our editor is especially convenient for tabular data (for example, price list), where text formatting is not necessary, but it is necessary to correct it quickly, or enter new data (we will modernize the script). For myself, I am upgrading a script to add, fill in the database of goods. It will be as convenient to fill the database in this way, as in Excel, which we are so used to.
Demo version of our simple HTML editing script [5 .
Download an example .
Source: https://habr.com/ru/post/233805/
All Articles