jQuery Mobile Cascading Dropdown Not Working After Post
Looking for some help...I'm using ASP MVC3 and jQuery Mobile. I've built a set of cascading dropdown select lists which work fine when you first open the page. However, after the form is submitted, it returns back to this page so the user can enter more info if needed. The problem is the cascading dropdown no longer works after you are brought back to the page.
I don't see any errors in the console when debugging in Firebug. I have to do a Control + F5 refresh for them to start working again. If I turn off the jQuery mobile ajaxEnabled setting, then it works fine, so it's something to do with the jQuery mobile framework and loading the page I think...
Anyone have any ideas?
Thanks
EDIT: Below is the view for this page. Basically what is happening is the $('#GasStation').change event never seems to fire after the user is brought back to this page. If I disable the jQuery mobile ajax feature, it works fine.
- @model CPMobile.Models.FuelUsageModels.CreateModel
- @{
- Layout = "~/Views/Shared/M/_Layout.cshtml";
- }
- <h2>@ViewBag.Title</h2>
- <div data-theme="b">
- @Html.ValidationSummary(true, "Fuel usage recording failed. Please correct the errors and try again.")
- <div data-role="fieldcontain">
- @using (Html.BeginForm())
- {
- <div data-role="fieldcontain">
- @Html.LabelFor(m => m.GasStation)
- @Html.DropDownListFor(m => m.GasStation, Model.GasStationList, "Select Gas Station...")<br />
- @Html.ValidationMessageFor(m => m.GasStation)
- </div>
- <div data-role="fieldcontain">
- @Html.LabelFor(m => m.FuelType)
- @Html.DropDownListFor(m => m.FuelType, Enumerable.Empty<SelectListItem>(), "Select Fuel Type...")<br />
- @Html.ValidationMessageFor(m => m.FuelType)
- </div>
- <div data-role="fieldcontain">
- @Html.LabelFor(m => m.EquipmentNumber)
- @Html.TextBoxFor(m => m.EquipmentNumber, new { @required = "required" })<br />
- @Html.ValidationMessageFor(m => m.EquipmentNumber)
- </div>
- <div data-role="fieldcontain">
- @Html.LabelFor(m => m.MeasurementValue)
- @Html.TextBoxFor(m => m.MeasurementValue, new { @required = "required", @type = "number" })<br />
- @Html.ValidationMessageFor(m => m.MeasurementValue)
- </div>
- <div data-role="fieldcontain">
- @Html.LabelFor(m => m.MeasurementDatetime)
- @Html.EditorFor(m => m.MeasurementDatetime, new { @required = "required", @type = "date" })<br />
- @Html.ValidationMessageFor(m => m.MeasurementDatetime)
- </div>
- <div data-role="fieldcontain">
- <input type="submit" value="Submit" data-theme="b" />
- </div>
- }
- </div>
- </div>
- @section scripts
- {
- <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
- <script type="text/javascript">
- $('#GasStation').change(function () {
- var selectedGasStation = $(this).val();
- if (selectedGasStation != null && selectedGasStation != '') {
- $.getJSON(
- '@Url.Action("FuelType")',
- { gasStation: selectedGasStation },
- function (fuelTypes) {
- var fuelTypesSelect = $('#FuelType');
- fuelTypesSelect.empty();
- $.each(fuelTypes, function (fuelType, fuelTypeName) {
- fuelTypesSelect.append($('<option/>', {
- value: fuelType.value,
- text: fuelTypeName.text
- }));
- });
- fuelTypesSelect.selectmenu('refresh', true);
- });
- }
- });
- </script>
- }