Syntax jQuery v interaktívnych formulároch Rails - Javascript, jQuery, Ruby-on-Rails, formuláre

Takže staviam interaktívny formulár pre koľajnicea nie som si istý, ako uviesť viac funkcií jQuery v rovnakom súbore. Zakaždým, keď sa pokúsim pridať druhú sadu kódového jazyka, rozbije to celý súbor.

Tu je kód koľajníc.

<div id="countertype" class="form-group" align="left">
<%= f.label :countertype_id, "What type of countertop material do you need?" %></br>
<%= f.collection_select :countertype_id, Countertype.all, :id, :name, { :prompt => "Select Your Material" }, class: "input-sm"  %>
</div>

Ak používateľ vyberie voľbu id 1 z vyššie uvedeného poľa, ktoré sa nazýva „žula“, zobrazí sa pole pre výber granitecolor. To isté by platilo pre mramor, mastenec atď.

Tu je pole, ktoré by som chcel ukázať:

<div id="granitecolor" align="left" class="form-group">
<%= f.label :granitecolor_id, "What granite color pattern do you want?" %></br>
<%= f.select :granitecolor_id, options_for_select(@granitecolors.map{ |g| [g.name, g.id, {"data-img-src"=>g.url}]}) %>
</div>

OR

<div id="marblecolor" align="left" class="form-group">
<%= f.label :marblecolor_id, "What marble color pattern do you want?" %></br>
<%= f.select :marblecolor_id, options_for_select(@marblecolors.map{ |m| [m.name, m.id, {"data-img-src"=>m.url}] }) %>
</div>

Tu je to, čo mám teraz v mojom súbore jQuery, a funguje to dobre.

$(document).ready(function(){
$("select:not(#countertop_countertype_id)").val("0").imagepicker({
show_label:   true,
clicked:function(){

console.log($(this).find("option[value="" + $(this).val() + ""]").data("img-src"));

}
});

});

Tu by som chcel pridať (alebo variáciu tohto).

$(document).ready(function () {
toggleFields();
$("#countertype").change(function () {
toggleFields();
});

});

function toggleFields() {
if ($("#countertype").val() = 1 )
$("#granitecolor").show();
elseif
($("#countertype").val() = 2 )
$("#marblecolor").show();
}

Akákoľvek pomoc by bola veľmi ocenená! Vďaka!

odpovede:

Oveľa jednoduchšie, ako som si myslel. Hneď po prvom som zverejnil celý kód jQuery.

$(document).ready(function(){
$("select:not(#countertop_countertype_id)").val("0").imagepicker({
show_label:   true,
clicked:function(){

console.log($(this).find("option[value="" + $(this).val() + ""]").data("img-src"));

}
});

});

$(document).ready(function() {

$("#granitecolor").hide();
$("#marblecolor").hide();

$("#countertype").change(function () {
if ($("#countertype option:selected").text() == "Granite"){
$("#granitecolor").show();
$("#marblecolor").hide();

}
else if ($("#countertype option:selected").text() == "Marble"){
$("#granitecolor").hide();
$("#marblecolor").show();

}
else if ($("#countertype option:selected").text() == "Soapstone"){
$("#granitecolor").hide();
$("#marblecolor").hide();

}
});
});