Thursday, 27 July 2017

Using jQuery-Confirm a Multipurpose Plugin for Alert, Confirm and Dialog with Extended Features in XPages


In my continuous search for modern plugins for my XPages applications I came across jquery-confirm, a good alternative for iziToast (see my previous blog post Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages). jquery-confirm is a multipurpose plugin for alert, confirm and dialogs with Extended features. jquery-confirm is easy to use, highly flexible and provides a great set of features like, Auto-close, Ajax-loading, Themes, Animations and more. This plugin is actively developed.
In order to use jquery-confirm, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: jquery-confirm.
Below are some examples how jquery-confirm can be used in an XPages application. In the examples I use a simple button to display the notifications.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder confirm has been added in the WebContent Folder.
Next the JavaScript and CSS files, jquery-confirm.js and jquery-confirm.css must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="confirm/js/jquery-confirm.js"></script>
<link rel="stylesheet" href="confirm/css/jquery-confirm.css" />

jquery-confirm Plugin initialization
jquery-confirm can be initialized using a simple script. In the example below I used use a button with CSJS.

<xp:button id="button1" value="Error" styleClass="btn-warning" rendered="false">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$.confirm({
title: 'Error!',
content: 'Error during submit.',
type: 'red',
icon: 'fa fa-warning',
closeIcon: true,
closeIconClass: 'fa fa-close',
draggable: true,
typeAnimated: true,
animationSpeed: 2000, // 2 seconds
buttons: {
tryAgain: {
text: 'Try again',
btnClass: 'btn-red',
action: function(){
}
},
close: function () {
}}
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>

It is also possible to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. The name of the id in the script must correspond with the id of the Button.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){$.confirm({
title: 'Success!',
content: 'Document has been saved.',
type: 'green',
icon: 'fa fa-check-square-o',
closeIcon: true,
closeIconClass: 'fa fa-close',
draggable: true,
typeAnimated: true,
animationSpeed: 2000 // 2 seconds  
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result are modern responsive notifications.


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="confirm/js/jquery-confirm.js"></script>
<link rel="stylesheet" href="confirm/css/jquery-confirm.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){$.confirm({
title: 'Success!',
content: 'Document has been saved.',
type: 'green',
icon: 'fa fa-check-square-o',
closeIcon: true,
closeIconClass: 'fa fa-close',
draggable: true,
typeAnimated: true,
animationSpeed: 2000 // 2 seconds  
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h4>jQuery-Confirm</h4>
<h5>A multipurpose plugin for alert, confirm and dialog, with Extended features.</h5>
<xp:br></xp:br>
<xp:button id="button1" value="Error" styleClass="btn-warning" rendered="true">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$.confirm({
title: 'Error!',
content: 'Error during submit document.',
type: 'red',
icon: 'fa fa-warning',
closeIcon: true,
closeIconClass: 'fa fa-close',
draggable: true,
typeAnimated: true,
animationSpeed: 2000, // 2 seconds
buttons: {
tryAgain: {
text: 'Try again',
btnClass: 'btn-red',
action: function(){
}
},
close: function () {
}
}
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:button value="Confirm" id="button2" styleClass="btn-success"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: jquery-confirm documentation

No comments:

Post a Comment