Dynamic Dialog Boxes


The Basic problem with Dialog Boxes
Almost all the web applications use dialog boxes to popup a message to the user or confirm for an action taken by the user. Most of the time we end up using JavaScript for such kind of dialog boxes. And most of the time our purpose gets solved with JavaScript alerts/dialog boxes. However when we have a slightly different request, JavaScript fails to support those requests. For example, client might ask for a Yes/No dialog box instead of Ok/Cancel and JavaScript fails to support this. You can still achieve Yes/No in javascript, however it will have limitations, such as it will work with IE only and it will display VBscript at the title bar of the dialog box. Let’s take another example, where in the client wants to have three buttons on the dialog box. Again javascript fails to support this functionality.  Another example, where in the client wants to have dynamic look and feel, or a look and feel matching the application in context; again javascript fails here and provides only a basic dialog box.

JQuery Dialog Boxes as an Option
You can eliminate all the above mentioned limitations of Javascript by using JQuery or other api’s. However, I’ve used JQuery for this. Now again you, might think that anyone can write a dialog box in JQuery, so what’s the heck. Well you are right anyone can write a JQuery dialog box with above mentioned features, however, what I’m trying to provide here is a very simple way of doing that, and a browser independent api for creating dialog boxes.  Even though you create dialog boxes using JQuery, they will not be same on all the browsers and all the versions of the same browser. What I’ve tried here is to have the dialog boxes consistent on all the browsers and all the versions. (Do let me know if you find discrepancies over different browsers.)

A look at the dialog boxes
The following information dialog box with one button and you can have anything on this button. Fox example “Ok”, ”Delete”, ”Yes”. You can four different types of dialog boxes, such as Warning, Information, Question and Error.



Following is a warning box with two buttons:



OR                                                                                
  


  
Following is a question box with three buttons and with a different theme:


Following is an error box:


Following is again a question box with different theme:


Using dialog box
The following section explains, as to how to implement dialog.js to create dialog boxes.
What you will be getting:
1.                      A dialog.js
2.                      A dialog.css
What you have to do:
1.       Import dialog.js in the jsp file, where you have to create a dialog box.
a.      <script src="<%=request.getContextPath()%>/staticcontent/js/dialog.js" />
2.       Import dialog-hotsneaks.css in the jsp file, where you have to create a dialog box.
a.      <link href="<%=request.getContextPath()%>/staticcontent/css/dialog-hotsneaks.css" rel="stylesheet" type="text/css" />
3.       Call the method as follows:
a.       For one button
                                                              i.      _dialog("Information", "This is a dialog box with Ok!! button.", "Ok !!","okCalled");
                                                             ii.      Write the callback function and implement the code that you want to execute.
function okCalled()
            {
              alert("OkCalled");
// Implement the logic you want execute on click of Ok   // button.
            }
b.      For two buttons
                                                              i.      _dialog("Warning", "You can even have Yes/No instead of Ok/Cancel !!.", "Yes","yesCalled","No","noCalled");
                                                             ii.      Write the callback functions and implement the code that you want to execute.
function yesCalled()
            {
                  alert(" Yes Called");
// Implement the logic you want execute on click of Yes   // button.
            }
           
            function noCalled()
            {
                  alert("No Called");
// Implement the logic you want execute on click of No   // button.
            }

