Dialogs and Notification Logs using Jquery

Submitted by: 
Language: 
Visitors have accessed this post 1414 times.

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

Whole Source Code

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

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.