SweetAlert is an easy-to-use library that aims to replace JavaScript’s existing “alert” and “prompt” features with better-looking versions. In this lesson, we’ll go through the basics and common use cases of the library.
Displaying error messages
The obvious first use case for
Sweetalert is to display generic error messages to the user. For this, SweetAlert has a built-in “
error“-type that you can pass as the third function argument:
Reload the page and you should see this! That is the short way of adding the three most common arguments (title, text and type). There is also a longer version where you pass in a JavaScript object instead with the following keys:
By using the longer version, you can pass in other options to customize the look of your SweetAlert. Check out the documentation (http://tristanedwards.me/sweetalert) to see all the available keys.
Display a warning for a dangerous action
When a user on your site is about to do something dangerous, it’s usually good to display a warning first to make sure they want to go through with the action.
In this example, we’ll simulate what would happen is a user tries to delete one of their photos on your website.
We will first display a warning with two options: “Delete” and “Cancel“.
If the user clicks on “Delete”, we will send an AJAX request to a specific URL, and based on the response we’ll show a new SweetAlert either of type “success” or of “error“.
We’re going to use jQuery here just to make the code a little simpler and more readable, so make sure you include a link to it in your first!
One of the keys we’ll use is confirmButtonColor, to make the Confirm-button red (since we want to signal danger).
Also, in order to follow typical REST conventions, we are sending a DELETE request to /api/photos/{photo_id} when you click that button. The final code in your body should therefore look something like this:
The customized modal appears when you click the “Delete photo” button!
Now don’t worry if you see the “We couldn’t connect to the server!” error message when you click on “Yes, delete it”. This is normal.
Remember that this is just an example of how it should work, but we don’t actually have any API in place for this project.
Normally you would write your API in a server-side language such as Node.js or PHP and just return status 204 (no content) once you’ve removed the file. If you do that, then a new SweetAlert modal will confirm that the file has indeed been deleted.
The post SweetAlert appeared first on TCDC.
Remember that this is just an example of how it should work, but we don’t actually have any API in place for this project.