Bonjour !

Je voudrais pouvoir modifier à la volée les valeurs de mon tableau php, alors je me suis tournée vers EditInPlace en jQuery, mais je n'arrive pas à l'utiliser entièrement... Si je clique sur ma zone editable on peut modifier le texte en direct, mais le probleme est qu'on ne peut pas enregistrer les modifs car les icones ne s'affichent pas, je ne comprend absolument pas pourquoi ?

Voici mon code, d'abord les éléments éditables :

<?php
// ...
?>
<tr>
	<td contentEditable="true" class="td_clic editableText"><?php echo $row[1]; ?></td>
</tr>
<?php
// ...
?>

Ensuite la page jquery.editableText.js :

/**
 * editableText plugin that uses contentEditable property (FF2 is not supported)
 * Project page - http://github.com/valums/editableText
 * Copyright (c) 2009 Andris Valums, http://valums.com
 * Licensed under the MIT license (http://valums.com/mit-license/)
 */
(function(){
    /**
     * The dollar sign could be overwritten globally,
     * but jQuery should always stay accesible
     */
    var $ = jQuery;
	/**
     * Extending jQuery namespace, we
     * could add public methods here
     */
	$.editableText = {};
    $.editableText.defaults = {		 
		/**
		 * Pass true to enable line breaks.
		 * Useful with divs that contain paragraphs.
		 */
		newlinesEnabled : false,
		/**
		 * Event that is triggered when editable text is changed
		 */
		changeEvent : 'change'
	};   		
	/**
	 * Usage $('selector).editableText(optionArray);
	 * See $.editableText.defaults for valid options 
	 */		
    $.fn.editableText = function(options){
        var options = $.extend({}, $.editableText.defaults, options);
        
        return this.each(function(){
             // Add jQuery methods to the element
            var editable = $(this);
            
			/**
			 * Save value to restore if user presses cancel
			 */
			var prevValue = editable.html();
			
			// Create edit/save buttons
            var buttons = $(
				"<span class='editableToolbar'>" +
            		"<a href='#' class='edit'></a>" +
            		"<a href='#' class='save'></a>" +
            		"<a href='#' class='cancel'></a>" +
            	"</span>")
				.insertBefore(editable);
			
			// Save references and attach events            
			var editEl = buttons.find('.edit').click(function() {
				startEditing();
				return false;
			});							
			
			buttons.find('.save').click(function(){
				stopEditing();
				editable.trigger(options.changeEvent);
				return false;
			});
			
			buttons.find('.cancel').click(function(){
				stopEditing();
				editable.html(prevValue);
				return false;
			});		
			
			// Display only edit button			
			buttons.children().css('display', 'none');
			editEl.show();			
			
			if (!options.newlinesEnabled){
				// Prevents user from adding newlines to headers, links, etc.
				editable.keypress(function(event){
					// event is cancelled if enter is pressed
					return event.which != 13;
				});
			}
			
			/**
			 * Makes element editable
			 */
			function startEditing(){               
                buttons.children().show();
                editEl.hide();
				                
	            editable.attr('contentEditable', true);
			}
			/**
			 * Makes element non-editable
			 */
			function stopEditing(){
				buttons.children().hide();
				editEl.show();				
                editable.attr('contentEditable', false);
			}
        });
    }
})();

Et enfin la page editableText.css :

.editableText:hover 
{
	outline: 1px dashed grey;
}

.editableToolbar:hover + * 
{
	outline: 1px dashed grey;
}

.editableToolbar 
{
	
}

.editableToolbar a
{
    display: block;
    width: 17px;
    height: 15px;
    float: left;
    margin: 2px;
}

.editableToolbar .edit 
{	
	background: url("icons.png");
}

.editableToolbar .save 
{
    background: url("icons.png") -16px 0;
}

.editableToolbar .cancel 
{
    background: url("icons.png") 25px 0;
}

En gros j'en arrive là :


mais ça devrait afficher ça avec en plus les icones suivants sur chaque ligne pour que je puisse effectivement modifier la ligne en question :


Pourtant j'ai bien mis ceci dans mon head :

<script src="../_JS/jquery.editableText.js" type="text/javascript"></script>
<link href="../_CSS/editableText.css" rel="stylesheet" type="text/css" />

Et ceci :

<script>
		jQuery(function($){
            $('td.editableText').editableText({
				newlinesEnabled: false
			});
			
			$.editableText.defaults.newlinesEnabled = true;

			$('td.editableText').editableText();
			
			$('.editableText').change(function(){
				var newValue = $(this).html();
				
				// do something         
			    // For example, you could place an AJAX call here:  
				var rep = $.ajax({
					url:'webService.php',
					data: 'package=ajout&service=edit&newValue='+newValue,
					cache: false,
					async: false
				}).responseText;
				alert(rep);
				if(rep)
				{
					$('.editableText', data).editableText({
					      newlinesEnabled: false
					});
				}
				
			});
        });
</script>

Une idée ?

Cordialement
Ginger

Bonjour

J'ai cherché depuis hier modifié des éléments mais ça n'a rien changé, j'ai aussi utilisé Jeditable à la place, mais ça fonctionnait encore moins. Etant donc revenue à editable, ce dont j'ai parlé dans le post précédent, je reviens vers vous pour voir si vous n'avez vraiment aucune piste ?

Cordialement
Ginger

Salut,

Est-ce que tu as bien l'image icons.png juste à côté de la CSS editableText.css ?
De plus, je pense qu'il faudrait que tu t'instruises un peu plus sur l'aJaX et son fonctionnement. Le code suivant n'est pas correct :

var rep = $.ajax({
	url:'webService.php',
	data: 'package=ajout&service=edit&newValue='+newValue,
	cache: false,
	async: false
}).responseText;

Il manque un callback