Sweetalert: So fügen Sie benutzerdefiniertes HTML zu swal hinzu

Hey @srikanthcx

Funktioniert diese Lösung für Sie?

Nein, ich muss dynamisches HTML übergeben, die obige Lösung funktioniert bei mir nicht, danke.

Würde so etwas funktionieren?

const wrapper = document.createElement('div');
wrapper.innerHTML = YOUR_DYNAMIC_HTML;

swal({
  title: 'Test Title',
  text: 'Test Text',
  content: wrapper
});

perfekt, aber es wird einmal funktionieren, denn wenn Sie es zum zweiten Mal ausführen, heißt es, dass der Wrapper bereits deklariert ist.

Sie könnten alles Obige in eine Funktion packen, die das dynamische HTML als Argument verwendet.
Dann können Sie die Funktion einfach mit Ihrem HTML aufrufen, anstatt swal direkt aufzurufen.

Ich habe so etwas versucht

var errors = "<ul class='error-list'><% @user.errors.full_messages.each do |message| %><li><%= message %></li><% end %></ul>";
swal({
      title: "Error!",
      content: errors, 
      icon: "error"
});

Kannst du das versuchen:

(function() {
  const wrapper = document.createElement('div');
  wrapper.innerHTML = "<ul class='error-list'><% @user.errors.full_messages.each do |message| %><li><%= message %></li><% end %></ul>";
  swal({
    title: "Error!",
    content: wrapper, 
    icon: "error"
  });
})();

Wenn das nicht funktioniert, brauche ich etwas mehr Kontext. Können Sie mir ein deutlicheres Beispiel geben?

Danke @lionralfs , das funktioniert bei mir nicht, ich werde sweetalert2 verwenden.

@srikanthcx Es sieht so aus, als ob Sie versuchen, ERB-Vorlagencode in Ihrem benutzerdefinierten HTML zu verwenden. Das wird weder in SweetAlert noch in einem seiner Forks funktionieren, da SweetAlert eine clientseitige Bibliothek ist. Wenn Sie möchten, dass dies funktioniert, müssen Sie Ihren ERB-Code in einem anderen HTML-Element rendern und diesen dann in das Swal-Modal klonen.

@ t4t5 Dasselbe , was ich getan habe. In der js.erb-Datei mache ich den folgenden Code. Es wird die HTML-Ausgabe geben. Kein Problem mit erb-Code. Das Problem ist jedoch, dass swal keinen HTML-Code akzeptiert.

var errors = "<ul class='error-list'><% @user.errors.full_messages.each do |message| %><li><%= message %></li><% end %></ul>";
swal({
      title: "Error!",
      content: errors, 
      icon: "error"
});

@srikanthcx Ich verstehe. In diesem Fall sollte die Lösung von @ lionralf gut funktionieren. Verwenden Sie einfach var wrapper = ... anstelle von const wrapper = ... und ich denke, die Fehlermeldung, auf die Sie gestoßen sind, sollte verschwinden.

Ich vermute, dass der obige Codeblock mehrmals aufgerufen wird. Aus diesem Grund habe ich empfohlen, es in einen Funktionsaufruf wie diesen zu extrahieren:

function callSwalWithHTML(html) {
  const wrapper = document.createElement('div');
  wrapper.innerHTML = html;
  swal({
    title: "Error!",
    content: wrapper, 
    icon: "error"
  });
}

Und jedes Vorkommen von swal(...) durch callSwalWithHTML(...) ersetzen.

Ich hatte auf etwas mehr Kontext gehofft, warum der Code mehrmals aufgerufen wird (warum würde er sonst wrapper is already defined sagen?)

Verwenden Sie dieses Paket, https://amjadiqbal.github.io/sweetalert/forms.html
Videoanleitung enthalten

Wie verwenden wir Anker-Tags auf Sweetalert?

Hallo @Sudangadekar , sehen Sie sich diesen Formularleitfaden an. Sie können jeden HTML-Code in sweetalert einfügen, https://amjadiqbal.github.io/sweetalert/forms.html