Unlocking the Power of Advanced HTML Tags Every Web Developer Should Know

on
0

Inline Editor on page using Jquery

on

If you want to implement inline editor on page in your project? so here is the simple steps to implement inline editor.

Create two files index.html and savedata.php, where  index.hyml has jquery library, jquery function and html tags to implement to inline editor.
The savedata.php file gets the edited content and stores it in database.

index.html
============================
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="jquery.jeditable.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
         $('#title').editable('save.php', {
            type      : 'textbox',
                 cancel    : 'Cancel',
                 submit    : 'Submit',
                 indicator : '<img src="loading.gif">',
                 tooltip   : 'Click to edit...',
            callback : function(value, settings) {
                     console.log(this);
                     console.log(value);
                     console.log(settings);
                 }
             });

     });
</script>
</head>
<body>
    <div class="set_title" id="title" style="width:75px;">Senior Programmer</div>
</body>
</html>

savedata.php
===========================================
 Jquery function, which converts ordinary page into textbox as well send the content of textbox to savedata.php file using post method by default, where savedata.php gets the content of edited textbox and saves it in database.

<?php
mysql_connect('localhost','root','');
mysql_select_db('databasename');

echo $data = $_POST['value'];
$query="insert into user(data) VALUES('$data ')";

mysql_query($query);

?>

Comments

Post a Comment