Inline altering as its known, or having the capacity to alter substance straightforwardly on a page is an incredible instrument have added to your repertoire. I’m set to run through precisely how it fills in and also how to Post the redesigned content through to a Php script for server side handling to put in the database.
The Code
It looks a little complex so i’m set to rapidly run through precisely what’s going on.
At the time you visit the demo page are given a piece of content. Assuming that you float your rodent over the content you’ll see a little alter symbol comparative to when you need to alter substance on Facebook.
Provided that the client clicks on the square of code the content is reinstated with a structure textarea with the choice to recover or wipe out any progressions.
Notwithstanding in a little more part
This exercise utilization tying and unbinding. Put in modest terms we can scrape a click occasion to a component. Unbinding discharges the click occasion from the component, basic. In line 9 of the code underneath we tie a click occasion to all the components with a class of “inline-edit” the occasion handler is the capacity ‘update-text’. This implies that every-time a div with the class “inline-edit” is clicked the capacity “update-text” will be run. The capacity “update-text” supplants the present content with a text-area.
Afterward we see the recovery capacity. This capacity is just run when the client clicks the recovery symbol. We fundamentally spare the new content in a variable and pass it through to the update.php record. You’ll perceive that the stacking symbol is shown throughout the safeguarding procedure. We additionally show a message when there is a reaction from the Php page. At long last we evacuate the “chose” class shape the component, and after that infuse the new content that the client composed in the text-area into the div
The scratch off capacity is enacted when the component with the class .return is clicked. This capacity basically evacuates the class “chose” as above in the recovery capacity, and additionally putting the definitive content in the div.
————————————————————————————————————-
$(document).ready(function () {
function slideout() {
setTimeout(function () {
$("#response").slideUp("slow", function () {});
},
2000);
}
$(".inlineEdit").bind("click", updateText);
var OrigText, NewText;
$(".save").live("click", function () {
$("#loading").fadeIn(‘slow’);
NewText = $(this).siblings("form").children(".edit").val();
var id = $(this).parent().attr("id");
var data = ‘?id=’ + id + ‘&text=’ + NewText;
$.post("update.php", data, function (response) {
$("#response").html(response);
$("#response").slideDown(‘slow’);
slideout();
$("#loading").fadeOut(‘slow’);
});
$(this).parent().html(NewText).removeClass("selected").bind("click", updateText);
});
$(".revert").live("click", function () {
$(this).parent().html(OrigText).removeClass("selected").bind("click", updateText);
});
function updateText() {
$(‘li’).removeClass("inlineEdit");
OrigText = $(this).html();
$(this).addClass("selected").html(‘<form ><textarea class="edit">’ + OrigText + ‘" </textarea> </form><a href="#" class="save"><img src="images/save.png" border="0" width="48" height="15"/></a> <a href="#" class="revert"><img src="images/cancel.png" border="0" width="58" height="15"/></a>’).unbind(‘click’, updateText);
}
});
The Php
In this illustration I haven’t included the database association script. We fundamentally Post the information to update.php and utilizing Php we reverberate back the outcomes. You could easily add this information to the database.
$text = mysql_escape_string($_post[‘text’]);
$id = mysql_escape_string($_post[‘id’]);
reverberation $text;
// this is where you could add the redesigned content to the database where the database line id = $id for instance.
The Html
The Html is essentially a record thing with the class “inlineedit” this makes the substance of the component editable. The more components that you include with this class, the more you can alter. recognize how i’ve added an id of 1 to the sample beneath. This could be a particular column in a database for instance in the event that you have different editable components on a page.
<h2>jQuery Inline-Edit <img id="loading" src="images/loading.gif"/></h2>
Click the text below to edit it.
<div id="response"></div>
<ul>
<li class="inlineEdit" id="1">Lorem Ipsum….</li>
</ul>