CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-events
Nir O.
Nir O.

Reputation: 1651

Any JQuery alert() replacement for JavaScript's native one?

I would like to replace the native JavaScript alert() with my own, so that I would be able to control the theme and have it more JQueryUI look and feel. I've tried numerous alternatives - JQueryUI Dialog, jAlert, jqAlert. However, it appears that all of them not functioning synchronously in the same fashion like the original alert.

Example:

function mytest()
{
    alert('one');
    alert('two');
    alert('three');
}

In this example, with the original alert(), the 3 dialogs would appear one after the other in a row. But in the substitutes, they appear all at once!

Any idea?

Upvotes: 4

Views: 9328

Answers (9)

Dilusha Gonagala
Dilusha Gonagala

Reputation: 439

DAlert jQuery UI Plugin Try this: andrewdex.github.io/dalert

Upvotes: 0

relipse
relipse

Reputation: 1820

In the mean time i also recently created a new function to allow confirm boxes with jqueryui dialog.

It is extremely easy to use

dlgConfirm('Are you sure you want to cancel this change-email request? <br><label>Current password<br><input type="password"></label>',
             'Cancel Email Change', 'Continue', function(dlg){
       //do ajax or something
       return false; //do not close dialog until ajax is complete
    }

dlgConfirm('Are you sure you want to submit this form', function(dlg){
    $('form', dlg).submit();
    return true;
});

Here is the source code (public domain):

<script>
   /**
    * Open confirmation dialog (jqueryui modal)
    *
    * @param {string} c_text text/html to show in the dialog box
    * @param {string|function(dlg_element)} c_title|confirm_callback title of the dialog box (or callback function)
    * @param {string|function(dlg_element)} c_btn_text|confirm_callback confirm button text (or callback function)
    * @param {string|function(dlg_element)} c_btn_cancel_text|confirm_callback cancel button text (defaults to 'Cancel') (or callback function)
    * @param {function(dlg_element)} confirm_callback callback after the modal box is confirmed 
    */
   function dlgConfirm(c_text, c_title, c_btn_text, c_btn_cancel_text, confirm_callback){

      if (typeof(confirm_callback) !== 'function'){
         if (typeof(c_title) == 'function'){
            confirm_callback = c_title;
         }else if (typeof(c_btn_text) == 'function'){
            confirm_callback = c_btn_text;
         }else if (typeof(c_btn_cancel_text) == 'function'){
            confirm_callback = c_btn_cancel_text;
         }
      }

      if (typeof(c_text) !== 'string'){
         c_text = 'Are you sure?';
      }
      if (typeof(c_title) !== 'string'){
         c_title = 'Confirm';
      }  
      if (typeof(c_btn_text) !== 'string'){
         c_btn_text = 'Confirm';
      }  
      if (typeof(c_btn_cancel_text) !== 'string'){
         c_btn_cancel_text = 'Cancel';
      }     

      if ($('#dlgConfirm').length == 0){
         $('body').append('<div id="dlgConfirm" title="Confirm" style="display: none">Are you sure?</div>');
      }
      var btns = {};
      btns[c_btn_text] = function() {
             var dlg = this;
             if (typeof(confirm_callback) == 'function'){
                if (confirm_callback(dlg) !== false){
                   $(this).dialog('close');
                }
             }          
      };
      btns[c_btn_cancel_text] = function() {
             $( this ).dialog("close");
      };

      $('#dlgConfirm').dialog({
         title: c_title,
         autoOpen: false,
         resizable: false,
         //height:170, //commented out so autosize works
         modal: true,
         buttons: btns
       }).html(c_text).dialog('open');
   }
   </script>

Upvotes: 0

relipse
relipse

Reputation: 1820

I found a library a long time ago that solved this problem for alert, prompt, and confirm, it is pretty easy to use:

Demo here: http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

// Usage:
//      jAlert( message, [title, callback] )
//      jConfirm( message, [title, callback] )
//      jPrompt( message, [value, title, callback] )

download here: http://labs.abeautifulsite.net/archived/jquery-alerts/jquery.alerts-1.1.zip

Upvotes: 4

T4NK3R
T4NK3R

Reputation: 4363

How about layering the alerts ?
They'll still appear all at once, but the user only sees the first, until she closes that, then the second appears (is revealed) and so forth.
- Could easily be acheaved by updating a "global" last-z-index variable..

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359956

The native alert() brings the browser to a dead halt. You will not find any third party libraries that do that, because it's not possible.*

Edit

I threw together a quick demo of how you can use a single jQuery dialog instead of an alert.

var alertManager = (function() {
    var _queue = [],
        _opts = {
            modal: true,
            autoOpen: false,
            buttons: {
                OK: function ()
                {
                    $(this).dialog('close');
                    var next = _queue.shift();
                    if (typeof next === 'string')
                    {
                        _dialog.text(next).dialog('open');
                    }
                }
            }
        },
        _dialog = $('<div id="alertDialog" title="Alert!"></div>').dialog(_opts),

        _self = {};

    _self.show = function (message) {
        if (_dialog.dialog('isOpen')) {
            _queue.push(String(message));
        }
        else {
            _dialog.text(message).dialog('open');
        }
    }

    return _self;
}());



$('#clicky').click(function ()
{
    alertManager.show('alert numero uno');
    alertManager.show('alert #2');
    alertManager.show({foo: 'bar'});
    alertManager.show(document.getElementById('clicky'));
    alertManager.show('last one');
});

Hot demo action over here →

You could also turn this into a jQuery plugin pretty easily.

*though you could fake it with a while loop that spins while the dialog is open. I do not recommend this.

Upvotes: 13

Gergely Feh&#233;rv&#225;ri
Gergely Feh&#233;rv&#225;ri

Reputation: 7941

a jquery alert:

  JQuery.fn.alert = function(message) {
     alert(message);
  };

example of using:

 $("#item1").alert("hello");

oh my god :D

the jquery is only a DOM framework. this not an other javascript! jquery is only some javascript lines. and not replacing javascript.

if you want to create a dialog box then i can suggest you to search for jquery plugin.

http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

Upvotes: 2

Hernantz
Hernantz

Reputation: 566

You can use and perfectly control this ui dialogs http://jqueryui.com/demos/dialog/

Just evoke them when needed.

Upvotes: 0

rxmnnxfpvg
rxmnnxfpvg

Reputation: 31003

You can easily mimic the synchronicity of regular js alerts using jQueryUI Dialog boxes. Simply use the events provided -- in this case, close, which is called when you close a dialog box:

<div id="dialog" title="Dialog Title">Dialog</div>
<div id="dialog2" title="Dialog Title">Another dialog</div>
$("#dialog").dialog({
    close: function(event, ui) {
        $("#dialog2").dialog();
    }
});

Now, when you close the first dialog, the second opens.

Upvotes: 0

Lord Otori
Lord Otori

Reputation: 349

If you are looking also for alternative behavior you might wanna try: http://plugins.jquery.com/project/freeow

it also alerts the user but does not lock the browser as "Matt Ball" said

Upvotes: 1

Related Questions