How to create alert notifications and modals

The dialog() and confirm() methods are concrete5 wrappers for jQuery UI. The concrete5 notifications use PNotify.js and can be created using the ConcreteAlert JavaScript object, the PNotify JavaScript object, and the PHP UserInterface service (helper/concrete/ui).

The ConcreteAlert object is created in alert.js and is combined with PNotify and other scripts as app.js (concrete/js/app.js). When logged in, app.js is loaded by the concrete5 interface, with the script added near the closing body tag. To make sure app.js has been loaded before using it, use jQuery .ready(), or a similar method, to make sure ConcreteAlert and PNotify are available. When using the UserInterface service notify() method, it will return a script tag with a PNotify object and options wrapped in a jQuery .ready() shorthand method.

Translatable strings in JavaScript should be wrapped in json_encode() and t() and t() in PHP. The json_encode() method will escape quotes and t() is used for core translation.

First, on click, we grab the current button in a variable. I called it button you can call it anything.
Then we modify our custom functin to accept a parameter because we will send it our button to work with. Our function now looks like this myOnCloseFunction(button)

Finally, in our function we have 2 tasks: first we use unbind() to remove the previous click action attached to the button. Because we used event.preventDefault() on the button when setting our click action, we can't count on that button to trigger any action anymore so we cancel that.

Then we trigger a click on the button by calling the very aptly named click() function on it so it will do what it was supposed to do all along.

And we're done with this one.

Now let us deal with the situation where the button or link didn't have any action attached to it. Maybe that link or button was mean to be used through Javascript all along and is used purely as a trigger.

Here the idea is the same as in the previous situation with 2 differences: we do not have a default action to prevent since there's no action at all and we do not have an action to trigger once the user confirms their choice.

The solution is to use a redirect if it's a link or manually submit the form if it's a form we're dealing with.

I'll let you look at triggering a form submit on your own, it's not complicated to figure out.

I'm going to focus on redirection and look at the possible scenarii: through JavaScript or through PHP.

If your script is in a JS file you will have no choice but to redirect through JS. One drawback of that situation is your link better be static.

More often than not, however, our link will be dynamic with parameters sent from PHP (a file ID for instance) and that would complicate things. In that case you'll have to devise a way to make your script aware of those parameters.

The way Concrete5 deals with this is to set the whole URL as an attribute on the triggering element (generated through PHP) so the script can grab it easily. For instance:

<button data-action="http://mysite.com/myaction?fID=3">

All the JS needs to do is to grab that data-action value and redirect to it to achieve the desired result.

Redirecting in JS can be done easily:

function myOnCloseFunction(button) {
// do this when the modal is confirmed
window.location.href = button.attr('data-action');
}

I know treating a data attribute as a simple attribute instead of a data store is not best but it ensure maximum compatibility with all kinds of browsers so just humour me on this one.

Now if your JS code is hard-coded in a PHP file, you can simplify things. Just remove references to our button since we won't need them anymore: