Please support us by disabling ad blocker for smarttutorials.net ...

Jquery Inline Editor

Posted by & filed under JQUERY.

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

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.

Jquery inline editor demo buttonjquery inline editor script

 

 

 

 

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);

?>

 

 

 .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

  • really very nice script

  • i love the jquery. nice post

Get Instant Script Download Access!