Search code examples
javascriptsweetalert2

Fire sweetalert toast from a sweetalert without closing it


I've got a kind of projects management system, and I use a sweetalert popup as a settings menu for each project, and I want to fire a toast when a setting is changed, but that causes the menu to close. Is there a way to make this work without using another library just for toasts?

Here's the code I'm trying to run for the sweetalert menu

var id = 65352;
Swal.fire({
      title: 'settings for project '+id,
      html:
        "<p>some setting</p>"+
        "<input class='toggle' id='setting' data-docid='"+id+"' type='checkbox' checked>",
        showCancelButton: true,
        showConfirmButton: false,
        cancelButtonText:  'close',
      onBeforeOpen: () => {
        const setting = $("#setting[data-docid="+id+"]");

        $(setting).on("change",function(){
            console.log($(this).attr("checked"));
            if($(this).attr("checked") == "checked"){
                $checked = 1;
            }else{
                $checked = 0;
            }
            $.parameters = {
                id: id,
                checked: $checked,
                type: "accept"
            }
            //using an api to communicate between client and server
            result = "TRUE"
            if(result.indexOf("TRUE") > -1){
                const Toast = Swal.mixin({ //when firing the toast, the first window closes automatically
                  toast: true,
                  position: 'top-end',
                  showConfirmButton: false,
                  timer: 3000
                });

                Toast.fire({
                  type: 'success',
                  title: 'changed the thingy successfully'
                })
            }else{
                const Toast = Swal.mixin({ //when firing the toast, the first window closes automatically
                  toast: true,
                  position: 'top-end',
                  showConfirmButton: false,
                  timer: 3000
                });

                Toast.fire({
                  type: 'error',
                  title: 'cant change the thingy'
                })
            }
        });

      }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.5/dist/sweetalert2.all.min.js"></script>


Solution

  • Unfortunately, reading this thread it seems that it's not possible because a toast IS an modal in a way ...

    But the last comment pointed out it could be possible modifying the code of Swal2 ;)