Publication de valeur sur le serveur à l'aide de jquery ui-autocomplete et jeditable

Question

J'ai récemment mis à jour jQuery vers 1.4.2 et jQuery-UI vers 1.8.2. Erreur ou pas, j'ai commencé à me tirer les cheveux quand j'ai essayé de combiner le nouveau ui-autocomplete (pas l'ancien de bassistance.de) avec jeditable. Lorsque j'édite un champ dans ma page (généralement une travée avec un identifiant unique), l'utilisateur commence à taper le nom de quelqu'un et je parviens à afficher le nom de l'étiquette + nom dans le champ de saisie généré par jeditable. Mon problème est que certains contacts dans ma base de données ont le même nom + nom de famille. Donc l'envoi du résultat "nom + nom" ne me permettra pas d'avoir le bon contact. Au lieu de cela, j'ai besoin d'envoyer l'identifiant associé à ce contact. Est-ce que quelqu'un a réussi à créer une nouvelle entrée personnalisée impliquant le dernier ui-autocomplete où l'ID serait stocké dans une entrée cachée puis posté dans le script de traitement alors que l'étiquette est affichée dans le champ de saisie visible? Question supplémentaire: quelqu'un peut-il confirmer qu'il n'est absolument pas possible d'utiliser la saisie semi-automatique lorsque l'étiquette est affichée dans le champ de saisie et l'identifiant stocké dans la valeur de la même entrée? Une entrée cachée est toujours nécessaire non?

Un grand merci à l'avance

Answer 1

Après plusieurs jours d'essayer (mes compétences javascript être tout à fait mauvais), j'ai réussi à obtenir quelque chose au travail en utilisant le code de Pete Freitag (voir le commentaire ci-dessus).

Le code est probablement moche (c'est pourquoi je vous le soumets, tout commentaire constructif est le bienvenu).

$.editable.addInputType('autocompleteCON', { 
     element : $.editable.types.text.element, 
     plugin : function(settings, original) { 
      $('input', this).each(function() { 
       /* change name of original input */ 
       $(this).attr('name', 'cellvalue_autocomplete_label'); 
       $(this).attr('id','parentInput'); 
       /* create new hidden input with name of orig input */ 
       $(this).after('<input type="hidden" name="cellvalue" id="cellvalue_autocomplete_hidden" />'); 
       $(this).autocomplete({ 
        source: "tab_autocomplete.php?cat=CON", 
        change: function(event, ui) { 
         if (!ui.item) { 
          $(this).val(''); 
          $('#cellvalue_autocomplete_hidden').val(''); 
          return false; 
         } 
        }, 
        select: function(event, ui) { 
         $('#cellvalue_autocomplete_hidden').val(ui.item.value); 
         $('#parentInput').val(ui.item.label); 
         return false; 
        } 
       }); 
      // alert(result); 
      }).data("autocomplete")._renderItem = function(ul, item) { 
        return $("<li></li>") 
         .data("item.autocomplete", item) 
         .append("<a>" + item.label + " <span style='font-size:0.8em;font-weight:normal;max-width:650px;'>(" + item.desc + ")</span></a>") 
         .appendTo(ul); 
      }; 
     }, 
     submit: function (settings, original) { 
      var value = $('#cellvalue_autocomplete_hidden').val(); 
      $('input', this).val(value); 
     } 
}); 

$(".autocompleteCON_con").editable("update.php", { 
    id   : 'cellid', 
    name  : 'cellvalue', 
    event  : 'dblclick', 
    submitdata : {id: "<?php echo $id_contact; ?>"}, 
    type  : 'autocompleteCON', 
    indicator : 'Saving...', 
    select  : true, 
    tooltip  : 'Double click to edit...', 
    placeholder : '<b style="color:#AAA">Edit</b>', 
    style  : 'display: inline', 
    height  : '25px', 
    width  : '150px', 
    onblur  : 'ignore', 
    submit  : 'Save', 
    cancel  : 'Cancel', 
    callback : function(value, settings) { 
     // some function 
      } 
});