Sweetalert: swal에 사용자 정의 HTML을 추가하는 방법

안녕하세요 @srikanthcx

이 솔루션이 효과가 있습니까?

아니요, 동적 html을 전달할 필요가 없습니다. 위의 솔루션은 저에게 적합하지 않습니다. 감사합니다.

이 같은 것이 효과가 있을까요?

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

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

완벽하지만 두 번째로 실행하면 래퍼가 이미 선언되어 있기 때문에 한 번만 작동합니다.

동적 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, https://amjadiqbal.github.io/sweetalert/forms.html 내부에 모든 html을 포함할 수 있습니다.