{"id":2770,"date":"2017-12-12T14:22:48","date_gmt":"2017-12-12T08:52:48","guid":{"rendered":"https:\/\/cns72.com\/vytcdc.com.sg\/?p=2770"},"modified":"2019-11-20T12:13:09","modified_gmt":"2019-11-20T06:43:09","slug":"sweetalert","status":"publish","type":"post","link":"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/","title":{"rendered":"SweetAlert"},"content":{"rendered":"

SweetAlert<\/b> 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.<\/p>\n

Displaying error messages<\/h3>\n
\u00a0The obvious first use case for SweetAlert is to display generic error messages to the user. For this, SweetAlert has a built-in “error<\/b>“-type that you can pass as the third function argument:<\/div>\n
<\/div>\n
\n
<\/div>
Reload the page and you should see this!<\/figcaption><\/figure>\n
\u00a0That 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:<\/div>\n
\u00a0By 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.<\/div>\n

Display a warning for a dangerous action<\/h3>\n

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.<\/p>\n

\u00a0In this example, we’ll simulate what would happen is a user tries to delete one of their photos on your website.
\nWe will first display a warning with two options: “Delete<\/b>” and “Cancel<\/b>“.
\nIf 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<\/b>” or of “error<\/b>“.<\/div>\n

 <\/p>\n

\u00a0We’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 <head> first!<\/div>\n

 <\/p>\n

\u00a0One of the keys we’ll use is confirmButtonColor<\/b>, to make the Confirm-button red (since we want to signal danger).
\nAlso, in order to follow typical REST conventions, we are sending a DELETE<\/b> request to \/api\/photos\/{photo_id} <\/b>when\u00a0you click that button.<\/b>\u00a0The final code in your body should therefore look something like this:<\/div>\n

 <\/p>\n

\u00a0The customized modal appears when you click the “Delete photo” button!<\/div>\n
<\/div>\n
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.
\nRemember that this is just an example<\/b> of how it should work, but we don’t actually have any API in place for this project.<\/div>\n

 <\/p>\n

\u00a0Normally you would write your API in a server-side language such as Node.js or PHP and just return status 204 (no content)<\/b>\u00a0once you’ve removed the file. If you do that, then a new SweetAlert modal will confirm that the file has indeed been deleted.<\/div>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

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 \u00a0The obvious first use case for SweetAlert is to display generic error messages to the user. For this, SweetAlert […]<\/p>\n","protected":false},"author":1,"featured_media":2771,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[45],"tags":[],"yoast_head":"\nSweetAlert - TCDC<\/title>\n<link rel=\"canonical\" href=\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SweetAlert - TCDC\" \/>\n<meta property=\"og:description\" content=\"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 \u00a0The obvious first use case for SweetAlert is to display generic error messages to the user. For this, SweetAlert […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/\" \/>\n<meta property=\"og:site_name\" content=\"TCDC\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vytcdc\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-12T08:52:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-20T06:43:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2017\/12\/sweetalert.png\" \/>\n\t<meta property=\"og:image:width\" content=\"656\" \/>\n\t<meta property=\"og:image:height\" content=\"310\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vytcdc\" \/>\n<meta name=\"twitter:site\" content=\"@vytcdc\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#website\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"name\":\"TCDC\",\"description\":\"Career Development Courses\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/cns72.com\/vytcdc.com.sg\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2017\/12\/sweetalert.png\",\"width\":656,\"height\":310},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/#webpage\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/\",\"name\":\"SweetAlert - TCDC\",\"isPartOf\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/#primaryimage\"},\"datePublished\":\"2017-12-12T08:52:48+00:00\",\"dateModified\":\"2019-11-20T06:43:09+00:00\",\"author\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#\/schema\/person\/c57e5f7b91685a93f23a57aaafd38e82\"},\"breadcrumb\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/sweetalert\/\",\"name\":\"SweetAlert\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#\/schema\/person\/c57e5f7b91685a93f23a57aaafd38e82\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f8f959f70994a4401c8704d6b2143474?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts\/2770"}],"collection":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/comments?post=2770"}],"version-history":[{"count":0,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts\/2770\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/media\/2771"}],"wp:attachment":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/media?parent=2770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/categories?post=2770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/tags?post=2770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}