Sweetalert2: Change swal type dynamically without reloading the modal

[Hydro8]

Hi

Is there an easy way to change swal type ?

I use swal with EventSource and I update swal with my server message.

When my server finish the job, I want to change info type to success type without reload swal.

I don't find a way to do this.

[zenflow]

@Hydro8 What is/are the reason/reasons you cannot reload the modal?

If it is just the matter of visual presentation, i.e. you want it to appear to the user as one modal, (🤞) I have an idea of how to maybe make the reloading (or "second-swal") approach work...

The only real obstacle would be working with the animation: true configuration (which happens to be default)..

Suppose we added support for passing a function for the animation param, so that you can disable animation for the subsequent modal(s) only for the intro. Thus, to the user, it would appear to be one modal.

const MySwal = Swal.mixin({ /* common params */})
MySwal({
  type: 'info',
  text: 'Doing something on the server...'
})
const eventSource = new EventSource('./foo')
eventSource.onmessage = (event) => {
  MySwal({
    type: event.data.isError ? 'error' : 'success',
    text: event.data.message,
    animation: (swal, isOpening) => !isOpening
  })
}

Not sure how I feel about this solution myself, but how would you feel about it? Would you be satisfied?

[limonte]

Or, upgrade to the latest version (7.25.0) and use getIcons() getter to update the icon:

function updateSwalType(newType) {
  const icons = swal.getIcons()

  // hide all icons
  icons.forEach(icon => icon.style.display = 'none')

  // show the new icon
  icons.find(icon => icon.className.match(newType)).style.display = 'flex'
}

Live demo: https://jsfiddle.net/ad3quksn/1603/

[limonte]

The ability to dynamically change swal type has been shipped in v8.0.0, please read the release notes for the list of breaking changes in the new major release.

Swal.update({
  type: 'success'
})