Utilisation de ruby ​​"build" dynamiquement avec jQuery dans les rails

Question

Vous avez une application rails qui a un formulaire (nouvelle action) avec un select avec une plage de valeurs d'options de 1 à 5. Lorsque les utilisateurs sélectionne l'une des options que je dois utiliser ruby "build" pour construire un certain nombre d'objets en fonction de ce que la valeur de sélection est.

Ainsi, lorsque l'utilisateur sélectionne 2 dans la zone de sélection le code suivant doit exécuter:

@rooms = 2.times { @travel.rooms.build } 

également lorsque les utilisateurs changent cette valeur de 2 à 1, le code doit être remplacé par

@rooms = 1.times { @travel.rooms.build } 

Fondamentalement, j'ai du mal à trouver un moyen de définir la valeur dans jQuery, puis de le mettre à jour dans le code HTML. Obtenir la valeur n'est pas un problème, c'est comment la changer dynamiquement dans le code html.

Des conseils sur la façon de procéder?

Merci, Amund

Edition - Précision

j'ai besoin que cela se produise avant que le formulaire est soumis.

@rooms = 2.times { @travel.rooms.build } 

Donc, tout changement à ce qui précède doit se produire lorsque l'utilisateur est sur la page de formulaire.

Answer 1

J'ai trouvé un moyen qui fonctionne, bien que ce ne soit pas joli et ne fonctionne pas si l'utilisateur n'a pas JS (Dans mon cas, si l'utilisateur n'a pas JS, ils peuvent gtfo).

Ci-dessous le code nécessaire pour que cela fonctionne. (Gardez à l'esprit que cela fonctionne, mais je n'ai rien fait pour le rendre plus concis ou mieux). ps. Ça ressemble à l'enfer.

$('#room_details .fields').hide(); 
$('#room_details .fields:eq(0)').show(); 
$('.fields:eq(0)').find('.is_wanted').val("true"); 
$('#number_of_rooms').change(function() { 
$('#room_details .fields').hide(); 
$('.is_wanted').val(""); 
if($(this).val() == '1') { 
    $(".fields:eq(0)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
else if ($(this).val() == '2'){ 
    $(".fields:eq(0), .fields:eq(1)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
else if ($(this).val() == '3'){ 
    $(".fields:eq(0), .fields:eq(1), .fields:eq(2)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
else if ($(this).val() == '4'){ 
    $(".fields:eq(0), .fields:eq(1), .fields:eq(2), .fields:eq(3)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
else if ($(this).val() == '5'){ 
    $(".fields:eq(0), .fields:eq(1), .fields:eq(2), .fields:eq(3), .fields:eq(4)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
}); 

Ensuite, dans le modèle que nous faisons:

accepts_nested_attributes_for :rooms, :allow_destroy => true, :reject_if => proc { |attrs| attrs['is_wanted'].blank? } 

Où is_wanted est un champ caché sous la forme pour chaque chambre. Je suis sûr qu'il y a des manières plus jolies, mais au moins cela fonctionne.

Des pensées?

Answer 2

Je ne sais pas si vous avez besoin d'aide Ruby ou d'aide jQuery? Eh bien, voici un peu de Ruby, de toute façon. I comprend la validation d'entrée pour faire bonne mesure:

count = (params[:number_of_rooms] || 1).to_i 
count = [1, [5, count].min].max 
@rooms = (0...count).collect { @travel.rooms.build } 

---

Je ne suis pas enclin à écrire une solution à JS, mais en général, vous ajoutez un observateur au champ de sélection, puis ajoutez les champs par créer des éléments HTML dom. En supposant que vous avez déjà l'un des formulaires construits sur la page, vous pouvez probablement faire quelques trucs pour cloner les champs pour créer les champs supplémentaires. Une autre façon est de toujours avoir 5 ensembles de champs et juste afficher/masquer les ensembles de champs dont vous avez besoin. Bonne chance!