tableau modification dynamique

Version imprimable

11/03/2013, 16h11
mimi6060

tableau modification dynamique

bonjour,
j'aimerais avoir un tableau afficher et quand je clique dessu pouvoir modifier le texte et que sa s'enregistre dans la db comment faire ? quelqu'un a du code ou mot lien de recherche ?
11/03/2013, 16h58
gene69

oh oui. ya des solutions toutes faites.
il faut de l'ajax et du php.

http://www.jquery4u.com/plugins/10-j...ditor-plugins/
http://www.appelsiini.net/projects/jeditable
http://vitalets.github.com/x-editable/demo.html
etc...

merci c'est ce que je recherche mais pourquoi sur leur site ca fonctionne niquel et quand je fait un copier coller rein fonctionne :(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#username').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    title: 'Enter username',
    ajaxOptions: {
        type: 'put'
    }        
});
 
//ajax emulation
$.mockjax({
    url: '/post',
    responseTime: 200,
    response: function(settings) {
        console.log(settings);
    }
});

Code:

1
2
3
4
5
6
7
8
<body>
<p>X-editable: submit via PUT method</p>
<div style="margin: 150px">
    <a href="#" id="username">awesome</a>
 
 
</div>
</body>

parce qu'il faut avoir un html complet en particulier dans la balise <head> les appels aux bibliothèques javascript complet correctement replacée sur ton serveur <script>.

En prime il ne faut pas avoir d'autre erreur JS qui plante le moteur JS avant l’exécution. C'est le moment de montrer ton code HTML complet et de vérifier que tous les fichiers sont retrouvés (firebug à la rescousse!).

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
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Vitaliy Potapov">
        <meta http-equiv="cache-control" content="max-age=0" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
        <meta http-equiv="pragma" content="no-cache" />
 
        <title>X-editable Demo</title>
<!-- il faut la copier depuis le site de l'éditeur de Jquery et la mettre dans ton site, en modifiant le chemin au besoin, c'est une version obsolete de jquery -->
 
        <script src="assets/jquery/jquery-1.9.1.min.js"></script>  
        <script src="assets/mockjax/jquery.mockjax.js"></script>
 
        <!-- momentjs --> 
<!-- il faut la copier depuis le site de l'éditeur et la mettre dans ton site, en modifiant le chemin au besoin -->
        <script src="assets/momentjs/moment.min.js"></script> 
 
        <!-- select2 --> 
        <link href="assets/select2/select2.css" rel="stylesheet">
 
<!-- il faut la copier depuis le site de l'éditeur et la mettre dans ton site, en modifiant le chemin au besoin -->
        <script src="assets/select2/select2.js"></script>         
 
        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]--> 
 
 
        <!-- bootstrap -->
        <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="assets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">  
        <script src="assets/bootstrap/js/bootstrap.js"></script>
 
        <!-- x-editable (bootstrap) -->
<!-- il faut la copier depuis le site de l'éditeur et la mettre dans ton site, en modifiant le chemin au besoin -->
        <link href="assets/x-editable/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
        <script src="assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
 
        <!-- wysihtml5 -->
        <link href="assets/x-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet">  
        <script src="assets/x-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min.js"></script>  
        <script src="assets/x-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>
        <script src="assets/x-editable/inputs-ext/wysihtml5/wysihtml5.js"></script>
 
        <script>
        var f = 'bootstrap';
        </script>
 
        <!-- address input -->
        <link href="assets/x-editable/inputs-ext/address/address.css" rel="stylesheet">
<!-- il faut la copier depuis le site de l'éditeur et la mettre dans ton site, en modifiant le chemin au besoin -->
        <script src="assets/x-editable/inputs-ext/address/address.js"></script> 
 
        <script>
            var c = window.location.href.match(/c=inline/i) ? 'inline' : 'popup';
            $.fn.editable.defaults.mode = c === 'inline' ? 'inline' : 'popup';
 
            $(function(){
                $('#f').val(f);
                $('#c').val(c);
                
                $('#frm').submit(function(){
                    var f = $('#f').val();
                    if(f === 'jqueryui') {
                        $(this).attr('action', 'demo-jqueryui.html');
                    } else if(f === 'plain') {
                        $(this).attr('action', 'demo-plain.html');
                    } 
                });
            });
        </script>        
 
        <style type="text/css">
            body {
                padding-top: 50px;
                padding-bottom: 30px;
            }
            
            table.table > tbody > tr > td {
                height: 30px;
                vertical-align: middle;
            }
        </style>         
 
    </head>

