Sweetalert: swalにカスタムHTMLを追加する方法

ねえ@srikanthcx

このソリューションはあなたのために機能しますか？

いいえ、ダイナミックhtmlを渡す必要はありません。上記のソリューションは、私には機能しません。ありがとうございます。

このようなものは機能しますか？

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

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

完璧ですが、2回実行するとラッパーがすでに宣言されていると表示されるため、1回は機能します。

上記のすべてを、ダイナミックhtmlを引数として取る関数でラップすることができます。
次に、swalを直接呼び出す代わりに、htmlを使用して関数を呼び出すことができます。

私はこのようなことを試みていました

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

これを試すことができますか：

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

それがうまくいかない場合は、もう少しコンテキストが必要になります。 より明確な例を教えていただけますか？

@lionralfsに感謝します。これは私には機能しません。sweetalert2を使用します。

@srikanthcxカスタムHTMLでERBテンプレートコードを使用しようとしているようです。 SweetAlertはクライアント側のライブラリであるため、SweetAlertやそのフォークでは機能しません。 これを機能させるには、ERBコードを他のHTML要素でレンダリングしてから、それをSwalモーダルに複製する必要があります。

@ t4t5私がやっていることと同じこと。 js.erbファイルで私は以下のコードを実行しています。 それはhtml出力を与えるでしょう。 erbコードに問題はありません。 しかし、問題は、swalがhtmlコードを取得していないことです。

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なるほど。 その場合、@ lionralfのソリューションは正常に機能するはずです。 $＃ const wrapper = ... var wrapper = ...を使用するだけで、発生したエラーメッセージは消えるはずです。

上記のコードブロックは複数回呼び出されていると思います。 これが、次のような関数呼び出しに抽出することをお勧めした理由です。

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

そして、 swal(...) callSwalWithHTML(...)に置き換えます。

コードが複数回呼び出される理由について、もう少しコンテキストを期待していました（そうでない場合、なぜwrapper is already definedと表示されるのでしょうか？）

このパッケージを使用してください、 https：//amjadiqbal.github.io/sweetalert/forms.html
ビデオガイドが含まれています

sweetalertでアンカータグをどのように使用しますか？

ねえ@Sudangadekarこのフォームガイドを参照してください。sweetalert内に任意のhtmlを含めることができます。https： //amjadiqbal.github.io/sweetalert/forms.html