Site icon SmartTutorials.net

Jquery Inline Editor

Do you want to implement Jquery inline editor in your project? so here is the simple steps to implement jquery inline editor in your project.

Jquery Inline Editor

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

 

 

 

 

Here is the script for inline.php

<script src="http://dl.dropbox.com/u/49791983/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="http://dl.dropbox.com/u/49791983/jquery.jeditable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	 $('.edit_area').editable('save.php', { 

         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         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 align="center" class="edit_area" id="div_2" style="width:500px; height:400px">Only when the last tree has died, 
the last river has been poisoned,
and the last fish has been caught
 will we realize we can't eat money.
-Cree Proverb.</div>
</body>
</html>

where

$(document).ready(function(){

// jQuery functions go here…

});

You might have noticed that all jQuery methods, in our examples, are inside a document.ready() function,this prevents any jQuery code from running before the document is finished loading (is ready).

$(‘.edit_area’).editable(‘save.php’)

where $ –  sign defines Jquery

edit_area – is the div class name to be selected by jquery to perform editable action.

editable(save.php) – Jquery function, which converts ordinary page into text area as well send the content of text area to save.php file using post method by default, where save.php gets the content of edited text area and saves it in database.

here is save.php script

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

echo $s=$_POST['value'];

$query="insert into user(data)
VALUES('$s')";

mysql_query($query);

?>

 

 

 .

Exit mobile version