12/03/2013, 10h38
mimi6060

peut-t-on télecharger un zip car j'ai télécharger tout les librairie verifier les liens et rein se passe :(

merci de ton aide :)
12/03/2013, 12h24
gene69

tu peux me montrer le html généré ?

ensuite tu installes un outil de débug web (firebug sous firefox, natif sous chrome) et tu me montres qu'il n'y a pas d'erreur lors du chargement des librairies (j'attends des codes 200/302) en postant la capture d'écran dudit outil ci dessous.

(j'attends un truc comme ça: http://mikael-morvan.developpez.com/...ebugReseau.png)

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
<html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Vitaliy Potapov">
        <meta http-equiv="cache-control" content="max-age=0" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
        <meta http-equiv="pragma" content="no-cache" />
 
        <title>X-editable Demo</title>
<!-- il faut la copier depuis le site de l'éditeur de Jquery et la mettre dans ton site, en modifiant le chemin au besoin, c'est une version obsolete de jquery -->
 
        <script src="assets/jquery/jquery-1.9.1.min.js"></script>  
        <script src="assets/mockjax/jquery.mockjax.js"></script>
 
        <!-- momentjs --> 
<!-- il faut la copier depuis le site de l'éditeur et la mettre dans ton site, en modifiant le chemin au besoin -->
        <script src="assets/momentjs/moment.min.js"></script> 
 
        <!-- select2 --> 
        <link href="assets/select2/select2.css" rel="stylesheet">
 
<!-- il faut la copier depuis le site de l'éditeur et la mettre dans ton site, en modifiant le chemin au besoin -->
        <script src="assets/select2/select2.js"></script>         
 
        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]--> 
 
 
        <!-- bootstrap -->
        <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="assets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">  
        <script src="assets/bootstrap/js/bootstrap.js"></script>
 
        <!-- x-editable (bootstrap) -->
<!-- il faut la copier depuis le site de l'éditeur et la mettre dans ton site, en modifiant le chemin au besoin -->
        <link href="assets/x-editable/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
        <script src="assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
 
        <!-- wysihtml5 -->
        <link href="assets/x-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet">  
        <script src="assets/x-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min.js"></script>  
        <script src="assets/x-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>
        <script src="assets/x-editable/inputs-ext/wysihtml5/wysihtml5.js"></script>
 
        <script>
        var f = 'bootstrap';
        </script>
 
        <!-- address input -->
        <link href="assets/x-editable/inputs-ext/address/address.css" rel="stylesheet">
<!-- il faut la copier depuis le site de l'éditeur et la mettre dans ton site, en modifiant le chemin au besoin -->
        <script src="assets/x-editable/inputs-ext/address/address.js"></script> 
 
        <script>
            var c = window.location.href.match(/c=inline/i) ? 'inline' : 'popup';
            $.fn.editable.defaults.mode = c === 'inline' ? 'inline' : 'popup';
 
            $(function(){
                $('#f').val(f);
                $('#c').val(c);
 
                $('#frm').submit(function(){
                    var f = $('#f').val();
                    if(f === 'jqueryui') {
                        $(this).attr('action', 'demo-jqueryui.html');
                    } else if(f === 'plain') {
                        $(this).attr('action', 'demo-plain.html');
                    } 
                });
            });
        </script>        
 
        <style type="text/css">
            body {
                padding-top: 50px;
                padding-bottom: 30px;
            }
 
            table.table > tbody > tr > td {
                height: 30px;
                vertical-align: middle;
            }
        </style>         
 
    </head>
<body>
<p>X-editable: submit via PUT method</p>
<div style="margin: 150px">
    <a href="#" id="username">awesome</a>
 
 
</div>
</body>	
</html>

screen :
http://img15.hostingpics.net/thumbs/...11Untitled.png

12/03/2013, 15h06
gene69

bon tu es en chemin mais c'est sur "Net" qu'il fallait faire la capture, je suis surpris et pas trop convaincu de ce que je vois.

As-tu reconstitué l'arborescence de x-editable ? avec tous leurs répertoires?!?
12/03/2013, 15h41
mimi6060

en web il m'affiche rein et oui je suis sur d'avoir tout les x-edit qui sont dans le head

http://img15.hostingpics.net/thumbs/...4Untitled2.png
28/06/2014, 21h14
noel_kos

sauriez vous comment récupérer ces valeur en post?