I am going by
this at www.mikesdotnetting.com
My variation is the selection in the first dropdown is used to drive the queries in the other two.
The second dropdown populates fine, the third dropdown stays empty.
I can see the second Json.Write complete with the desired data, but I never updates the third dropdown.
What am I missing here?
<div class="form-group"> <label class="col-xs-5 control=label">sizes:</label> <div class="col-xs-7"> @Html.DropDownList("ssizeId", "-- Select --", shoesizes, new { @class= "form-control"}) </div> </div> <br/><br/> <div class="form-group"> <label class="col-xs-5 control=label">Fronts:</label> <div class="col-xs-7"> @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class= "form-control"}) </div> </div> <br/><br/> <div class="form-group"> <label class="col-xs-5 control=label">Rears:</label> <div class="col-xs-7"> @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" }) </div> </div> <br /><br />
<script type="text/javascript"> $(function () { var fshoeSelect = $('#isId'); fshoeSelect.attr('disabled', true); $('#ssizeId').change(function () { var ssizeId = $(this).val(); $.getJSON('@Href("~/Members/Size2GetManufModelF/")' + ssizeId, function (fshoes) { fshoeSelect.attr('disabled', false); fshoeSelect.empty(); fshoeSelect.append( $('<option/>') .attr('value', '') .text('-- Fronts --')); $.each(fshoes, function (index, fshoe) { fshoeSelect.append( $('<option/>') .attr('value', fshoe.isId) .text(fshoe.ManufModel) ); }); }); $.getJSON('@Href("~/Members/Size2GetManufModelR/")' + ssizeId, function (rshoes) { rshoeSelect.attr('disabled', false); rshoeSelect.empty(); rshoeSelect.append( $('<option/>') .attr('value', '') .text('-- Rears --')); $.each(rshoes, function (index, rshoe) { rshoeSelect.append( $('<option/>') .attr('value', rshoe.isId) .text(rshoe.ManufModel) ); }); }); }); }); </script>
wavemaster
I am going by
this at www.mikesdotnetting.comMy variation is the selection in the first dropdown is used to drive the queries in the other two.
The second dropdown populates fine, the third dropdown stays empty.
I can see the second Json.Write complete with the desired data, but I never updates the third dropdown.
What am I missing here?
<div class="form-group"> <label class="col-xs-5 control=label">sizes:</label> <div class="col-xs-7"> @Html.DropDownList("ssizeId", "-- Select --", shoesizes, new { @class= "form-control"}) </div> </div> <br/><br/> <div class="form-group"> <label class="col-xs-5 control=label">Fronts:</label> <div class="col-xs-7"> @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class= "form-control"}) </div> </div> <br/><br/> <div class="form-group"> <label class="col-xs-5 control=label">Rears:</label> <div class="col-xs-7"> @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" }) </div> </div> <br /><br /><script type="text/javascript"> $(function () { var fshoeSelect = $('#isId'); fshoeSelect.attr('disabled', true); $('#ssizeId').change(function () { var ssizeId = $(this).val(); $.getJSON('@Href("~/Members/Size2GetManufModelF/")' + ssizeId, function (fshoes) { fshoeSelect.attr('disabled', false); fshoeSelect.empty(); fshoeSelect.append( $('<option/>') .attr('value', '') .text('-- Fronts --')); $.each(fshoes, function (index, fshoe) { fshoeSelect.append( $('<option/>') .attr('value', fshoe.isId) .text(fshoe.ManufModel) ); }); }); $.getJSON('@Href("~/Members/Size2GetManufModelR/")' + ssizeId, function (rshoes) { rshoeSelect.attr('disabled', false); rshoeSelect.empty(); rshoeSelect.append( $('<option/>') .attr('value', '') .text('-- Rears --')); $.each(rshoes, function (index, rshoe) { rshoeSelect.append( $('<option/>') .attr('value', rshoe.isId) .text(rshoe.ManufModel) ); }); }); }); }); </script>
I am unsure if this helps but this looks wrong (but I could be wrong – so just give it a go)..
$.getJSON('@Href("~/Members/Size2GetManufModelF/" + ssizeId + "")', function (fshoes) {
What I can see is that both the second and third dropdows have the same id
wavemaster
<div class="form-group"> <label class="col-xs-5 control=label">Fronts:</label> <div class="col-xs-7"> @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class= "form-control"}) </div> </div> <div class="form-group"> <label class="col-xs-5 control=label">Rears:</label> <div class="col-xs-7"> @Html.DropDownList("isId", "", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" }) </div> </div>
And then in your js you have selected both of them
wavemaster
var fshoeSelect = $('#isId');
But when you try to fill
rshoeselect
you haven’t defined
rshoeselect.
I suggest giving each a different id then selecting them with your jQuery
mhcodner you are right.
Here is the final code for future reference:
<div class="form-group"> <label class="col-xs-5 control=label">sizes:</label> <div class="col-xs-7"> @Html.DropDownList("ssizeId", "-- Select --", shoesizes, new { @class= "form-control"}) </div> </div> <br/><br/> <div class="form-group"> <label class="col-xs-5 control=label">Fronts:</label> <div class="col-xs-7"> @Html.DropDownList("isfId", "", Enumerable.Empty<SelectListItem>(), new { @class= "form-control"}) </div> </div> <br/><br/> <div class="form-group"> <label class="col-xs-5 control=label">Rears:</label> <div class="col-xs-7"> @Html.DropDownList("isrId", "", Enumerable.Empty<SelectListItem>(), new { @class = "form-control" }) </div> </div> <br /><br />
<script type="text/javascript"> $(function () { var fshoeSelect = $('#isfId'); fshoeSelect.attr('disabled', true); $('#ssizeId').change(function () { var ssizeId = $(this).val(); $.getJSON('@Href("~/Members/Size2GetManufModelF/")' + ssizeId, function (fshoes) { fshoeSelect.attr('disabled', false); fshoeSelect.empty(); fshoeSelect.append( $('<option/>') .attr('value', '') .text('-- Fronts --')); $.each(fshoes, function (index, fshoe) { fshoeSelect.append( $('<option/>') .attr('value', fshoe.isfId) .text(fshoe.ManufModel) ); }); }); }); }); $(function () { var rshoeSelect = $('#isrId'); rshoeSelect.attr('disabled', true); $('#ssizeId').change(function () { var ssizeId = $(this).val(); $.getJSON('@Href("~/Members/Size2GetManufModelR/")' + ssizeId, function (rshoes) { rshoeSelect.attr('disabled', false); rshoeSelect.empty(); rshoeSelect.append( $('<option/>') .attr('value', '') .text('-- Rears --')); $.each(rshoes, function (index, rshoe) { rshoeSelect.append( $('<option/>') .attr('value', rshoe.isrId) .text(rshoe.ManufModel) ); }); }); }); }); </script>