Jquery EditInPlace et affichage icones ?

[ginger4957]

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 :

Code :

1
2
3
4
5
6
7
8
9
10
 
<?php
// ...
?>
<tr>
	<td contentEditable="true" class="td_clic editableText"><?php echo $row[1]; ?></td>
</tr>
<?php
// ...
?>

Ensuite la page jquery.editableText.js :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
/**
 * editableText plugin that uses contentEditable property (FF2 is not supported)
 * Project page - <a href="http://github.com/valums/editableText" target="_blank">http://github.com/valums/editableText</a>
 * Copyright (c) 2009 Andris Valums, <a href="http://valums.com" target="_blank">http://valums.com</a>
 * Licensed under the MIT license (<a href="http://valums.com/mit-license/" target="_blank">http://valums.com/mit-license/</a>)
 */
(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 :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
.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à :
voir l'image en pj

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

Pourtant j'ai bien mis ceci dans mon head :

Code :

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

Et ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<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