Saya memiliki formulir web ASP.Net Core dengan banyak grup item input yang dapat disembunyikan atau ditampilkan, tergantung pada nilai yang dimasukkan oleh pengguna dan disimpan dalam database.

Ini adalah panggilan balik yang "menampilkan" atau "menyembunyikan" submenu setiap kali pengguna mengubah nilai di menu tarik-turun, ini berfungsi dengan baik:

$('#DW_Answers_Q430').change(function (e) {
    let a = $('#DW_Answers_Q430').val();
    if (a == "None")
      $('#DW_Q430_grp').css('display','none');
    else $('#DW_Q430_grp').css('display','block');
});

T: Bagaimana saya bisa memanggil panggilan balik ini ketika menu "Edit" dimuat, untuk memastikan submenu ditampilkan atau disembunyikan dengan benar, tergantung pada nilai yang dimuat dari database?

Ini yang saya coba:

Edit.cshtml:

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        window.onload = function () {
            ...
            dw_refresh();
            ...
        };
    </script>
}

site.js:

function dw_refresh() {
    console.log('dw_refresh()...');   // <-- dw_refresh() gets invoked
    ...
    var a = $('#D_Answers_Q430').val();
    $('#DW_Answers_Q430').val(a).change();  // <-- But the callback never gets invoked
    ...

T: Bagaimana cara memanggil panggilan balik saya, untuk memastikan submenu ditampilkan dengan benar saat halaman "Edit" pertama kali dimuat?


SOLUSI:

  1. Singkirkan dw_refresh()

  2. Pengganti bind('load change'):

    $('#DWare_Answers_Q430').bind('load change', function () { 
       let a = $('#DW_Answers_Q430').val();
       console.log('DW_Answers_Q430, val:', a);
       if (a == "None")
          $('#DW_Q430_grp').css('display','none');
       else $('#DW_Q430_grp').css('display','block');
    });
    
0
FoggyDay 12 Mei 2021, 23:23

1 menjawab

Jawaban Terbaik

Di baris ini:

$('#DW_Answers_Q430').val(a).change();

.change() adalah penyetel pendengar acara yang harus memiliki fungsi pengendali yang diteruskan.

Untuk memicu peristiwa change, yang Anda butuhkan adalah:

$('#DW_Answers_Q430').val(a).trigger("change");

Dokumentasi

0
Louys Patrice Bessette 12 Mei 2021, 22:05