Sweetalert: Banyak tombol yang digabungkan dengan input hanya mengembalikan nilai tombol

Dibuat pada 31 Okt 2017  ·  6Komentar  ·  Sumber: t4t5/sweetalert

Kecuali saya kehilangan sesuatu di dokumen, saya merasa konyol bahwa jika saya membuat swal yang memiliki banyak tombol dengan nilai berbeda yang dikombinasikan dengan bidang input, nilai input tidak dikembalikan menggunakan kode swal asli. Ini benar-benar menghilangkan potensi yang ditawarkan SweetAlert.

Komentar yang paling membantu

@t4t5 Setiap tombol harus mengembalikan nilai input dan nilai tombol. Khusus untuk kasus penggunaan saya, saya menggunakan SweetAlert untuk alat administrasi server berbasis web dan lebih khusus untuk meminta administrator ketika mereka mengklik tombol "larangan" pada pengguna. Peringatan kemudian akan memiliki tiga tombol yang saya perlukan untuk mengembalikan nilai ("1d", "1w", atau "selamanya") untuk mewakili jangka waktu. Saya juga memerlukan bidang teks masukan untuk memberikan alasan mengapa pengguna dilarang. Pada klik salah satu tombol ini, panggilan balik saya akan memungkinkan untuk memasangkan nilai tombol yang diklik dengan nilai input untuk membuat kueri API kembali ke server saya untuk menempatkan larangan dengan alasan dan berapa lama larangan akan berlangsung.

Semoga use case itu menjelaskan pentingnya mengembalikan kedua nilai. Ini memungkinkan pengembang untuk tidak perlu meretas berbagai hal atau membuat dua peringatan untuk mencapai apa yang seharusnya menjadi proses satu langkah.

example

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

Cuplikan di atas adalah cara "retas" saya untuk mendapatkan konten dan nilai tombol. Namun seperti yang diungkapkan sebelumnya di utas ini, akan jauh lebih baik jika hanya mengembalikan kedua nilai.

Semua 6 komentar

Maksud Anda, Anda ingin tombol konfirmasi dan tombol lain mengembalikan nilai input? Bisakah Anda menguraikan apa sebenarnya use case Anda? :)

@t4t5 mungkin ada hubungannya dengan FIXME ini.

swal({
    buttons: {
        cancel: "Go back!",
        one: {
          text: "Button One",
          value: 1
        },
        two: {
          text: "Button Two",
          value: 2
        },
        three: {
          text: "Button Three",
          value: 3
        }
      },
      content: {
        element: "input",
        attributes: {
          placeholder: "What's your favorite food?",
          type: "text",
        },
      }
/*
 * Only returns one value, because input is overridden by buttons
 * so you never get the input's value and the button's value
 * just the button's value.
 */
}).then( value => {
    switch (value) {                  
        case 1:
            swal("You pressed one!")
            break;
        case 2:
            swal("You pressed two!")
            break;
        case 3:
            swal("You pressed three!")
            break;
        default:
            swal("Phew, got outta there.");
    }
});

Akan sangat berguna untuk memiliki kemampuan untuk menggunakan nilai tombol serta apa pun nilai inputnya untuk melakukan logika alih-alih bersarang peringatan dan memiliki input yang tidak berguna karena ditimpa oleh tombol Anda.

+1 untuk memiliki nilai button dan nilai content

Jika Anda mengatur salah satu tombol tombol ke "konfirmasi" itu akan mengembalikan nilai input. misalnya:

swal({
  buttons: {
    cancel: "Go back!",
    one: {
      text: "Button One",
      value: 1
    },
    two: {
      text: "Button Two",
      value: 2
    },
    confirm: {
      text: "Button Three",
    }
  },
  content: {
    element: "input",
    attributes: {
      placeholder: "What's your favorite food?",
      type: "text",
    },
  }
})

Apakah itu cukup untuk kasus penggunaan Anda, atau maksud Anda bahwa setiap tombol harus mengembalikan nilai input dan nilai tombol?

@t4t5 Setiap tombol harus mengembalikan nilai input dan nilai tombol. Khusus untuk kasus penggunaan saya, saya menggunakan SweetAlert untuk alat administrasi server berbasis web dan lebih khusus untuk meminta administrator ketika mereka mengklik tombol "larangan" pada pengguna. Peringatan kemudian akan memiliki tiga tombol yang saya perlukan untuk mengembalikan nilai ("1d", "1w", atau "selamanya") untuk mewakili jangka waktu. Saya juga memerlukan bidang teks masukan untuk memberikan alasan mengapa pengguna dilarang. Pada klik salah satu tombol ini, panggilan balik saya akan memungkinkan untuk memasangkan nilai tombol yang diklik dengan nilai input untuk membuat kueri API kembali ke server saya untuk menempatkan larangan dengan alasan dan berapa lama larangan akan berlangsung.

Semoga use case itu menjelaskan pentingnya mengembalikan kedua nilai. Ini memungkinkan pengembang untuk tidak perlu meretas berbagai hal atau membuat dua peringatan untuk mencapai apa yang seharusnya menjadi proses satu langkah.

example

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

Cuplikan di atas adalah cara "retas" saya untuk mendapatkan konten dan nilai tombol. Namun seperti yang diungkapkan sebelumnya di utas ini, akan jauh lebih baik jika hanya mengembalikan kedua nilai.

Contoh lain adalah Modal ( closeOnEsc: false, closeOnClickOutside: false ) dengan Input-Field dan dua Tombol: konfirmasi + batal. Saya akan menggunakan solusi @JayHerlth untuk saat ini. Akan lebih baik jika nilai-Parameter adalah objek jika { tombol & konten } diatur.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

girishbr picture girishbr  ·  5Komentar

jamieson99 picture jamieson99  ·  3Komentar

rafatux picture rafatux  ·  5Komentar

Lusitaniae picture Lusitaniae  ·  4Komentar

fracz picture fracz  ·  4Komentar