javascript - JQuery-コールバックドロップダウンリストの読み込み

Question

ロードされた後、ドロップダウンリストから値を選択する必要があります。

編集：私が持っているビューに関連付けられたスクリプトで：

//Dropdown cascade call when trigger is called and fill councilDropdown:
$("#districtDropdown").cascade({
    url: "/Address/ListCouncilByDistrict",
    paramName: "districtId",
    firstOption: 'Selecione o Concelho...',
    childSelect: $("#councilDropdown")
});

$("#PostalCode").keyup(function () {
loadPTPostalCode();
});

$("#PostalCodeExtension").keyup(function () {
    loadPTPostalCode();
});


function loadPTPostalCode()
{
  if ($("#PostalCode").val() >= 1000) {
    $.ajax({
        url: '/Address/GetPTPostalCode',
        type: "POST",
        dataType: "json",
        data: { postalCode: $("#PostalCode").val(), postalCodeExtension: $("#PostalCodeExtension").val() },
        success: function (data) {
            if (data != null) {
                $("#districtDropdown").val(data.PTDistrict_Id); // Set the Dropdown value
                $('#districtDropdown').trigger('change'); // Trigger (force the dropdown to load

                // *** This is done to soon, the dropdownlist of the Councils is not all loaded yet ***
                $("#councilDropdown").val(data.PTCouncil_Id);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus)
        }
    });
}

}

編集：ビュー

@model Heelp.ViewModels.AddressPTViewModel

<h2>Create</h2>

@using (Ajax.BeginForm(MVC.Address.CreateAddressPT(), new AjaxOptions { OnSuccess = "showLoginConfirmationResultMessage" }, new { @id = "AddressForm" }))
{
@Html.AntiForgeryToken()

<div class="address1">
    @Html.LabelFor(model => model.Address1)
    @Html.TextBoxFor(model => model.Address1)
    @Html.ValidationMessageFor(model => model.Address1)
</div>
<div class="address2">
    @Html.TextBoxFor(model => model.Address2)
    @Html.ValidationMessageFor(model => model.Address2)
</div>
<div class="city">
    @Html.LabelFor(model => model.City)
    @Html.TextBoxFor(model => model.City)
    @Html.ValidationMessageFor(model => model.City)
</div>
<div class="postalCode">
    @Html.DisplayNameFor(m => m.PostalCode)
    @Html.TextBoxFor(m => m.PostalCode, new { @Value = "" })
    @Html.ValidationMessageFor(m => m.PostalCode)
</div>
<div class="postalCodeExtension">
    @Html.LabelFor(model => model.PostalCodeExtension)
    @Html.TextBoxFor(model => model.PostalCodeExtension)
    @Html.ValidationMessageFor(m => m.PostalCodeExtension)
</div>
<div class="postalCodeCity">
    @Html.LabelFor(model => model.PostalCodeCity)
    @Html.TextBoxFor(model => model.PostalCodeCity)
    @Html.ValidationMessageFor(m => m.PostalCodeCity)
</div>
<div id="district">
    @Html.DisplayNameFor(m => m.PTDistrict_Id)
    @Html.DropDownListFor(m => m.PTDistrict_Id, Model.PTDistrictList, HeelpResources.PTDistrictViewDropDownListFirstRecord, new { id = "districtDropdown" })
    @Html.ValidationMessageFor(m => m.PTDistrict_Id)
</div>
<div id="council">
    @Html.DisplayNameFor(m => m.PTCouncil_Id)
    @Html.DropDownListFor(m => m.PTCouncil_Id, Model.PTCouncilList, HeelpResources.PTCouncilViewDropDownListFirstRecord, new { id = "councilDropdown" })
    @Html.ValidationMessageFor(m => m.PTCouncil_Id)
</div>
<p>
    <input type="submit" value="Create" />
</p>
}
<div>
 @Html.ActionLink("Back to List", "Index")
</div>

編集：

カスケード機能：

// Cascade function
(function ($) {
$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
        $(this).change(function () {
            var selectedValue = $(this).val();
            if (selectedValue == '') {
                opts.childSelect.empty();
                return;
            }
            var params = {};
            params[opts.paramName] = selectedValue;
            $.post(opts.url, params, function (items) {
                //$.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                if (opts.firstOption != "")
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text(opts.firstOption));
                $.each(items, function (index, item) {
                    // alert(opts.firstOption);
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', item.Id)
                            .text(item.Name)
                    );
                });
            });
        });
    });
};
})(jQuery);

しかし、私がそうするとき、ドロップダウンリストがまだロードされていないので、val（）はまだそこにありません。

たとえば、前にアラートメッセージを配置した場合、ドロップダウンをロードする時間として正常に機能します。

ドロップダウンがロードされた後でのみ、評議会のドロップダウンの値を設定するにはどうすればよいですか？

score 4 · Accepted Answer

要件として、「ドロップダウンがロードされた後にのみ、評議会のドロップダウンの値を設定する」。同期Ajaxリクエスト

を実行する必要があります。同期Ajaxリクエストを取得するには、 asyncオプションをfalseに指定できます。

