JavaScript Alert/Notification System

Added a buttonFocus option so user can specify which button (or none) to focus by default.

I know this PR won't get accepted yet as I haven't successfully managed to write the tests, nor have I grunted - I just want to share and get the code green lighted before I go though with that.

The todo list will be growing...

Todo

Alert

• [x] Set passed title message
• [x] OK button

Confirm

• [x] Set passed title message
• [x] OK button
• [x] Cancel button

Prompt

• [x] Set passed title message
• [x] OK button
• [x] Cancel button
• [x] Input field
• [x] Set default input field value

Common

• [ ] Finalize base theme. #187
• [x] Set proper alertify--TYPE class name
• [x] Handle attempt to open multiple dialogs at one time.
• [x] Keep focus inside dialog
• [x] Reset the focus to the last focused element before the dialog was open
• [x] Show cover when dialog opens
• [ ] Update ARIA attributes based on state
• [x] Keyboard shortcut - ESC = cancel, Enter = OK

Questions

• [ ] Add growl notifications? Or open separate repo...
• [ ] Allow dialogs to queue? #174

This PR will most likely be long running and changing over time.

New look

Alert

Confirm

Prompt

New API & Usage

Only supports dialog at the moment. I am thinking of moving the growl notification into its own project. 0.5.0 moves away from dynamically creating the alert dialogs and now includes the markup directly in the page.

Usage

<!-- in the head tag -->
<link rel="stylesheet" href="PATH_TO/alertify.core.css">
<link rel="stylesheet" href="PATH_TO/alertify.default.css">

<!-- preferably just before the closing body tag -->
<div id="alertifyCover" class="alertify-cover alertify-hidden" aria-hidden="true"></div>
<section id="alertifyDialog" class="alertify alertify-close" aria-labelledby="alertifyTitle" aria-hidden="true">
    <div class="alertify-body">
        <p id="alertifyTitle" class="alertify-title"></p>
        <input type="text" id="alertifyInput" class="alertify-input" aria-hidden="true">
        <nav id="alertifyButtons" class="alertify-buttons">
            <button id="alertifyButtonCancel" class="alertify-button alertify-button-cancel" aria-hidden="true"></button>
            <button id="alertifyButtonOk" class="alertify-button alertify-button-ok" aria-hidden="true"></button>
        </nav>
        <a id="alertifyFocusReset" class="alertify-focus-reset" href="#" aria-hidden="true"></a>
    </div>
</section>

<script src="PATH_TO/alertify[.min].js"></script>

Alert

// basic
alertify.alert( 'Title' ).show();

// advanced
var alert = alertify.alert( 'Title' );
alert.ok = function () {
    // OK
};
alert.show();

Confirm

// basic
alertify.confirm( 'Title' ).show();

// advanced
var confirm = alertify.confirm( 'Title' );
confirm.ok = function () {
    // OK
};
confirm.cancel = function () {
    // Cancel
};
confirm.show();

Prompt

// basic
alertify.prompt( 'Title' ).show();

// advanced
var prompt = alertify.prompt( 'Title' );
prompt.ok = function ( val ) {
    // OK
    // val => Value of input field
};
prompt.cancel = function () {
    // Cancel
};
prompt.show();

Extra methods

A few extra methods are available on each dialog.

var alert = alertify.alert( 'Title' );
alert.onshow = function () {
    // called on dialog show
};
alert.onclose = function () {
    // called on dialog closed
};
alert.onfocus = function () {
    // called after focus to element has been set
};

alert.show(); // shows the dialog

// close() is available if a dialog must be closed programmatically, 
// it's automatically call on click of a button
alert.close(); // closes the dialog

When I trigger a prompt dialog at the bottom of a long page the document jumps to the very top. I'm using the default theme and (the rather old Chrome 18, cannot update on this machine will try with a newer chrome)

Also when the dialog opens and the page scrolls, the entire page flashes black for a split second.

I don't see why this is happening, given that position fixed is used on the container element for the dialog. Firefox behaves as expected (no flash, no page scroll)

It would be nice if we could set the input's type and some of its attributes, you can make use of HTML5's new input attributes and types:

Attributes:

1. autocomplete: for turning autocomplete on or off.
2. pattern: for restricting input, for examle, to only numbers or letters.

Types:

1. email
2. number
3. url or other types.

https://developer.mozilla.org/en-US/docs/HTML/Element/Input

I'm using Alertify in a yeoman project using require.js to load it. It works pretty well in all Browsers I have seen so far, but it completely hangs Safari on iOS 5.1.1 as well as latest Chrome.

noticeUser: ->
  if @model.get('status') == 'completed'
    Alertify.set labels:
      ok: "Thanks"
    Alertify.alert "Your data has been sent."
  else
    Alertify.set labels:
      ok: "Ok, I'll try later..."
    Alertify.alert "Error during sending your data!"

This piece of coffe triggers the error. Both browsers become completely unresponsive to touch events in the rendering area. Orientation change still works, and the page can be reloaded, but fails then in the same situation.

Any ideas what could cause this behaviour? Any workarounds?

Regards Jan

