Copy the message in the Sweet Alert Swal.fire

Hi Team,

I need to copy the alert message in the Sweet Alert Swal.fire, because I have a functionality in the Alert Success to copy a text message.

In the documentation it can be copied, but not in the template.
https://preview.keenthemes.com/html/metronic/docs/general/sweetalert

Thank you.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

Hi,

In this you can see how the copy feature is initialized and used.

The code can be seen in src/js/custom/account/referrals/referral-program.js

var button = document.querySelector('#kt_referral_program_link_copy_btn');
var input = document.querySelector('#kt_referral_link_input');
var clipboard = new ClipboardJS(button);

clipboard.on('success', function(e) {
var buttonCaption = button.innerHTML;
//Add bgcolor
input.classList.add('bg-success');
input.classList.add('text-inverse-success');

button.innerHTML = 'Copied!';

setTimeout(function() {
button.innerHTML = buttonCaption;

// Remove bgcolor
input.classList.remove('bg-success');
input.classList.remove('text-inverse-success');
}, 3000); // 3seconds

e.clearSelection();
});

If you need any further assistance please let us know.

Regards.

Hi,

I'm Sorry, doesn't Work. I can't copy the description of the message, but in the documentation is possible.

Check the link about your documentation, is posible copy the message: "Here's a basic example of SweetAlert!"

Link: https://preview.keenthemes.com/html/metronic/docs/general/sweetalert

Thank you.

Hi,

Could you please clarify your issue? Do you need to copy the text message inside the SweetAlert popup? When do you need to trigger the copy function? What actually does not work? Do you get any JS errors in your browser console? Can you please share the code where you created SweetAlert and tried to copy the text into the buffer the via git https://gist.github.com/ ?

Regards.

Hi,

I need copy the text message inside the SweetAlert PopUp

This is my code and attached images about the functionality

https://gist.github.com/cmiguelc7/d1d949d896a13095441eec842badb727

1) Image describe that I can't copy the message in our project
2) Image describe that I can't copy the message in metronic project
3) Image describe tha I CAN COPY the message in the documentation

Why I can't copy this message in our project?

Please review the images.

Thanks

Hi,

May I know your Metronic version?

Can you try to check your package's config file tools/package.json and make sure that SweetAlert version is "sweetalert2": "11.4.8"? Can you reinstall your packages with yarn Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.

Regards.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(