$.ajax({
    url: '/Address/GetPTPostalCode',
    type: "POST",
    dataType: "json",
    data: { postalCode: $("#PostalCode").val(), postalCodeExtension: $("#PostalCodeExtension").val() },
    success: function (data) {
        if (data != null) {
            $("#districtDropdown").val(data.PTDistrict_Id); 
            $('#districtDropdown').trigger('change'); 

            // *** This is done to soon, the dropdownlist of the Councils is not all loaded yet ***
            $("#councilDropdown").val(data.PTCouncil_Id);
        }
    },
    async:   false
});

score 3 · Accepted Answer

ddlが更新されたときにイベントをトリガーするように、カスケードプラグインを更新します。

(function ($) {
$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
        $(this).change(function () {
            // #### store reference to changed element for later ####
            var self = this,
                selectedValue = $(this).val();
            if (selectedValue == '') {
                opts.childSelect.empty();
                return;
            }
            var params = {};
            params[opts.paramName] = selectedValue;
            $.post(opts.url, params, function (items) {
                //$.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                if (opts.firstOption != "")
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', '')
                            .text(opts.firstOption));
                $.each(items, function (index, item) {
                    // alert(opts.firstOption);
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', item.Id)
                            .text(item.Name)
                    );
                });
                // #### Trigger event ####
                self.trigger("update");
            });
        });
    });
};
})(jQuery);

今、あなたはそれにバインドすることができます：

    ...
    // *** #### fixed #### This is done to soon, the dropdownlist of the Councils is not all loaded yet ***
    $("#councilDropdown").on("updated",function(){
        $(this).val(data.PTCouncil_Id);
    });
}

score 1 · Accepted Answer

ドロップダウンで2つのイベントを作成してみてください1.カスタムイベントと2.変更イベント

ユーザーが手動で変更してからドロップダウン値を変更すると、変更イベントが発生します。

$('#dictrctDropdown').change(function (event){
    $('#dictrctDropdown').trigger('custom');
});

$('#dictrctDropdown').on('custom', function (event, param1){
    // Load council dropdown 
    if(param1){
       $("#councilDropdown").val(param1);
    }
});

「/Address/ GetPTPostalCode」からの成功コールバックは、「dictrctDropdown」のカスタムイベントを発生させます

function loadPTPostalCode()
{
  if ($("#PostalCode").val() >= 1000) {
    $.ajax({
        url: '/Address/GetPTPostalCode',
        type: "POST",
        dataType: "json",
        data: { postalCode: $("#PostalCode").val(), postalCodeExtension: $("#PostalCodeExtension").val() },
        success: function (data) {
            if (data != null) {

        $.getJSON('disctrictURL','data to post (if any)',function(response){
        //Load district dropdown
    /*
    $.each(items, function (index, item) {
                        // alert(opts.firstOption);
                        opts.childSelect.append(
                            $('<option/>')
                                .attr('value', item.Id)
                                .text(item.Name)
                        );
                    });

    */
        $("#districtDropdown").val(data.PTDistrict_Id); // Set the Dropdown value
        });

        //Now use district id load council dropdown and set value 
    $.getJSON('councilURL','data to post (if any)',function(response){
    //Council dropdown
    $("#districtDropdown").val('council id'); // Set the Dropdown value
    });

               }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus)
            }
        });
    }

これがお役に立てば幸いです。

score 1 · Accepted Answer

ここには2つのアプローチがあると思います。

1

ベストプラクティスは、カスケードにコールバック機能を追加することです。これは次のように実行できます。

...
$.post(opts.url, params, function (items) {
 //$.getJSON(opts.url, params, function (items) {
 opts.childSelect.empty();
 if (opts.firstOption != ""){
  opts.childSelect.append(
   $('<option/>')
   .attr('value', '')
   .text(opts.firstOption));
  $.each(items, function (index, item) {
   // alert(opts.firstOption);
   opts.childSelect.append(
    $('<option/>')
     .attr('value', item.Id)
     .text(item.Name)
    );
  });
  if( typeof(opts.callback) == "function" )opts.callback();//issue callback
 }
});
...

ここでカスケードを設定することで使用されます。

$("#districtDropdown").cascade({
 url: "/Address/ListCouncilByDistrict",
 paramName: "districtId",
 firstOption: 'Selecione o Concelho...',
 childSelect: $("#councilDropdown"),
 callback: function(){ districtCallback(); }
});

そしてあなたがこのように望むどんな方法でも定義されます：

function districtCallback(){
 $("#councilDropdown").val($("#districtDropdown").val());
}

2

速くて汚い..jsFiddleデモ

success: function (data) {
 if (data != null) {
  $("#districtDropdown").val(data.PTDistrict_Id); // Set the Dropdown value
  $('#districtDropdown').trigger('change'); // Trigger (force the dropdown to load
  (function councilVal(){
   if( typeof($("#councilDropdown").val()) != "undefined" ){
    $("#councilDropdown").val(data.PTCouncil_Id);
   }else{
    setTimeout(councilVal,50);
   }
  })()
 }
}

javascript - JQuery-コールバックドロップダウンリストの読み込み

4 に答える 4

1

2

Related

Reference