Getting Started with JSP Dialog

24 Jan 20244 minutes to read

This section helps you to understand the getting started of the Dialog control with the step-by-step instructions.

Create a Dialog

The following steps guide you to add a Dialog control.

Create a JSP page and add the scripts and css references in the order mentioned in the following code example.

<head>
        <title>JSP Application</title>
        <link href="http://cdn.syncfusion.com/**28.1.33**/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script src="https://cdn.syncfusion.com/**28.1.33**/js/web/ej.web.all.min.js" type="text/javascript"></script>
    </head>

NOTE

Note: For further reference, refer the common JSP Getting Started Documentation to create an application and add necessary scripts and styles for rendering the Dialog control.

Create a simple Dialog by adding ej:dialog tag to initialize the control in the application.

HTML

<ej:dialog id="basicDialog" width="450">
        </ej:dialog>

To get the following output from the above-mentioned code.

JSP Dialog add content

Add dialog content

You can add any content to dialog inside the ej:dialog-contentTemplate tag. The below code will render dialog control with content.

HTML

<ej:dialog id="basicDialog" width="450">
          <ej:dialog-contentTemplate>
              <div>    
              <p> This is a simple dialog </p>
              </div> 
            </ej:dialog-contentTemplate>
        </ej:dialog>

You will get the following output from the above-mentioned code

JSP Dialog set a header

Set a header

To set header for the dialog control, the title property is used.

HTML

<ej:dialog id="basicDialog" title="Dialog" width="450">
          <ej:dialog-contentTemplate>
              <div>    
              <p> This is a simple dialog </p>
              </div> 
            </ej:dialog-contentTemplate>
        </ej:dialog>

You will get the following output from the above-mentioned code.

JSP open dialog dynamically

Open Dialog dynamically

In most cases, the Dialog controls are needed only in dynamic actions like showing some messages on clicking a button, to provide alert, etc. So, the Dialog control provides “open” and “close” methods to open/close the dialogs dynamically.
The Dialog control can be hidden on initialize using showOnInit property which should be set to false.
The dialog will be opened on clicking the Button control. Refer to the below mentioned code.

HTML

<% request.setAttribute("prop", false);   %>
       <div>
          <ej:button id="btnOpen" click="BtnClick" text="Click Here to Open dialog"></ej:button>
          <ej:dialog id="basicDialog" title="Dialog" width="450" showOnInit="${prop}">
            <ej:dialog-contentTemplate>
               <div>    
	             <p> This is a simple dialog </p>
               </div> 
             </ej:dialog-contentTemplate>
          </ej:dialog>
       </div>

JAVASCRIPT

function BtnClick(){
        	$("#basicDialog").ejDialog("open");
        }

To get the following output from the above-mentioned code.

JSP Dialog properties

NOTE

You can find the Dialog control properties from the API reference.