When I use alert dialog, the "ok" button appears to be clicked, but does not trigger the click event. On mouseclick down, i see the button itself disappear, revealing a small ok text link. On mouseclick up, the button reappears. Clicking the button doesn't register the dismiss event, only clicking the button exactly where the underneath text link is will register the dismiss event. I don't see this behaviour in the sample page :-(. I get the same issue with FF 16 and IE 8/9 on windows xp (i know ... its a work machine)

All JS disabled (except as below). Issue still present in: *FF16, IE8 on WinXP *FF17, IE10 on Win7 Works in Chrome on Win7.

My Code:

<html>
<body>
...
</body>
<script language="javascript">

function gotoButtonClick() {
    /* validate the mandatory fields */
    alertify.alert("Please enter Phone # and SIM Serial #", function () { 
        //after clicking OK
    });

}

</script>
<!-- JavaScripts -->
<script src="./js/alertify.min.js"></script>
</html>

Pics show what happened after alert slides in. *First pic shows mouse click-down on button - reveals small 'ok' text link. *Second pic shows mouse click-up - shows the button again, dialog is not dismissed *ONLY when the button is clicked why hovering EXACTLY over the hidden 'ok' text link, is the alert dialog dismissed

UPDATE

It was a clash with some custom css :-(

I built the latest code (0.3 had an unrelated issue so I can't use that) and am having issues with prompts (iPhone breaks, iPad seems to be ok, Safari/Chrome desktop seems fine).

If I enter a value and either hit go on the iOS keyboard or hit the OK (alertify) dialog button, the keyboard remains visible (even though the dialog and text field are gone) and the body ends up being disabled. I try touching some of my elements my callback ends up being called again.

Hopefully I've described this ok let me know if I'm not making any sense.

In 100% of the cases I use a confirm dialog, I am making double sure the user wants to take the action they just indicated, because the action is dangerous or has big consequences. In these cases it's dangerous to have the OK button focused by default, as I want the user to do extra work to complete the action.

Can alertify get a new property, say focusOn, that allows one to set whether the focus should be on ok, cancel or none?

I have a confirm which, in turn calls an ajax call, and if the ajax call returns something invalid, an alert is shown.

The confirm works fine, but the alert flashes up and then disappears without me being able to read it.

Cut down version of the code here: http://pastebin.com/uW4Z8W9i

I have replaced the alertify alert, with a standard alert and I get the result I require but without the nice look... I'd love to be able to resolve this and have an alertify alert.

This is running in Chrome 27.0, on alertify v3.9

Hello,

I develop a website in asp.net and I wanted to add alertify on it. The problem is that I insert alertify.min.js (and the css core and default) and when I want to call alertify, I have an error saying "alertify is not defined". It considers that alertify does not exist as if I had not inserted it in the page.

I guess there is something making a conflict but I don't know what...

For information, I use a scriptManager (it activates AJAX for ASP.NET) and I use many jQuery scripts. Could it be the source of this problem? I spent a lot of time on it, but I didn't find anything conclusive...

Can you help me please?

I downloaded a stable version and tried

 alertify.set({ labels: {ok: "Accept", cancel : "Deny"} });
 alertify.confirm("Confirm dialog with custom button labels", function (e) {
 if (e) { alertify.success("You've clicked OK"); }
 else { alertify.error("You've clicked Cancel"); }

In IE9 in compatibility mode a dialog displays only the left button, until you hover a mouse over the place right button is supposed to be. In IE standard mode it works fine (and works fine in Chrome.)

Hi,

Could anyone help me with using

alertify.confirm("This is a confirm dialog.",
  function(){
    alertify.success('Ok');
  },
  function(){
    alertify.error('Cancel');
  });

Because when i use that code when the message box pop up, it automatically refresh the page. I didn't call any refresh page. So when the messagebox pop up i have no time to choose or click ok or cancel because it refresh the page.

Is that a bug ? how i can prevent it from refresh the page ?

Thank You

Dear Fabien, hope all is well, you answered a question before for a href

``

`$(document).ready(function(){ $('.delete-page').on('click', function(event){ // add me, stop the default link from clicking event.preventDefault();

    alertify.confirm("Message", function (e) {
      if (e) {
          // use window.location and go to a->href
      } else {            
        return false; 
      }        
  });     
});

});`

what if i have an id thats passed with in href?xxxx?$id? when a user clicks in the table it takes the id so, i guess in this case it wont work?

Thank you so much

it's any solution? Confirm popup not wotking for mobile device? on desktop working perfectly:

<script src="lib/alertify.min.js"></script>
<script>
	function reset () {
		$("#toggleCSS").attr("href", "themes/alertify.default.css");
		alertify.set({
			labels : {
				ok     : "ok",
				cancel : "cancel"
			},
			delay : 5000,
			buttonReverse : false,
			buttonFocus   : "ok"
		});
	}

	</script>

This pull request is improved from the pull request #239

Needed this functionality on my ajax requests. Open a notification, save that notification on a variable, do stuff and close it.

What i did was, changed the log,error and success notification methods' return value from alertify object to a 0-100 math random number. Random value is used as part of the class name of the notification to be created, and with the closeNow() method, i used it to close the dialog i wanted to close. And while i found some time to kill, i added a closeAll() method that closes all open notifications with the same idea.

After that i edited the example page to test, document/explain what i did. Used a minifier to minify the edited js file.

Quick usage:

tempNotification = alertify.log("A persistent nofitication (This one will be closed)", "", 0);
 ... // do stuff
alertify.closeNow(tempNotification); // closes spesific notification

alertify.closeAll(); // closes all of the open notifications.