In my form I have two divs (bench_stock_items and non_bench_stock_items) with same fields with same ids. Using jQuery I disable one and enable other depending upon the value selected in client_id select which is not part of divs. I have a function that shows/hides different forms based on values selected in media_id select which is part of divs. My function works only for the select in first div which is loaded as enabled and not for the second div that is loaded disabled. I have tried almost everything. I am able to find the element:enabled properly in first div but not in second div.
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#non_bench_stock_fields :input").removeAttr("disabled", true);
$("#bench_stock_fields :input").attr("disabled", true);
$("#artifact_client_id").change(function () {
if ($("#artifact_client_id option:selected").text() == "Bench Stock") {
$("#bench_stock_fields").slideDown("fast");
$("#bench_stock_fields :input").removeAttr("disabled");
$("#non_bench_stock_fields").slideUp("fast");
$("#non_bench_stock_fields :input").attr("disabled", true);
} else {
$("#non_bench_stock_fields").slideDown("fast");
$("#non_bench_stock_fields :input").removeAttr("disabled");
$("#bench_stock_fields").slideUp("fast");
$("#bench_stock_fields :input").attr("disabled", true);
}
});
$("#artifact_media_id:enabled").change(function () {
var enabled_media_id = null;
enabled_media_id = $("#artifact_media_id:enabled");
var enabled_evidence_type_id = null;
enabled_evidence_type_id = $("#artifact_evidence_type_id:enabled");
if ($(enabled_media_id).find('option:selected').text() !== "Please select") {
$("#show_selected_media_fields").slideDown("fast");
$("#show_selected_media_fields :input").removeAttr("disabled", true);
$.post("/artifacts/show_selected_media_fields", {
media_type: $(enabled_media_id).find('option:selected').text(),
evidence_type_id: $(enabled_evidence_type_id).find('option:selected').val()
}, function (data) {
$("#show_selected_media_fields").html(data);
});
} else {
$("#show_selected_media_fields").slideUp("fast");
$("#show_selected_media_fields :input").attr("disabled", true);
}
$('#printHere').html(enabled_media_id);
});
$("#artifact_evidence_type_id:enabled").change(function () {
var enabled_evidence_type_id = null;
enabled_evidence_type_id = $("#artifact_evidence_type_id:enabled");
if ($(enabled_evidence_type_id).find('option:selected').text() == "Deliverable, (DC)") {
$("#logical_items_form").slideDown("fast");
$("#logical_items_form :input").removeAttr("disabled", true);
} else {
$("#logical_items_form").slideUp("fast");
$("#logical_items_form :input").attr("disabled", true);
}
});
});
My ruby view html:
<div id="bench_stock_fields" class="hide">
<li><%= f.label :evidence_number, :class => "required" %><%= f.text_field :evidence_number %></li>
<li><%= f.label :evidence_type, :class => "required" %><%= f.collection_select(:evidence_type_id, EvidenceType.where("code='BS'"), :id, :name_and_code) %></li>
<li><%= f.label :media_id, :class => "required" %><%= f.collection_select(:media_id, Media.where("name = 'External Hard Drive' or name = 'Internal Hard Drive' or name = 'Thumb Drive'"), :id, :name) %></li>
<li><%= f.label :received_location,:class => "required" %><%= select_tag(:current_location_id, options_from_collection_for_select(Location.where("location = 'Lab' and rack = 'N/A' and bin = 'Bench Stock'"), :id, :location_name)) %></li>
</div>
<div id="non_bench_stock_fields" >
--- same fields as above...
blah... blah... blah...
============================================================================
OK I wrote a simplified version the code so that it is more understandable. Here is my complete code:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="application.css">
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#div_car :input").attr("disabled",true);
$("#div_car").attr("disabled",true);
$("#decide").change(function(){
if ($("#decide option:selected").text() == 'Car') {
$("#div_car").slideDown("fast");
$("#div_car").removeAttr("disabled");
$("#div_car :input").removeAttr("disabled");
$("#div_bus").slideUp("fast");
$("#div_bus").attr("disabled",true);
$("#div_bus :input").attr("disabled",true);
} else {
$("#div_bus").slideDown("fast");
$("#div_bus").removeAttr("disabled");
$("#div_bus :input").removeAttr("disabled");
$("#div_car").slideUp("fast");
$("#div_car").attr("disabled",true);
$("#div_car :input").attr("disabled",true);
}
});
$("#cars:enabled").change(function(){
var enabled_select_id = $("#cars:enabled");
$('#printHere').html(enabled_select_id);
});
});
</script>
<!-- we will add our HTML content here -->
<div id="div_decide">
<select id = "decide" name="decide">
<option value="buss">Buss</option>
<option value="car">Car</option>
</select>
</div>
<div id="div_car" class="hide">
<select id = "cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div id="div_bus">
<select id = "cars" name="cars">
<option value="volvo selected="selected">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
Enabled Select will print here <br/><br/>
<span id="printHere"></span>
</body>
</html>
My application.css is :
.hide{ display:none;}
Basically here is what I need to do:
I need to load div_car as disabled and hidden. Depending upon the value selected in select “decide”, I need to toggle div_bus with div_car. Depending upon the value selected in CURRENTLY ENABLED select “cars” I need to show something… say print element. It only works for select car in div_bus but does not work when it is toggled with div_car.
I solved this by using html options in rails to set differnet ids for the two collection_selects