Liferay is easy: Open/Close Dialog Box using jQuery in Liferay

Today we will discuss how to Open and Close jQuery Dialog box in liferay.In this we create a button on click of button a form is opened in dialog box which contain two input fields name , password and two buttons one for Submit the form and second for cancel.On Submit form is Submitted and details are shown in the dialog box .On Cancel form is simply closed so lets start this step by step. I already write a similar blog using AUI .

Step 1:-Create Liferay project and Change view.jsp
Create a liferay project and then create a MVC portlet in it.Open view.jsp and paste the content:-

view.jsp

Now create login.jsp and paste this content:-

login.jsp

Explanation:-
1)We are opening this dialog box on the click of button with id login-user.
2)When we create dialog box object inside view.jsp :-
var dialog = $( "#loginForm" ).dialog({});
we use id "loginForm" which is the id of div in which we create our form ie inside login.jsp.
3)We create object of dialog box on view.jsp and use some properties like:-
a)autoOpen: values are true/false.
b)hide,show: value are blind,bounce etc ie effects when dialog box open or close.
c)modal: true/false ie background screen is disable or not.
4)We also include a login.jsp which is open in view.jsp. we write our form inside a div with id loginForm.On click of submit button form is submitted and processAction method of controller is called.

Step 2:-Change the Controller
Open your java class and paste this:-

Dialog.java

Explanation:-
Here we just fetch name and password values from form if both are equal than we send the user to success.jsp and if both are unequal than user go to failure.jsp.

Step 3:-Create success and failure jsps
Create success.jsp and failure.jsp as:-

success.jsp

failure.jsp

Step 4:-Add js and css files
Open you css folder and add jquery-ui.css . Now open js folder and add jquery-1.10.2.js and jquery-ui.js . Now add all theses entries inside liferay-portlet.xml also provide entry for required name space parameter as false.

liferay-portlet.xml

Step 5:-Check output
Now deploy you portlet and check the output as:-

Now as you can see in above images there is no close icon appear in dialog box this is because of jquery and bootstrap conflict. So just download image from this link and paste in images folder. Now open main.css and paste this:-

Now deploy your portlet and see the changes:-