Fix an MVC Application

FratBro23
Category:
Programming
Price: $30 USD

Question description

I have created two drop down lists in an mvc application. When I select an item in the first drop down list, it calls the database and presents a specific list in the next drop down list.

List 1: Country of Birth List 2: City of Birth (This list will change automatically when the user selects an item from the first list)

The code for these lists is something like this:

<divclass="col-md-6 form-group">
    @(this.Html.DropDownListFor(model => model.CountryOfBirth, this.Model.Countries,  new { @class = "form-control cascade-country" }))
</div><divclass="col-md-6 form-group">
    @(this.Html.DropDownListFor(model => model.SearchCriteria.CityOfBirth, this.Model.ProfessionViewModel.Cities, new { @class = "form-control cascade-city" }))
</div>
This works perfectly. When I add 'selectpicker' to this code however...

<divclass="col-md-6 form-group">
    @(this.Html.DropDownListFor(model => model.CountryOfBirth, this.Model.Countries,  new { @class = "form-control **selectpicker** cascade-country" }))
</div><divclass="col-md-6 form-group">
    @(this.Html.DropDownListFor(model => model.SearchCriteria.CityOfBirth, this.Model.ProfessionViewModel.Cities, new { @class = "form-control **selectpicker** cascade-city" }))
</div>

...it breaks the flow. The elements have been transformed into Boostrap-Select selectpickers like intended, and the countries list works as intended (is displayed in javascript bootstrap-select format) but clicking on a country does not automatically change the cities list as it had done so previously. Instead, I have to submit the form after clicking a country to be able to see the country-specific cities in the cities list.

The original implemented javascript code for 'cascade-country' and 'cascade-cities' is as follows:

country dropdown js
(function($){var countryDropdown ={
        init:function(action, allowAny){
            $('.cascade-counrtry').change(function(){var countryId = $(this).find(":selected").val();var city = $('.cascade-city');if(countryId !==''){
                    city.empty();
                    $.getJSON(action +'/'+ countryId,function(data){var items;if(allowAny)
                            items ='<option value>Any City</option>';else
                            items ='<option>Select City</option>';

                        $.each(data,function(i, specification){
                            items +="<option value='"+ specification.Value+"'>"+ specification.Text+"</option>";});
                        city.html(items);
                        city.removeAttr('disabled');});}else{
                    city.empty();if(allowAny)

Now, when I click a country from the countries list, the second box disappears completely. All I have done is added 'selectpicker' to the original class. It has somehow disrupted the cascade. Is there any way to fix this?

Thankyou in advance




Studypool has helped 1,244,100 students
Ask your homework questions. Receive quality answers!

Type your question here (or upload an image)

1825 tutors are online

Brown University





1271 Tutors

California Institute of Technology




2131 Tutors

Carnegie Mellon University




982 Tutors

Columbia University





1256 Tutors

Dartmouth University





2113 Tutors

Emory University





2279 Tutors

Harvard University





599 Tutors

Massachusetts Institute of Technology



2319 Tutors

New York University





1645 Tutors

Notre Dam University





1911 Tutors

Oklahoma University





2122 Tutors

Pennsylvania State University





932 Tutors

Princeton University





1211 Tutors

Stanford University





983 Tutors

University of California





1282 Tutors

Oxford University





123 Tutors

Yale University





2325 Tutors