jQuery UI Alert Dialog as a replacement for alert

Question

I m using alert   to output my validation errors back to the user as my design does not make provision for anything else  but I would rather use jQuery UI dialog as the alert dialog box for my message    Since errors are not contained in a  html  div  I am not sure how to go about doing this  Normally you would assign the dialog   to a div say     divName   dialog   but I more need a js function something like alert dialog  Custom message here   or something similiar   Any ideas

User · Answer

Building on eidylon s answer  here s a version that will not show the title bar if TitleMsg is empty   function jqAlert outputMsg  titleMsg  onCloseCallback        if   outputMsg  return       var div     lt div gt  lt  div gt         div html outputMsg  dialog           title  titleMsg          resizable  false          modal  true          buttons                 OK   function                        this  dialog  close                                     close  onCloseCallback             if   titleMsg  div siblings   ui-dialog-titlebar   hide        see jsfiddle

User · Answer

DAlert jQuery UI Plugin Check this out  This may help you

User · Answer

Just throw an empty  hidden div onto your html page and give it an ID   Then you can use that for your jQuery UI dialog   You can populate the text just like you normally would with any jquery call

User · Answer

Using some of the info in here I ended up creating my own function to use   Could be used as     custom alert    custom alert   Display Message     custom alert   Display Message    Set Title       jQuery UI Alert Replacement  function custom alert  message  title         if    title           title    Alert        if    message           message    No Message to Display             lt div gt  lt  div gt    html  message   dialog           title  title          resizable  false          modal  true          buttons                 Ok   function                         this   dialog   close

User · Answer

Use this code syntax          lt div gt  lt  div gt    html  YOUR MESSAGE   dialog       this works but it append a node to the DOM  You can use a class and then or first remove all elements with that class  ex   function simple alert msg           div simple alert   remove            lt div gt  lt  div gt    html is valid msg  dialog  dialogClass  simple alert

User · Answer

I took  EkoJR s answer  and added an additional parameter to pass in with a callback function to occur when the user closes the dialog    function jqAlert outputMsg  titleMsg  onCloseCallback        if   titleMsg          titleMsg    Alert        if   outputMsg          outputMsg    No Message to Display             lt div gt  lt  div gt    html outputMsg  dialog           title  titleMsg          resizable  false          modal  true          buttons                 OK   function                        this  dialog  close                                     close  onCloseCallback             You can then call it and pass it a function  that will occur when the user closes the dialog  as so    jqAlert  Your payment maintenance has been saved              Processing Complete            function    window location    search aspx

User · Answer

There is an issue that if you close the dialog it will execute the onCloseCallback function   This is a better design   function jAlert2 outputMsg  titleMsg  onCloseCallback        if   titleMsg          titleMsg    Alert        if   outputMsg          outputMsg    No Message to Display             lt div gt  lt  div gt    html outputMsg  dialog           title  titleMsg          resizable  false          modal  true          buttons                 OK   onCloseCallback               Cancel   function                  this   dialog   destroy

User · Answer

I don t think you even need to attach it to the DOM  this seems to work for me       lt div gt Test message lt  div gt    dialog      Here s a JS fiddle   http   jsfiddle net TpTNL 98

User · Answer

As mentioned by nux and micheg79 a node is left behind in the DOM after the dialog closes   This can also be cleaned up simply by adding     this  dialog  destroy   remove      to the close method of the dialog  Example adding this line to eidylon s answer   function jqAlert outputMsg  titleMsg  onCloseCallback        if   titleMsg          titleMsg    Alert        if   outputMsg          outputMsg    No Message to Display             lt div gt  lt  div gt    html outputMsg  dialog           title  titleMsg          resizable  false          modal  true          buttons                 OK   function                        this  dialog  close                                     close  function     onCloseCallback                                  Cleanup node s  from DOM                                 this  dialog  destroy   remove                                            EDIT  I had problems getting callback function to run and found that I had to add parentheses    to onCloseCallback to actually trigger the callback  This helped me understand why  In JavaScript  does it make a difference if I call a function with parentheses

[javascript] jQuery UI Alert Dialog as a replacement for alert()

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to alert

Examples related to jquery-ui-dialog