Dialogs and Notification Logs using Jquery

Submitted by jaredgwapo on Thursday, December 31, 2015 - 03:41.
Language
JavaScript
In this tutorial, we are going to learn about dialogs and notification logs using jquery. You can use this in your systems or projects. just download the source code.

Instructions

Link the css and js scipts

  1. <link rel="stylesheet" href="../themes/alertify.core.css" />
  2. <link rel="stylesheet" href="../themes/alertify.bootstrap.css" id="toggleCSS" />
  3. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  4. <script src="../lib/alertify.min.js"></script>

Writing the javascript code

  1. <script>
  2.                 function reset () {
  3.                         $("#toggleCSS").attr("href", "../themes/alertify.bootstrap.css");
  4.                         alertify.set({
  5.                                 labels : {
  6.                                         ok     : "OK",
  7.                                         cancel : "Cancel"
  8.                                 },
  9.                                 delay : 5000,
  10.                                 buttonReverse : false,
  11.                                 buttonFocus   : "ok"
  12.                         });
  13.                 }
  14.  
  15.                 // ==============================
  16.                 // Standard Dialogs
  17.                 $("#alert").on( 'click', function () {
  18.                         reset();
  19.                         alertify.alert("This is an alert dialog");
  20.                         return false;
  21.                 });
  22.  
  23.                 $("#confirm").on( 'click', function () {
  24.                         reset();
  25.                         alertify.confirm("This is a confirm dialog", function (e) {
  26.                                 if (e) {
  27.                                         alertify.success("You've clicked OK");
  28.                                 } else {
  29.                                         alertify.error("You've clicked Cancel");
  30.                                 }
  31.                         });
  32.                         return false;
  33.                 });
  34.  
  35.                 $("#prompt").on( 'click', function () {
  36.                         reset();
  37.                         alertify.prompt("This is a prompt dialog", function (e, str) {
  38.                                 if (e) {
  39.                                         alertify.success("You've clicked OK and typed: " + str);
  40.                                 } else {
  41.                                         alertify.error("You've clicked Cancel");
  42.                                 }
  43.                         }, "Default Value");
  44.                         return false;
  45.                 });
  46.  
  47.                 // ==============================
  48.                 // Ajax
  49.                 $("#ajax").on("click", function () {
  50.                         reset();
  51.                         alertify.confirm("Confirm?", function (e) {
  52.                                 if (e) {
  53.                                         alertify.alert("Successful AJAX after OK");
  54.                                 } else {
  55.                                         alertify.alert("Successful AJAX after Cancel");
  56.                                 }
  57.                         });
  58.                 });
  59.  
  60.                 // ==============================
  61.                 // Standard Dialogs
  62.                 $("#notification").on( 'click', function () {
  63.                         reset();
  64.                         alertify.log("Standard log message");
  65.                         return false;
  66.                 });
  67.  
  68.                 $("#success").on( 'click', function () {
  69.                         reset();
  70.                         alertify.success("Success log message");
  71.                         return false;
  72.                 });
  73.  
  74.                 $("#error").on( 'click', function () {
  75.                         reset();
  76.                         alertify.error("Error log message");
  77.                         return false;
  78.                 });
  79.  
  80.                 // ==============================
  81.                 // Custom Properties
  82.                 $("#delay").on( 'click', function () {
  83.                         reset();
  84.                         alertify.set({ delay: 10000 });
  85.                         alertify.log("Hiding in 10 seconds");
  86.                         return false;
  87.                 });
  88.  
  89.                 $("#forever").on( 'click', function () {
  90.                         reset();
  91.                         alertify.log("Will stay until clicked", "", 0);
  92.                         return false;
  93.                 });
  94.  
  95.                 $("#labels").on( 'click', function () {
  96.                         reset();
  97.                         alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
  98.                         alertify.confirm("Confirm dialog with custom button labels", function (e) {
  99.                                 if (e) {
  100.                                         alertify.success("You've clicked OK");
  101.                                 } else {
  102.                                         alertify.error("You've clicked Cancel");
  103.                                 }
  104.                         });
  105.                         return false;
  106.                 });
  107.  
  108.                 $("#focus").on( 'click', function () {
  109.                         reset();
  110.                         alertify.set({ buttonFocus: "cancel" });
  111.                         alertify.confirm("Confirm dialog with cancel button focused", function (e) {
  112.                                 if (e) {
  113.                                         alertify.success("You've clicked OK");
  114.                                 } else {
  115.                                         alertify.error("You've clicked Cancel");
  116.                                 }
  117.                         });
  118.                         return false;
  119.                 });
  120.  
  121.                 $("#order").on( 'click', function () {
  122.                         reset();
  123.                         alertify.set({ buttonReverse: true });
  124.                         alertify.confirm("Confirm dialog with reversed button order", function (e) {
  125.                                 if (e) {
  126.                                         alertify.success("You've clicked OK");
  127.                                 } else {
  128.                                         alertify.error("You've clicked Cancel");
  129.                                 }
  130.                         });
  131.                         return false;
  132.                 });
  133.  
  134.                 // ==============================
  135.                 // Custom Log
  136.                 $("#custom").on( 'click', function () {
  137.                         reset();
  138.                         alertify.custom = alertify.extend("custom");
  139.                         alertify.custom("I'm a custom log message");
  140.                         return false;
  141.                 });
  142.  
  143.                 // ==============================
  144.                 // Custom Themes
  145.                 $("#bootstrap").on( 'click', function () {
  146.                         reset();
  147.                         $("#toggleCSS").attr("href", "../themes/alertify.bootstrap.css");
  148.                         alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
  149.                                 if (e) {
  150.                                         alertify.success("You've clicked OK");
  151.                                 } else {
  152.                                         alertify.error("You've clicked Cancel");
  153.                                 }
  154.                         }, "Default Value");
  155.                         return false;
  156.                 });
  157.         </script>

