Ajout de param dans jeditable

**Shandler** · 22/12/2008, 11h05

Bonjour,

J'utilise Jeditable (jeditable) pour editer des element ce qui marche trés bien et donc j'ai vue qu'on pouvai rajouter d'autre truc particulier en plus des textearea,select.... donc j'ai essayé d'insérer ui.datepicker (jquery-ui-datepicker) ce que j'ai réussi a moitié car ca beug car ca ne prend pas en compte la date sélectionner et je voie pas comment faire.

Merci a vous.

Code pour ajouter une nouvelle option dans jeditable

Code :

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
 
 $.editable.addInputType('datepicker', {
    /* create input element */
    element : function(settings, original) {
        var input = $('<input>');
        $(this).append(input);
        //$(input).css('opacity', 0.01);
        return(input);
    },
    /* Attach Timepicker plugin to the default hidden input element. */
    plugin:  function(settings, original) {  
        var form = this;
        settings.onblur = 'cancel'      
        $("input", this).datepicker()               
    }
});

Code pour appeler le nouveau element :

Code :

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

1
2
3
4
5
6
7
8
9
10
  $(".edit_date").editable("ajax_admin.php5", { 
      indicator : "<img src='../img/indicator.gif'>",
      type      : 'datepicker',
      onblur : 'submit',
      select : true,
      submit : 'OK',
      cancel : 'cancel',
      style  : "inherit"
      }      
  });

**Kerod** · 22/12/2008, 13h51

Salut,

Il doit certainement avoir une erreur qui est transmise par la console JavaScript ?

**Shandler** · 22/12/2008, 14h01

j'ai aucune erreur la est le probleme.

Merci a toi.

**Kerod** · 22/12/2008, 15h52

Étonnant

Est-ce normal le manque de ; dans ta fonction plugin ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.editable.addInputType('datepicker', {
    /* create input element */
    element : function(settings, original) {
        var input = $('<input>');
        $(this).append(input);
        //$(input).css('opacity', 0.01);
        return(input);
    },
    /* Attach Timepicker plugin to the default hidden input element. */
    plugin:  function(settings, original) {  
        var form = this;
        settings.onblur = 'cancel'      
        $("input", this).datepicker()               
    }
});

**Shandler** · 22/12/2008, 15h59

Oui c'est bizarre il me renvoie pas d'erreur, jai rajouter le poitn virgule mais ca change rien.

Merci a toi.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 $.editable.addInputType('datepicker', {
    /* create input element */
    element : function(settings, original) {
        var input = $('<input>');
        $(this).append(input);
        //$(input).css('opacity', 0.01);
        return(input);
    },
    /* Attach Timepicker plugin to the default hidden input element. */
    plugin:  function(settings, original) {  
        var form = this;
        settings.onblur = 'cancel'      
        $("input", this).datepicker();               
    }
});

**Kerod** · 22/12/2008, 16h00

Et après cancel ?

**Shandler** · 22/12/2008, 16h00

Ah oui mais toujours pareil.

Merci a toi.

**Kerod** · 22/12/2008, 16h11

On peut voir en ligne ?

**Shandler** · 22/12/2008, 16h20

c tous en local mais je peux te refiler le code html et toi tu auras juste a récupérer jeditable et jquery si ca te derange pas.

Merci a toi.

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>/title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="ajax/ui.datepicker.css" />
<script type="text/javascript" src="ajax/jquery.js"></script>
<script type="text/javascript" src="ajax/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="ajax/edit.datepicker.js"></script>
<script type="text/javascript" src="ajax/ui.datepicker.js"></script>
<script type="text/javascript" src="ajax/ui.datepicker-fr.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
  $(".edit_date").editable("test.php", { 
      indicator : "<img src='../img/indicator.gif'>",
      type      : 'datepicker',
      onblur : 'submit',
      select : true,
      submit : 'OK',
      cancel : 'cancel',
      style  : "inherit"  
  });
});
</script>
</head>
<body>
      <p class="edit_date" id="12">12/02/2009</p>
</body>
</html>

**Kerod** · 22/12/2008, 16h23

Fournis tout en zip attaché à ton post

**Shandler** · 22/12/2008, 16h30

Pour l'exemple que je join essaye en changeant de mois.

merci a toi

**Kerod** · 22/12/2008, 17h15

Donc le vrai problème ne vient pas du code enfin si mais pas de ce que l'on pense.

En fait la soumission serveur n'est pas effectuée donc pas de stockage ni modification.

Il faut trouver le bon event pour que la soumission soit effective

**Shandler** · 22/12/2008, 17h18

Ok car logiquement la valeur saisi dois s'afficher dans le input texte pis on valide avec ok ou on cancel, par event tu parle de click ou autre c'est bien ca ?

Merci a toi.

**Kerod** · 22/12/2008, 18h19

Ce n'était pas simple du tout mais une fois que l'on se plonge dans la doc de jeditable on y arrive. La solution est très simple :

Code :

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
 $.editable.addInputType('datepicker', {
 
    /* create input element */
 
    element : function(settings, original) {
 
        var input = $('<input>');
 
        $(this).append(input);
 
        //$(input).css('opacity', 0.01);
 
        return(input);
 
    },
 
    /* Attach Timepicker plugin to the default hidden input element. */
 
    plugin:  function(settings, original) {
 
        var form = this;
 
        settings.onblur = 'ignore';
 
        $("input", this).datepicker();
 
    }
 
});

**Shandler** · 23/12/2008, 10h02

Merci beaucoup de ton aide ca marche super bien, c'est vrai qu'il n'y avait pas grand chose sinon j'ai un beug bizarre mais je pense que ca vient de jeditable car en faite quand je clique sur mon champ pour modifier et que je clique sur ok ou cancel puis je retourne sur ce meme champ, y a un espace devant le texte dans l'input, et plus je fais cette manip et plus il y a un espace.

Je te remercie déjà pour tous l'aide que tu as pu m'apporté.