c.       For three buttons
                                                              i.      _dialog("Question", "Do you know the reason behind this issue ? ", "Yes","yesCalled","No","noCalled", "No Idea", "noIdeaCalled");
                                                             ii.      Write the callback function and implement the code that you want to execute.
               function yesCalled()
               {
                     alert(" Yes Called");
// Implement the logic you want execute on click of Yes   // button.
`
               }
        
               function noCalled()
               {
                     alert("No Called");
// Implement the logic you want execute on click of No   // button.
               }
        
               function noIdeaCalled()
               {
                     alert("noIdea Called");
// Implement the logic you want execute on click of   // No Idea button.
               }
Types of Dialog Boxes
You can have basically four types of dialog boxes which are:
1.       Warning
2.       Information
3.       Error
4.       Question
This is the first parameter you pass in the function _dialog .
Explanation of the parameters being passed to _dialog method
1.       First parameter as mentioned above is type of dialog box you want to create.
2.       Second parameter is the message you want to display on the dialog box.
3.       Third parameter is name of the first button or label of the first button.
4.       Fourth parameter is the name of the call back method which you want to call on click of the first button.
5.       Fifth parameter is the name of the second button. It’s optional, and you will have it when you want to have two buttons on the dialog box.
6.       Sixth parameter is the callback function, which you want to call on click of the second button.
7.       Seventh parameter is the name of the third button. It’s optional, and you will have it when you want to have three buttons on the dialog box.
8.       Eighth parameter is the callback function, which you want to call on click of the third button.

You can change the theme by importing any one following css:
1.  <link href="<%=request.getContextPath()%>/staticcontent/css/dialog-darkhive.css" rel="stylesheet" type="text/css" />

2.  <link href="<%=request.getContextPath()%>/staticcontent/css/dialog-base.css" rel="stylesheet" type="text/css" />

3.  <link href="<%=request.getContextPath()%>/staticcontent/css/dialog-blitzer.css" rel="stylesheet" type="text/css" />


Disclaimer : I’ve used to google’s css for different themes.

Mail me if you need the code to implement the dialog boxes at yogender@gmail.com

Comments

Post a Comment

Popular posts from this blog

Spring Security - Adding more information to the authenticated user.

I was using spring Security to perform authentication against the database and I needed to load the user information once the user gets authenticated. However, the spring org.springframework.security.core.userdetails.User object was not allowing me add more details to the logged in User object. In my case, I had to add phone number to the authenticated user. In the following section I'll show as to how to add additional information to the authenticated user. Create an object to contain the additional information. We will first create a MediUser object which will extend the Spring org.springframework.security.core.userdetails.User object. The MediUser object contains additional information like first name, middle name, last name, phone number and alternative phone number. Following is the code for MediUser : import java.util.Collection; import org.springframework.security.core.GrantedAuthority; import org.springframework.security.core.
Read more

Hibernate Difference between update() and merge()

Image
In order to explain the difference between update and merge, I have created an example, which you can execute or just read it to understand the difference. 1. First Create a database medireports: (DB=MySQL) CREATE DATABASE `medireports` 2. Now Create a 'reports' table: CREATE TABLE `reports` ( `reportid` varchar(20) NOT NULL, `report` mediumblob, `phonenumber` bigint(20) NOT NULL, `labid` varchar(45) DEFAULT NULL, `retainreport` varchar(45) DEFAULT NULL, `reportdate` date DEFAULT NULL, `filename` varchar(65) DEFAULT NULL, PRIMARY KEY (`reportid`) ) 3. Insert data into the reports table: INSERT INTO `medireports`.`reports`(`reportid`,`phonenumber`,`retainreport`,`reportdate`,`filename`) VALUES ('ZL1234', '9999666222', '0', '2014-03-13', 'jqModal.js'); INSERT INTO `medireports`.`reports`(`reportid`,`phonenumber`,`retainreport`,`reportdate`,`filename`) VALUES ('ZL123456&
Read more

Running tomcat maven plugin in Debug mode (in STS, Eclipse and MyEclipse)

Image
Over here I'll explain, as to how to run a tomcat maven plugin in debug mode, in Eclipse and Spring Tool Source (STS). It will be a three step setup and once you are done with the setup, you can run the tomcat server in debug mode with just one click. Following are the setup steps: Step 1 : Entering maven dependency for tomcat in pom.xml file Step 2 : Creating debug configuration Step 3 : Running tomcat server in debug mode Step 1: Entering maven dependency for tomcat in pom.xml file Open your pom.xml file. Enter the tomcat plugin dependency, as shown in the following figure: Now right click on the pom.xml and select Run As à Maven Install . Step 2 :  Creating Debug Configuration Right click on pom.xml and select Debug As à Debug Configurations… A Debug Configurations window will open, as shown in the following figure: On the left hand window right click on Maven Build , as a result, following screen will get displayed:
Read more