JQuery :: Edit in Place

Do not consider this material for professional presentation. This is not true. I just wanted to share my experience with people who can use it in their projects and make Internet projects more convenient to use.

Let's start:
They made a mechanism for rollers with developers. The essence is simple: a lot of videos are loaded, and then they are played in the player. The videos on the server themselves are music files and records in the database. Entries have their sv-va.
Below we will discuss only two: the position of the video in the general queue and the name.
To edit the position of the video, I didn’t really want to go to a special page where you could edit this property. Rollers were about 150 :) Imagine what a routine operation would have to do.
Just the other day I was browsing jQuery. In general, until that moment, I was more inclined towards mootools, but after a deeper communication with the first of this list I decided that I would stop at this platform.


Here is what I used:
')
I went to the site and went to the plugins section and found one that is completely suitable for my purposes plugins.jquery.com/project/NindafEditableInput

Do not forget to download the Freimfork docs.jquery.com/Downloading_jQuery

He brought him to my mind:

$ ( document ) .ready ( function () {

( function ($) {

$ .fn.editable = function (options) {

var defaults = {
typex: "text" ,
url: "action_ajax.php" ,
actionx: “nothing” ,
id: 0,
style_class: "editable" ,
width: "100px"
};

var options = $ .extend (defaults, options);

return this .each ( function () {

var obj = $ ( this );

obj.addClass (options.style_class);

var text_saved = obj.html ();
var namex = this .id + "editMode" ;
var items = "" ;

obj.click ( function () {
switch (options.typex) {
case "text" : {
var inputx = "<input id = '" + namex + "' type = 'text' style = 'width:" + options.width + "' value = '" + text_saved + "' />" ;
var btnSend = "<input type = 'submit' id = 'btnSave" + this .id + "' value = 'ok' />" ;
var btnCancel = "<input type = 'button' id = 'btnCancel" + this .id + "' value = 'undo' />" ;
items = inputx + btnSend + btnCancel;
break ;
}
}

obj.html (items);

$ ( "#" + namex) .focus (). select ();
$ ( "#btnSave" + this .id, obj) .click ( function () {
$ .ajax ({
type: "GET" ,
data:
{
text_string: $ ( "#" + namex) .val (),
actionx: options.actionx,
idx: options.id
},
url: options.url,
success: function (data) {
if (data> '' ) {
obj.html (data) .css ( 'background-color' , '# 993399' );
} else {
obj.html ( 'Repeat please ...' );
}
text_saved = data;
},
error: function (objHttpRequest, error_str) {
obj.html (error_str);
}
});
})

$ ( "#btnCancel" + this .id, obj) .click ( function () {
obj.hide ();
obj.show (). text (text_saved);


})

return false ;
});
});
};
}) (jQuery);

/ * case events * /
/ * Change Title of Rolic * /
$ ( 'a.editable' ) .each ( function () {
$ ( this ) .editable ({
url: "/ modules/Player/action_ajax.php" ,
actionx: “changeTitle” ,
id: $ ( this ) .attr ( 'title' ),
width: "250px"
});
});

/ * Change Position of Rolic * /
$ ( 'strong.editable' ) .each ( function () {
$ ( this ) .editable ({
url: "/ modules/Player/action_ajax.php" ,
actionx: “changePosition” ,
id: $ ( this ) .attr ( 'title' ), // original position
width: "20px"
});
});

$ ( '.rolicCell' ) .mouseover ( function () {$ ( this ) .addClass ( "highlight" )});
$ ( '.rolicCell' ) .moutout ( function () {$ ( this ) .removeClass ( "highlight" )});
});

* This source code was highlighted with Source Code Highlighter .

If you take this code and load it, you will receive the following:

1. At the onmouseover event on the element (in my case it is tr) with the CSS class .rolicCell, the properties from the CSS class .highlight will be added, respectively, when the onmouseout event, properties of the class .highlight will be removed from the element.

2. For each tag <strong> and <a> with the class .editable, the “edit in place” mechanism will be applied. This means that when you click on this element, the <input> field opens with the current text, the two buttons OK and Cancel.

Now to update the data you need:
1. Click on the element (in our snippet <strong class = ". Editable"> or <a class=" .editable"&>)
2. Confirm with OK.

What's happening:

With AJAX, data is sent to the server side (/ modules/Player/action_ajax.php)

changePosition is an arbitrary parameter. It tells /modules/Player/action_ajax.php to the script which of its methods to use for processing the sent data.

Beginners may have problems with the encoding. Then, when answering from PHP, specify the following encoding:

header ( 'Content-type: application / html; charset = "windows-1251"' , true );
die ($ newTitle);

Remember that AJAX always uses UTF8 when transferring data to the server, and if our database works in windows-1251, you should use the php iconv conversion function. For example:

$ newTitle = iconv ( 'UTF-8' , 'windows-1251' , $ newTitle); The rest principle to taste. You can use POST instead of GET, but you need to learn these details yourself.