Comment ajouter dynamiquement des champs de texte sur Rails 4? (pas imbriqué)

Question

Je suis très nouveau sur Rails et j'ai besoin d'ajouter/supprimer dynamiquement des champs de saisie sur un "form_for" dans Rails. J'utilise ces entrées pour modifier le profil d'un utilisateur.

est ici l'extrait que je veux tourner dynamique:

<%= f.label :languages, "Languages" %> 
<%= f.text_field :languages, class: "shortInput", value: @parsed_json_user['user']['languages']%> <br /> 

Je l'ai vu de nombreux tutoriels en utilisant les attributs imbriqués (je ne suis même pas exactement sûr de ce que ceux-ci sont) et tel, mais je ne vais pas utiliser les modèles . Comme vous pouvez le voir, je veux juste un objet avec une multitude de valeurs (par exemple tableau) puisque je vais utiliser une API pour mettre à jour le modèle "User".

je besoin de quelque chose comme:

Langues: Anglais
supprimer
ajouter de nouvelles

Dois-je utiliser fields_for? Ou en quelque sorte utiliser JS ou JQuery? Toute aide serait appréciée.

J'ai cherché partout pour une question similaire et je n'en ai trouvé aucun mais si vous en connaissez réellement ou en trouvez un, me pointer dans la bonne direction serait merveilleux!

Merci à l'avance

Answer 1

@languages ​​= Langues de l'utilisateur

f.collection_select :user_languages[], @languages, :id, :name , {hide_label: true, :selected => @languages.first.id} , {:style => "width: 120px",:required => true} 

Answer 2

Mise à jour: Pour formulaire unique, aucune imbrication - une option consiste à pirater ensemble votre propre jquery. J'avais utilisé un site différent pour mes tests, mais ce Jquery example était celui que j'ai trouvé plus facile. J'ai enlevé les choses au sujet d'un compteur pour les champs max ... il va dans les /app/assests/javascript/.js ...

$(document).ready(function() { 

    $(".add_field_button").click(function(e){ //on add input button click 
     e.preventDefault(); 
      $('.input_fields_wrap').append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
     } 
    }); 

    $(".input_fields_wrap").on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); 
    }) 
}); 

Et le code html ...

<div class="input_fields_wrap"> 
     <button class="add_field_button">Add More Fields</button> 
     <div><input type="text" name="mytext[]"></div> 
    </div> 

---

Si vous n'avez pas encore de chance - Cocoon Gem ou railscast 197/198 fera ce dont vous avez besoin avec jquery qui est dynamique. Ignorez les parties sur l'imbrication et prenez simplement ce dont vous avez besoin.

Aussi, je suis toujours fouiner dans turbolinks qui avait une mise à jour récemment ... vous pourriez être en mesure de trouver une réponse là-bas ... probablement pas exactement ce que vous voulez ...

De ce Je peux dire qu'il est basé sur deux chemins que vous écrivez dans des rails, qui sont ensuite construits via la jquery qui agit sur (ajouter/supprimer): avant ou: après le link_to_add_association ou link_to_remove_association afin d'ajouter/cacher des champs de vue sur le dom & alors le bouton de mise à jour pousse réellement le désordre entier à travers activeRecord dans la base de données. Etes-vous sûr de vouloir un champ de texte pour cela?