jquery: préremplissant champs de saisie semi-automatique

Question

J'utilise le plugin autocomplete de tokenizing pour jquery (http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry). J'utilise principalement Ruby, et je ne suis pas vraiment familier avec javascript, cependant.

Ma configuration de base ressemble à ceci, et fonctionne très bien pour un nouveau formulaire vierge:

$(document).ready(function() { 
    $("#tag_ids_field").tokenInput("/tags", { 
    queryParam: "search" 
    }); 
}); 

Le problème vient quand je tente de préremplir il, comme pour une page d'édition. J'essaye de faire quelque chose comme ceci (où la zone de texte "#tag_ids_field" contient le JSON quand la page est chargée - de cette manière est juste plus propre du côté d'application des choses). Cependant, lorsque la page se charge, je vois qu'elle est juste remplie de centaines d'entrées qui indiquent 'indéfini'. Je reçois ce même si je prends la sortie JSON que Rails offre et essayer de le coller droit dans le fichier .js:

$(document).ready(function() { 
    $("#tag_ids_field").tokenInput("/tags", { 
    queryParam: "search", 
    prePopulate: "[{\"id\":\"44\",\"name\":\"omnis sit impedit et numquam voluptas enim\"},{\"id\":\"515\",\"name\":\"deserunt odit id doloremque reiciendis aliquid qui vel\"},{\"id\":\"943\",\"name\":\"exercitationem numquam possimus quasi iste nisi illum\"}]" 
    }); 
}); 

C'est évidemment pas une solution, je ne l'ai essayé de la frustration et je reçois le même comportement .

Mes deux questions:

Un, pourquoi mes boîtes de texte en cours de remplissage avec des balises « undefined » lorsque je tente de préremplir, et comment puis-je les obtenir avec succès à préremplir?

Deux, je prévois d'avoir beaucoup de champs de saisie semi-automatique comme celui-ci sur la même page (lorsque plusieurs enregistrements sont édités à la fois - ils sont tous interroger au même endroit). Comment puis-je faire en sorte que chaque champ de saisie semi-automatique prenne ses valeurs pré-renseignées à partir de sa propre zone de texte? Quelque chose comme (l'application de ces paramètres à toutes les boîtes d'entrée avec une certaine classe, et pas seulement celle d'un identifiant particulier):

$(document).ready(function() { 
    $(".tag_ids_field").tokenInput("/tags", { 
    queryParam: "search", 
    prePopulate: (the contents of that particular ".tag_ids_field" input box) 
    }); 
}); 

Flash84x: Je ne sais pas ce que vous voulez en venir. tag_ids_field n'est pas un champ db - c'est un attribut virtuel que j'ai défini sur le modèle. Le setter (qui accepte une liste d'identifiants séparés par des virgules) définit la relation de l'enregistrement avec ces balises dans la base de données. Le getter (qui remplit la zone de texte lors du chargement de la page) peut renvoyer tout ce que je veux - en ce moment je l'ai configuré pour retourner simplement les données de balises en cours dans JSON, car tout est plus net.

je peux l'expliquer plus en détail si vous le souhaitez, mais le côté des choses Ruby fonctionne bien et je suis à l'aise avec elle. Je ne connais pas vraiment le javascript, j'ai donc besoin d'aide pour manipuler les données une fois qu'elles sont clientes.

Answer 1

Je pense qu'il serait plus logique pour le contrôleur de fournir les données à la vue de modifier et remplir les champs via Ruby en définissant l'attribut de valeur sur les éléments d'entrée. Même si vous êtes ajaxing dans les formes d'édition, vous pouvez demander au contrôleur de transmettre les données à la vue. Sauf si vous faites quelque chose où les données ne sont pas sauvegardées dans la base de données ...

Peut-être avez-vous besoin de plus d'informations sur les raisons pour lesquelles vous essayez de le faire de cette façon.

Answer 2

Qu'à cela ne tienne, je travaillais dehors:

$(document).ready(function() { 
    $(".tag_ids_field").each(function(index) { 
    var ids = eval($(this).html()); 
    $(this).html(''); 

    $(this).tokenInput("/tags", { 
     queryParam: "search", 
     prePopulate: ids 
    }) 
    }); 
});