Writing the HTML code

  1.         <table border="1px" cellpadding="10">
  2.                 <thead>
  3.                         </tr>
  4.                                 <th colspan="2">Alert Dialogs and Logs</th>
  5.                         </tr>
  6.                         <tr>
  7.                                 <th>Dialogs</th>
  8.                                 <th>Logs</th>
  9.                         <tr>
  10.                 </thead>
  11.                 <tbody>
  12.                         <tr>
  13.                                 <td><a href="#" id="alert">Alert Dialog</a></td>
  14.                                 <td><a href="#" id="notification">Standard Log</a></td>
  15.                         </tr>  
  16.                         <tr>
  17.                                 <td><a href="#" id="confirm">Confirm Dialog</a></td>
  18.                                 <td><a href="#" id="success">Success Log</a></td>
  19.                         </tr>
  20.                         <tr>
  21.                                 <td><a href="#" id="prompt">Prompt Dialog</a></td>
  22.                                 <td><a href="#" id="error">Error Log</a></td>
  23.                         </tr>
  24.                         <tr>
  25.                                 <td><a href="#" id="labels">Custom Labels</a></td>
  26.                                 <td><a href="#" id="custom">Custom Log</a></td>
  27.                         </tr>
  28.                         <tr>
  29.                                 <td><a href="#" id="focus">Button Focus</a></td>
  30.                                 <td><a href="#" id="delay">Hide in 10 seconds</a></td>
  31.                         </tr>
  32.                         <tr>
  33.                                 <td><a href="#" id="order">Button Order</a></td>
  34.                                 <td><a href="#" id="forever">Persistent Log</a></td>
  35.                         </tr>
  36.                         </tr>
  37.                                 <th colspan="2">Ajax</th>
  38.                         </tr>
  39.                         </tr>
  40.                                 <td colspan="2" style="text-align: center;"><a href="#" id="ajax">Ajax - Multiple Dialog</a></td>
  41.                         </tr>
  42.                 </tbody>
  43.         </table>

