sweet-alert display HTML code in text

Question

I am using sweet-alert plugin to display an alert  With a classical config  defaults   everything goes OK  But when I want to add a HTML tag into the TEXT  it display  lt b gt     lt  b gt  without making it bold  After searching for the answer  it looks like I don t have the right search word      How to make sweet alert display the text also with HTML code   var hh     lt b gt test lt  b gt    swal       title       txt            text   Testno  sporocilo za objekt     hh             confirmButtonText   V redu        allowOutsideClick   true

User · Answer

I just struggled with this  I upgraded from sweetalert 1 -  2  This library  https   sweetalert js org guides   The example from documentation  string  doesn t work as I expected  You just can t put it like this    content   my es6 string  lt strong gt template lt  strong gt      How I solved it   const template     my es6 string  lt strong  gt   variable  lt  strong gt     content          element   p         attributes            innerHTML     template                     There is no documentation how to do this  it was pure trial and error  but at least seems to work

User · Answer

There s sweet Alert version 1 and 2   Actual version 2 works with HTML nodes   I have a Sweet Alert 2 with a data form that looks this way    lt script gt   var form   document createElement  div          form innerHTML            lt span id  tfHours  gt 0 lt  span gt  hours lt br gt         lt input style  width 90    type  range  name  tfHours  value 0 step 1 min 0 max 25       onchange  window changeHours this value         oninput  window changeHours this value          gt  lt br gt         lt span id  tfMinutes  gt 0 lt  span gt  min lt br gt         lt input style  width 60    type  range  name  tfMinutes  value 0 step 5 min 0 max 60       onchange  window changeMinutes this value         oninput  window changeMinutes this value          gt           swal           title   Request time to XXX           text   Select time to send   request           content  form          buttons              cancel   Cancel             catch                text   Create               value  5                                  then  value    gt            console log value               window changeHours   function  value      var tfHours   document getElementById  tfHours       tfHours innerHTML   value      window changeMinutes   function  value      var tfMinutes   document getElementById  tfMinutes       tfMinutes innerHTML   value         Have a go to the Codepen Example

User · Answer

All you have to do is enable the html variable to true   I had same issue  all i had to do was html   true       var hh    quot  lt b gt test lt  b gt  quot    swal           title   quot  quot    txt    quot  quot            text   quot Testno  sporocilo za objekt  quot    hh    quot  quot             html  true            confirmButtonText   quot V redu quot            allowOutsideClick   quot true quot         Note  html    quot Testno  sporocilo za objekt  quot    hh    quot  quot    may not work as html porperty is only use to active this feature by assign true   false value in the Sweetalert  this html    quot Testno  sporocilo za objekt  quot    hh    quot  quot   is used in SweetAlert2

User · Answer

A feature to allow HTML for title and text parameters has been added with a recent merge into the master branch on GitHub https   github com t4t5 sweetalert commit 9c3bcc5cb75e598d6faaa37353ecd84937770f3d  Simply use JSON configuration and set  html  to true  eg   swal   html true  title   lt i gt TITLE lt  i gt    text   lt b gt TEXT lt  b gt        This was merged less than a week ago and is hinted at in the README md  html is set to false in one of the examples although not explicitly described  however it is not yet documented on the marketing page http   tristanedwards me sweetalert

User · Answer

Sweet alerts also has an  html  option  set it to true   var hh     lt b gt test lt  b gt    swal       title       txt            html  true      text   Testno  sporocilo za objekt     hh             confirmButtonText   V redu        allowOutsideClick   true

User · Answer

I was upgrading from old sweetalert and found out how to do it in the new Version  official Docs       this is a Node object     var span   document createElement  span    span innerHTML    Testno  sporocilo za objekt  lt b gt test lt  b gt     swal       title       txt            content  span      confirmButtonText   V redu        allowOutsideClick   true

User · Answer

I just applied the patch above and it starts working    x000D   x000D  diff --git a sweet-alert js b sweet-alert js x000D  index ab6e1f1  d7eafaa 100755 x000D  --- a sweet-alert js x000D      b sweet-alert js x000D     -200 7  200 8    x000D         confirmButtonColor    AEDEF4   x000D         cancelButtonText   Cancel   x000D         imageUrl  null  x000D  -      imageSize  null x000D         imageSize  null  x000D         html  false x000D          x000D    x000D       if  arguments 0      undefined    x000D     -224 6  225 7    x000D             return false  x000D             x000D    x000D           params html                 arguments 0  html  x000D           params title                arguments 0  title  x000D           params text                 arguments 0  text    params text  x000D           params type                 arguments 0  type    params type  x000D     -477 11  479 18    x000D            cancelBtn   modal querySelector  button cancel    x000D            confirmBtn   modal querySelector  button confirm    x000D    x000D         console log params html   x000D          Title x000D  -     title innerHTML   escapeHtml params title  split   n   join   lt br gt     x000D       if params html  x000D          title innerHTML   params title split   n   join   lt br gt     x000D       else x000D          title innerHTML   escapeHtml params title  split   n   join   lt br gt     x000D    x000D          Text x000D  -     text innerHTML   escapeHtml params text        split   n   join   lt br gt     x000D       if params html  x000D          text innerHTML   params text split   n   join   lt br gt     x000D       else x000D          text innerHTML   escapeHtml params text        split   n   join   lt br gt     x000D       if  params text    x000D         show  text   x000D         x000D   x000D   x000D

User · Answer

I assume that  lt   is not accepted inside the string   Try to escape the forward slash     by preceding it with a backward slash     for example   var hh     lt b gt test lt   b gt

User · Answer

The SweetAlert repo seems to be unmaintained  There s a bunch of Pull Requests without any replies  the last merged pull request was on Nov 9  2014  I created SweetAlert2 with HTML support in modal and some other options for customization modal window - width  padding  Esc button behavior  etc   x000D   x000D  Swal fire     title    lt i gt Title lt  i gt       html   Testno  sporocilo za objekt   lt b gt test lt  b gt        confirmButtonText   V  lt u gt redu lt  u gt         x000D   lt script src  https   cdn jsdelivr net npm sweetalert2 10  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Use SweetAlert s html setting   You can set output html direct to this option   var hh     lt b gt test lt  b gt    swal       title       txt            html   Testno  sporocilo za objekt     hh             confirmButtonText   V redu        allowOutsideClick   true         Or  swal       title       txt            html   Testno  sporocilo za objekt  lt b gt teste lt  b gt          confirmButtonText   V redu        allowOutsideClick   true

User · Answer

As of 2018  the accepted answer is out-of-date   Sweetalert is maintained  and you can solve the original question s issue with use of the content option

[javascript] sweet-alert display HTML code in text

Examples related to javascript

Examples related to sweetalert