Ajout de param dans jeditable

Version imprimable

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:

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:

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"
      }      
  });

22/12/2008, 13h51
Kerod

Salut,

Il doit certainement avoir une erreur qui est transmise par la console JavaScript ?:roll:
22/12/2008, 14h01
Shandler

j'ai aucune erreur la est le probleme.

Merci a toi.

Étonnant 8O

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

Code:

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()               
    }
});

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

Merci a toi.

Code:

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();               
    }
});

22/12/2008, 16h00
Kerod

Et après cancel ?
22/12/2008, 16h00
Shandler

Ah oui mais toujours pareil.

Merci a toi.
22/12/2008, 16h11
Kerod

On peut voir en ligne ? :roll:

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:

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>

22/12/2008, 16h23
Kerod

Fournis tout en zip attaché à ton post ;)
22/12/2008, 16h30
Shandler

1 pièce(s) jointe(s)

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

merci a toi
22/12/2008, 17h15
Kerod

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

Il faut trouver le bon event pour que la soumission soit effective
22/12/2008, 17h18
Shandler

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.

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:

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();
 
    }
 
});

23/12/2008, 10h02
Shandler

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é.
23/12/2008, 14h01
Kerod

C'est bizarre parce que dans mes tests tout fonctionnait très bien :roll:
23/12/2008, 14h02
Shandler

tu pense que c'est le code php que j'utilise ?
23/12/2008, 14h06
Kerod

Ça peut venir de là vu que c'est lui qui renvoi le résultat à afficher :roll:
23/12/2008, 14h09
Shandler

Pourtant jai mit la fonction trim pour l'affichage ce qui enleve les espace avant et aprés
23/12/2008, 14h11
Kerod

Dans ce cas, il faut le code HTML, JavaScript et PHP pour tester de mon côté
23/12/2008, 14h29
Shandler
Bas en faite y a pas grand chose, a part que sur ma page où il y a les jeditable il y a une requete sql pour insérer les elements éditer ou pas et sinon dans le fichier test.php y a ca :
Code:

1 2 3 //juste la il y a une requete pour update la bdd en recupere l'id grace a $_POST['id'] echo stripslashes(trim($_POST['value']));
Merci a toi.
23/12/2008, 14h33
Kerod

Ton nouveau HTML :roll:

Dans mon teste j'ai juste rajouter le code js ci-dessous + la balise html qui va bien.
Le param action me permet de savoir grace a $_POST['action'] quelle champ j'edit.
Code:

1 2 3 4 5 6 7 8 9 10 11 $(".edit_other").editable("test.php", { indicator : "<img src='indicator.gif'>", onblur : 'submit', select : true, submit : 'OK', cancel : 'cancel', style : "inherit", submitdata : function() { return {action : 2}; } });
Code:

<p class="edit_other" id="12">tesss</p>

Merci a toi

24/12/2008, 11h33
Shandler

Bon j'ai fini par touver le truc qui me rajouter des espace en début de ligne en faite c'etais une classe qui me sert a gérer mes requete sql qui je ne sais toujours pas pourquoi me rajouter des espaces enfin voila.

Merci beaucoup de ton aide et bonne fete a toi.