Whole Source Code

  1. <!doctype html>
  2. <html lang="en">
  4.         <meta charset="utf-8">
  5.         <title>Alerts</title>
  6.         <link rel="stylesheet" href="../themes/alertify.core.css" />
  7.         <link rel="stylesheet" href="../themes/alertify.bootstrap.css" id="toggleCSS" />
  8.         <meta name="viewport" content="width=device-width">
  9.  
  10. </head>
  13. <br>
  14. <br>
  15. <br>
  16. <br>
  17. <br>
  18. <br>
  19.         <table border="1px" cellpadding="10">
  20.                 <thead>
  21.                         </tr>
  22.                                 <th colspan="2">Alert Dialogs and Logs</th>
  23.                         </tr>
  24.                         <tr>
  25.                                 <th>Dialogs</th>
  26.                                 <th>Logs</th>
  27.                         <tr>
  28.                 </thead>
  29.                 <tbody>
  30.                         <tr>
  31.                                 <td><a href="#" id="alert">Alert Dialog</a></td>
  32.                                 <td><a href="#" id="notification">Standard Log</a></td>
  33.                         </tr>  
  34.                         <tr>
  35.                                 <td><a href="#" id="confirm">Confirm Dialog</a></td>
  36.                                 <td><a href="#" id="success">Success Log</a></td>
  37.                         </tr>
  38.                         <tr>
  39.                                 <td><a href="#" id="prompt">Prompt Dialog</a></td>
  40.                                 <td><a href="#" id="error">Error Log</a></td>
  41.                         </tr>
  42.                         <tr>
  43.                                 <td><a href="#" id="labels">Custom Labels</a></td>
  44.                                 <td><a href="#" id="custom">Custom Log</a></td>
  45.                         </tr>
  46.                         <tr>
  47.                                 <td><a href="#" id="focus">Button Focus</a></td>
  48.                                 <td><a href="#" id="delay">Hide in 10 seconds</a></td>
  49.                         </tr>
  50.                         <tr>
  51.                                 <td><a href="#" id="order">Button Order</a></td>
  52.                                 <td><a href="#" id="forever">Persistent Log</a></td>
  53.                         </tr>
  54.                         </tr>
  55.                                 <th colspan="2">Ajax</th>
  56.                         </tr>
  57.                         </tr>
  58.                                 <td colspan="2" style="text-align: center;"><a href="#" id="ajax">Ajax - Multiple Dialog</a></td>
  59.                         </tr>
  60.                 </tbody>
  61.         </table>
  62. </center>      
  63.        
  64.  
  65.  
  66.         <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  67.         <script src="../lib/alertify.min.js"></script>
  68.         <script>
  69.                 function reset () {
  70.                         $("#toggleCSS").attr("href", "../themes/alertify.bootstrap.css");
  71.                         alertify.set({
  72.                                 labels : {
  73.                                         ok     : "OK",
  74.                                         cancel : "Cancel"
  75.                                 },
  76.                                 delay : 5000,
  77.                                 buttonReverse : false,
  78.                                 buttonFocus   : "ok"
  79.                         });
  80.                 }
  81.  
  82.                 // ==============================
  83.                 // Standard Dialogs
  84.                 $("#alert").on( 'click', function () {
  85.                         reset();
  86.                         alertify.alert("This is an alert dialog");
  87.                         return false;
  88.                 });
  89.  
  90.                 $("#confirm").on( 'click', function () {
  91.                         reset();
  92.                         alertify.confirm("This is a confirm dialog", function (e) {
  93.                                 if (e) {
  94.                                         alertify.success("You've clicked OK");
  95.                                 } else {
  96.                                         alertify.error("You've clicked Cancel");
  97.                                 }
  98.                         });
  99.                         return false;
  100.                 });
  101.  
  102.                 $("#prompt").on( 'click', function () {
  103.                         reset();
  104.                         alertify.prompt("This is a prompt dialog", function (e, str) {
  105.                                 if (e) {
  106.                                         alertify.success("You've clicked OK and typed: " + str);
  107.                                 } else {
  108.                                         alertify.error("You've clicked Cancel");
  109.                                 }
  110.                         }, "Default Value");
  111.                         return false;
  112.                 });
  113.  
  114.                 // ==============================
  115.                 // Ajax
  116.                 $("#ajax").on("click", function () {
  117.                         reset();
  118.                         alertify.confirm("Confirm?", function (e) {
  119.                                 if (e) {
  120.                                         alertify.alert("Successful AJAX after OK");
  121.                                 } else {
  122.                                         alertify.alert("Successful AJAX after Cancel");
  123.                                 }
  124.                         });
  125.                 });
  126.  
  127.                 // ==============================
  128.                 // Standard Dialogs
  129.                 $("#notification").on( 'click', function () {
  130.                         reset();
  131.                         alertify.log("Standard log message");
  132.                         return false;
  133.                 });
  134.  
  135.                 $("#success").on( 'click', function () {
  136.                         reset();
  137.                         alertify.success("Success log message");
  138.                         return false;
  139.                 });
  140.  
  141.                 $("#error").on( 'click', function () {
  142.                         reset();
  143.                         alertify.error("Error log message");
  144.                         return false;
  145.                 });
  146.  
  147.                 // ==============================
  148.                 // Custom Properties
  149.                 $("#delay").on( 'click', function () {
  150.                         reset();
  151.                         alertify.set({ delay: 10000 });
  152.                         alertify.log("Hiding in 10 seconds");
  153.                         return false;
  154.                 });
  155.  
  156.                 $("#forever").on( 'click', function () {
  157.                         reset();
  158.                         alertify.log("Will stay until clicked", "", 0);
  159.                         return false;
  160.                 });
  161.  
  162.                 $("#labels").on( 'click', function () {
  163.                         reset();
  164.                         alertify.set({ labels: { ok: "Accept", cancel: "Deny" } });
  165.                         alertify.confirm("Confirm dialog with custom button labels", function (e) {
  166.                                 if (e) {
  167.                                         alertify.success("You've clicked OK");
  168.                                 } else {
  169.                                         alertify.error("You've clicked Cancel");
  170.                                 }
  171.                         });
  172.                         return false;
  173.                 });
  174.  
  175.                 $("#focus").on( 'click', function () {
  176.                         reset();
  177.                         alertify.set({ buttonFocus: "cancel" });
  178.                         alertify.confirm("Confirm dialog with cancel button focused", function (e) {
  179.                                 if (e) {
  180.                                         alertify.success("You've clicked OK");
  181.                                 } else {
  182.                                         alertify.error("You've clicked Cancel");
  183.                                 }
  184.                         });
  185.                         return false;
  186.                 });
  187.  
  188.                 $("#order").on( 'click', function () {
  189.                         reset();
  190.                         alertify.set({ buttonReverse: true });
  191.                         alertify.confirm("Confirm dialog with reversed button order", function (e) {
  192.                                 if (e) {
  193.                                         alertify.success("You've clicked OK");
  194.                                 } else {
  195.                                         alertify.error("You've clicked Cancel");
  196.                                 }
  197.                         });
  198.                         return false;
  199.                 });
  200.  
  201.                 // ==============================
  202.                 // Custom Log
  203.                 $("#custom").on( 'click', function () {
  204.                         reset();
  205.                         alertify.custom = alertify.extend("custom");
  206.                         alertify.custom("I'm a custom log message");
  207.                         return false;
  208.                 });
  209.  
  210.                 // ==============================
  211.                 // Custom Themes
  212.                 $("#bootstrap").on( 'click', function () {
  213.                         reset();
  214.                         $("#toggleCSS").attr("href", "../themes/alertify.bootstrap.css");
  215.                         alertify.prompt("Prompt dialog with bootstrap theme", function (e) {
  216.                                 if (e) {
  217.                                         alertify.success("You've clicked OK");
  218.                                 } else {
  219.                                         alertify.error("You've clicked Cancel");
  220.                                 }
  221.                         }, "Default Value");
  222.                         return false;
  223.                 });
  224.         </script>
  225.  
  226. </body>
  227. </html>
To try this tutorial just download and run this tutorial. If you have question, suggestion or anything, just leave comment and it's my pleasure to entertain your comments or email me at [email protected]

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
Javascript
alerts
notifications
dialogs
AJAX

Add new comment

About text formats
  • 111 views