How To Use Sweetalert2 In Laravel

 

Using sweetalert2 in Laravel, you can create different types of alert messages or you can create custom pop-ups like success messages, error messages, warning modals, confirm modals, etc.

JavaScript usually displays a simple alert box in your browser, but if you want a custom alert, sweetalert2 is an excellent library that lets you create all kinds of alert messages that can be customized to match the layout of your own website.
Let’s start, and we’ll learn how to integrate sweetalert2 in Laravel.

Step 1 : Download or Install Using CDN

We need to add js file css file in our to implement sweetalert2 in laravel.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>

JavaScriptCopy tep 2 : Call the sweetAlert2

Now, we need to call the sweetAlert2 function after the page has loaded.
Here, i am giving you simple example.

Swal.fire(
  'Websolutionstuff!',
  'Button Clicked',
  'success'
)

JavaScript Copy

Output : 

Here we will see different type of sweetalert2 example.
 
Example 1 : Simple message 

Swal.fire('Hello')

JavaScript Copy

 
Example 2 : Title with text

Swal.fire(
  'The Demo?',
  'This is Demo ?',
  'Asking'
)

JavaScript Copy

 
Example 3 :  Modal with title, icon, text and footer

Swal.fire({
  icon: 'error',
  title: 'Not Found...',
  text: 'Something went wrong!',
  footer: '<a href>Are you facing any issue?</a>'
})

JavaScript Copy

 Example 4 :  Modal window with a long content

Swal.fire({
  imageUrl: 'https://placeholder.pics/svg/300x1500',
  imageHeight: 1500,
  imageAlt: 'Big image'
})

JavaScript Copy

 Example 5 : Custom HTML description and buttons with ARIA labels

Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
  html:
    'You can use <b>bold text</b>, ' +
    '<a href="//sweetalert2.github.io">links</a> ' +
    'and other HTML tags',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText:
    '<i class="fa fa-thumbs-up"></i> Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText:
    '<i class="fa fa-thumbs-down"></i>',
  cancelButtonAriaLabel: 'Thumbs down'
})

JavaScript CopyRead Also : How To Validate URL In PHP With Regex 

Example 6 : Dialog with three buttons

Swal.fire({
  title: 'Do you want to save the changes?',
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: `Save`,
  denyButtonText: `Don't save`,
}).then((result) => {
  /* Read more about isConfirmed, isDenied below */
  if (result.isConfirmed) {
    Swal.fire('Saved!', '', 'success')
  } else if (result.isDenied) {
    Swal.fire('Changes are not saved', '', 'info')
  }
})

Perl Copy

 Example 7 : Custom positioned

Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
})

JavaScript Copy

 Example 8 : Confirm dialog box with a confirm button

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

JavaScript Copy

 Example 9 : Modal with a custom image

Swal.fire({
  title: 'Sweet!',
  text: 'Modal with a custom image.',
  imageUrl: 'https://unsplash.it/400/200',
  imageWidth: 400,
  imageHeight: 200,
  imageAlt: 'Custom image',
})

JavaScript Copy

 Example 10 : Model with autoclose timer

let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <b></b> milliseconds.',
  timer: 2000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      const content = Swal.getContent()
      if (content) {
        const b = content.querySelector('b')
        if (b) {
          b.textContent = Swal.getTimerLeft()
        }
      }
    }, 100)
  },
  willClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  /* Read more about handling dismissals below */
  if (result.dismiss === Swal.DismissReason.timer) {
    console.log('I was closed by the timer')
  }
})

JavaScript Copy

 Example 11: AJAX request example

Swal.fire({
  title: 'Submit your Github username',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: 'Look up',
  showLoaderOnConfirm: true,
  preConfirm: (login) => {
    return fetch(`//api.github.com/users/${login}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        )
      })
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: `${result.value.login}'s avatar`,
      imageUrl: result.value.avatar_url
    })
  }
})