jeditable avec datepicker

[flyingfr53]

Bonjour,

je voudrais utiliser jeditable avec datepicker dans un tableau.

Pour l'instant après quelques recherches j'en suis à

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
 
	$(function()
   {
 
     $(".date2").editable("savedate.php",
     {
    type : "datepicker",
    indicator :  "Saving...",
    tooltip : "Click to edit..."
 
       });
 
 
});
 
 
  $.editable.addInputType('datepicker', {
    element : function(settings, original) {
        var input = $('<input>');
        if (settings.width  != 'none') { input.width(settings.width);  }
        if (settings.height != 'none') { input.height(settings.height); }
        input.attr('autocomplete','off');
        $(this).append(input);
       return(input);
    },
 
    plugin : function(settings, original) {
        /* Workaround for missing parentNode in IE */
        var form = this;
        settings.onblur = 'ignore';
        $(this).find('input').datepicker().bind('click', function() {
                $(this).datepicker('show');
            return false;
        }).bind('dateSelected', function(e, selectedDate, $td) {
  //          $(form).submit();
        });
    }
});

dans mon script php

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
echo'	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>';
echo'	<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>';
echo' <script type="text/javascript" src ="js/jquery.ui.datepicker-fr.js" > </script>' ;
echo' <script type="text/javascript" src ="js/jeditable.js" > </script>' ;
 
.........
 
echo'<table class="tableau">';
echo'<tr>';
echo'<td id ="1"  class="date2">', $date,'[0][1],'</td><td>-</td>';
echo'</tr>';
 
echo'</table>';

mon champ input s'ouvre bien ainsi que datepicker mais il ne se referme pas et à priori ne renvoie pas ma nouvelle date à savedate.php

J'ai du mal à en comprendre la raison.

merci de vos idées.

[flyingfr53]

Bon,

j'ai finalement réglé mon problème et
pour le suivant qui se posera ce problème ça donne ça
(j'ai laissé en commentaire les lignes modifiées)


dans document ready

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
 
   $(".datepicker2").editable('savedate.php', {
         type: 'datepicker',
         tooltip: 'Click to edit...',
         event: 'click',
         style  : "inherit",
        onblur: 'submit',      
       //  submit: 'OK',
      //   cancel: 'Cancel',
         width: '100px'
        });

en dehors de document ready

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
      $.editable.addInputType('datepicker', {
    element : function(settings, original) {
        var input = $('<input>');
        if (settings.width  != 'none') { input.width(settings.width);  }
        if (settings.height != 'none') { input.height(settings.height); }
        input.attr('autocomplete','off');
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
        /* Workaround for missing parentNode in IE */
        var form = this;
    //    settings.onblur = 'ignore';
        $(this).find('input').datepicker().bind('click', function() {
                $(this).datepicker('show');
            return false;
        }).bind('dateSelected', function(e, selectedDate, $td) {
            $(form).submit();
        });
    }
});

Appel de mon champ editable par datepicker

Code :

1
2
 
echo"<div id = 'test2' class='datepicker2' >01/01/2002</div></br>";

code php pour l'exemple de mise à jour de votre base

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
 
 $date=$_POST['value'];
 $id=$_POST['id'];
 
/*
ici vous modifiez votre base mysql avec $date et $id comme parametres
*/
 
echo $date;
 
?>

Voila bon courage à tous..