tableau modification dynamique

**mimi6060** · 11/03/2013, 16h11

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 ?

**gene69** · 11/03/2013, 16h58

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...

**mimi6060** · 11/03/2013, 18h14

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**gene69** · 12/03/2013, 09h42

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**mimi6060** · 12/03/2013, 10h38

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

**gene69** · 12/03/2013, 12h24

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:

)

**mimi6060** · 12/03/2013, 14h54

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

**gene69** · 12/03/2013, 15h06

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?!?

**mimi6060** · 12/03/2013, 15h41

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

**noel_kos** · 28/06/2014, 21h14

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

tableau modification dynamique [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager