1

ヘルプを探しています... ASP MVC3 と jQuery Mobile を使用しています。最初にページを開いたときに正常に動作する一連のカスケード ドロップダウン選択リストを作成しました。ただし、フォームが送信されると、ユーザーが必要に応じてさらに情報を入力できるように、このページに戻ります。問題は、ページに戻った後、カスケード ドロップダウンが機能しなくなることです。

Firebug でデバッグするとき、コンソールにエラーは表示されません。再び作業を開始するには、Control + F5 の更新を行う必要があります。jQuery モバイルの ajaxEnabled 設定をオフにすると、正常に動作するので、jQuery モバイル フレームワークとページの読み込みに関係があると思います...

誰にもアイデアはありますか？

ありがとう

編集: 以下は、このページのビューです。基本的に何が起こっているかというと、ユーザーがこのページに戻った後に $('#GaStation').change イベントが発生しないようです。jQuery モバイル ajax 機能を無効にすると、問題なく動作します。

@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>
}
4

0 に答える 0