web2ajax : The Blog

Avant toute chose : cet outil est magique !!

Le site que je suis en train de faire est un framework maison qui me permet entre autre de faire un site multilingue. Et c’est en ces moments que le EditInPlace prend tout sons sens : plutot que de passer par une interface d’admin pour traduire et déclarer une variable de langue une à une, je peux faire ça en live sur le site !

Pour ce qui est du plugin, tout se trouve sur le site : http://code.google.com/p/jquery-in-place-editor/

Quand à sa mise en place, c’est on ne peut plus facile :

1/ Tout ce qui est éditable est entouré de :

echo "<span class='editInPlace_i18n' id='lang__$var'>$var</span>";

2/ On applique le EditInPlace sur tous les éléments que l’on souhaite pouvoir éditer :

$(document).ready(function(){
 $(".editInPlace_i18n").editInPlace({
 url: "index.php?module=core_admin&action=update_i18n",
 bg_over: "transparent",
 value_required: true,
 params: "ajax=yes"
 });
});

3/ Mon action update_i18n récupère les données en POST et fait un update en base :

#@ Update lang var in DB
// Default lang
$def_lang = 'fr' ;

// Get var to update
$var_update = str_replace('lang__', '', $_POST['element_id']) ;

// Do update & write new text
if ( set_lang($var_update, $def_lang, $_POST['update_value']) ) {
echo $_POST['update_value'] ;
} else {
echo $_POST['original_html'] ;
}

4/ Pour éditer les liens tranquillement, il faut également ‘unbinder’ tous les liens ‘, pour ça, il suffit d’ajouter :

$("a").unbind().bind("click", function(e) { e.preventDefault();} ) ;

Je me sers d’une variable de session et d’un champ caché accessible par Javascript pour mettre à ‘On’ ou ‘Off’ le mode d’édition.

Bien sur, ce sera à adapter à votre environnement, mais tout est très bien expliqué sur le lien plus haut.

Vous savez tout maintenant, alors bon EditInPlace à tous !!