Sweetalert: Viele Schaltflächen in Kombination mit einer Eingabe geben nur den Wert der Schaltfläche zurück

Erstellt am 31. Okt. 2017  ·  6Kommentare  ·  Quelle: t4t5/sweetalert

Sofern ich nichts in den Dokumenten vermisse, finde ich es albern, dass, wenn ich ein Swal erstelle, das mehrere Schaltflächen mit unterschiedlichen Werten in Kombination mit einem Eingabefeld hat, der Wert der Eingabe nicht mit nativem Swal-Code zurückgegeben wird. Dies nimmt wirklich das Potenzial von SweetAlert.

Hilfreichster Kommentar

@t4t5 Jede Schaltfläche sollte den Eingabewert und den Schaltflächenwert zurückgeben. Speziell für meinen Anwendungsfall verwende ich SweetAlert für ein webbasiertes Serververwaltungstool und insbesondere, um den Administrator aufzufordern, wenn er auf die Schaltfläche "Verbieten" eines Benutzers klickt. Die Warnung hätte dann drei Schaltflächen, die einen Wert von ("1d", "1w" oder "forever") zurückgeben müssen, um eine Zeitdauer darzustellen. Ich benötige auch ein Eingabetextfeld, um einen Grund dafür anzugeben, warum ein Benutzer gesperrt wird. Beim Klicken auf eine dieser Schaltflächen würde es meinem Rückruf ermöglichen, den Wert der Schaltfläche, auf den geklickt wurde, mit dem Eingabewert zu paaren, um eine API-Abfrage zurück an meinen Server zu erstellen, um eine Sperre mit einem Grund und der Dauer der Sperre zu platzieren.

Hoffentlich sollte dieser Anwendungsfall die Bedeutung der Rückgabe beider Werte verdeutlichen. Es ermöglicht Entwicklern, sich nicht herumzuhacken oder zwei Warnungen zu erstellen, um einen einstufigen Prozess zu erreichen.

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
            });

Das obige Snippet ist meine "hackige" Methode, um die Inhalts- und Schaltflächenwerte zu erhalten. Wie bereits früher in diesem Thread erwähnt, wäre es jedoch viel schöner, wenn nur beide Werte zurückgegeben würden.

Alle 6 Kommentare

Meinst du, dass sowohl die Bestätigungsschaltfläche als auch eine andere Schaltfläche den Wert der Eingabe zurückgeben sollen? Könnten Sie Ihren Anwendungsfall genau beschreiben? :)

@t4t5 es hat wahrscheinlich mit diesem FIXME zu tun

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.");
    }
});

Es wäre sehr nützlich, den Wert der Schaltfläche sowie den Eingabewert verwenden zu können, um Logik auszuführen, anstatt Warnungen zu verschachteln und eine nutzlose Eingabe zu haben, da sie von Ihren Schaltflächen überschrieben wird.

+1, um sowohl den button Wert von content haben

Wenn Sie eine der Tasten der Schaltfläche auf "Bestätigen" setzen, wird der Wert der Eingabe zurückgegeben. z.B:

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",
    },
  }
})

Reicht das für Ihren Anwendungsfall oder meinten Sie, dass jede Schaltfläche sowohl den Eingabewert als auch den Schaltflächenwert zurückgeben sollte?

@t4t5 Jede Schaltfläche sollte den Eingabewert und den Schaltflächenwert zurückgeben. Speziell für meinen Anwendungsfall verwende ich SweetAlert für ein webbasiertes Serververwaltungstool und insbesondere, um den Administrator aufzufordern, wenn er auf die Schaltfläche "Verbieten" eines Benutzers klickt. Die Warnung hätte dann drei Schaltflächen, die einen Wert von ("1d", "1w" oder "forever") zurückgeben müssen, um eine Zeitdauer darzustellen. Ich benötige auch ein Eingabetextfeld, um einen Grund dafür anzugeben, warum ein Benutzer gesperrt wird. Beim Klicken auf eine dieser Schaltflächen würde es meinem Rückruf ermöglichen, den Wert der Schaltfläche, auf den geklickt wurde, mit dem Eingabewert zu paaren, um eine API-Abfrage zurück an meinen Server zu erstellen, um eine Sperre mit einem Grund und der Dauer der Sperre zu platzieren.

Hoffentlich sollte dieser Anwendungsfall die Bedeutung der Rückgabe beider Werte verdeutlichen. Es ermöglicht Entwicklern, sich nicht herumzuhacken oder zwei Warnungen zu erstellen, um einen einstufigen Prozess zu erreichen.

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
            });

Das obige Snippet ist meine "hackige" Methode, um die Inhalts- und Schaltflächenwerte zu erhalten. Wie bereits früher in diesem Thread erwähnt, wäre es jedoch viel schöner, wenn nur beide Werte zurückgegeben würden.

Ein anderes Beispiel wäre ein Modal ( closeOnEsc: false, closeOnClickOutside: false ) mit einem Eingabefeld und zwei Buttons: Bestätigen + Abbrechen. Ich werde vorerst die

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

girishbr picture girishbr  ·  5Kommentare

daftspunk picture daftspunk  ·  4Kommentare

blackrosezy picture blackrosezy  ·  6Kommentare

mateuszjarzewski picture mateuszjarzewski  ·  4Kommentare

jamieson99 picture jamieson99  ·  3Kommentare