JQuery-Plugin, JQuery Dialog

Hey...

In the most web applications we need a dialog to show extra information, confirm or alert something, view the detail of selected row of current table and so on. A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. It can be a modal window or non-modal window but mostly modal mode is used. Here I'm going to present a very useful jquery base tool for dialog. JQuery Dialog is one of the useful component of JQueryUI plugin. You can find useful information of it from here.

Like other JQueryUI plugins, this plugin is also should be initiated first and withing the initiation you can set some properties or change the default of them. A very simple call of dialog is like this:

<div id="dialog" title="User View">This is my first dialog</div>
<script type="text/javascript">
    $(function() {
        $("#dialog").dialog("open");
    });
</script>

As you see, You should prepare a div then place every things you want in it. Then create a script to make it as a dialog. so you should do it on you page start up.
The table of options, methods and events are available here:

Live Demo:

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Please click this button to display a simple dialog:

Options:

Name	Type	Default	Description
disabled	Boolean	false	Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog. Code examples Initialize a dialog with the disabled option specified.     $( ".selector" ).dialog({ disabled: true }); Get or set the disabled option, after init.     //getter     var disabled = $( ".selector" ).dialog( "option", "disabled" );     //setter     $( ".selector" ).dialog( "option", "disabled", true );
autoOpen	Boolean	true	When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it. Code examples Initialize a dialog with the autoOpen option specified.     $( ".selector" ).dialog({ autoOpen: false }); Get or set the autoOpen option, after init.     //getter     var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );     //setter     $( ".selector" ).dialog( "option", "autoOpen", false );
buttons	Boolean	{ }	Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object. Code examples Initialize a dialog with the buttons option specified.     $( ".selector" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } }); Get or set the buttons option, after init.     //getter     var buttons = $( ".selector" ).dialog( "option", "buttons" );     //setter     $( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );
buttons	Array	[ ]	Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button. Code examples Initialize a dialog with the buttons option specified.     $( ".selector" ).dialog({ buttons: [         {             text: "Ok",             click: function() { $(this).dialog("close"); }         }     ] }); Get or set the buttons option, after init.     //getter     var buttons = $( ".selector" ).dialog( "option", "buttons" );     //setter     $( ".selector" ).dialog( "option", "buttons", [         {             text: "Ok",             click: function() { $(this).dialog("close"); }         }     ] );
closeOnEscape	Boolean	true	Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key. Code examples Initialize a dialog with the closeOnEscape option specified.     $( ".selector" ).dialog({ closeOnEscape: false }); Get or set the closeOnEscape option, after init.     //getter     var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );     //setter     $( ".selector" ).dialog( "option", "closeOnEscape", false );
closeText	String	'close'	Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme. Code examples Initialize a dialog with the closeText option specified.     $( ".selector" ).dialog({ closeText: 'hide' }); Get or set the closeText option, after init.     //getter     var closeText = $( ".selector" ).dialog( "option", "closeText" );     //setter     $( ".selector" ).dialog( "option", "closeText", 'hide' );
dialogClass	String	''	The specified class name(s) will be added to the dialog, for additional theming. Code examples Initialize a dialog with the dialogClass option specified.     $( ".selector" ).dialog({ dialogClass: 'alert' }); Get or set the dialogClass option, after init.     //getter     var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );     //setter     $( ".selector" ).dialog( "option", "dialogClass", 'alert' );
draggable	Boolean	true	If set to true, the dialog will be draggable will be draggable by the titlebar. Code examples Initialize a dialog with the draggable option specified.     $( ".selector" ).dialog({ draggable: false }); Get or set the draggable option, after init.     //getter     var draggable = $( ".selector" ).dialog( "option", "draggable" );     //setter     $( ".selector" ).dialog( "option", "draggable", false );
height	Number	'auto'	The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content. Code examples Initialize a dialog with the height option specified.     $( ".selector" ).dialog({ height: 530 }); Get or set the height option, after init.     //getter     var height = $( ".selector" ).dialog( "option", "height" );     //setter     $( ".selector" ).dialog( "option", "height", 530 );
hide	String	null	The effect to be used when the dialog is closed. Code examples Initialize a dialog with the hide option specified.     $( ".selector" ).dialog({ hide: 'slide' }); Get or set the hide option, after init.     //getter     var hide = $( ".selector" ).dialog( "option", "hide" );     //setter     $( ".selector" ).dialog( "option", "hide", 'slide' );
maxHeight	Number	false	The maximum height to which the dialog can be resized, in pixels. Code examples Initialize a dialog with the maxHeight option specified.     $( ".selector" ).dialog({ maxHeight: 400 }); Get or set the maxHeight option, after init.     //getter     var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );     //setter     $( ".selector" ).dialog( "option", "maxHeight", 400 );
maxWidth	Number	false	The maximum width to which the dialog can be resized, in pixels. Code examples Initialize a dialog with the maxWidth option specified.     $( ".selector" ).dialog({ maxWidth: 600 }); Get or set the maxWidth option, after init.     //getter     var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );     //setter     $( ".selector" ).dialog( "option", "maxWidth", 600 );
minHeight	Number	150	The minimum height to which the dialog can be resized, in pixels. Code examples Initialize a dialog with the minHeight option specified.     $( ".selector" ).dialog({ minHeight: 300 }); Get or set the minHeight option, after init.     //getter     var minHeight = $( ".selector" ).dialog( "option", "minHeight" );     //setter     $( ".selector" ).dialog( "option", "minHeight", 300 );
minWidth	Number	150	The minimum width to which the dialog can be resized, in pixels. Code examples Initialize a dialog with the minWidth option specified.     $( ".selector" ).dialog({ minWidth: 400 }); Get or set the minWidth option, after init.     //getter     var minWidth = $( ".selector" ).dialog( "option", "minWidth" );     //setter     $( ".selector" ).dialog( "option", "minWidth", 400 );
modal	Boolean	false	If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements. Code examples Initialize a dialog with the modal option specified.     $( ".selector" ).dialog({ modal: true }); Get or set the modal option, after init.     //getter     var modal = $( ".selector" ).dialog( "option", "modal" );     //setter     $( ".selector" ).dialog( "option", "modal", true );
position	String, Array	'center'	Specifies where the dialog should be displayed. Possible values: 1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. 2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) 3) an array containing x,y position string values (e.g. ['right','top'] for top right corner). Code examples Initialize a dialog with the position option specified.     $( ".selector" ).dialog({ position: 'top' }); Get or set the position option, after init.     //getter     var position = $( ".selector" ).dialog( "option", "position" );     //setter     $( ".selector" ).dialog( "option", "position", 'top' );
resizable	Boolean	true	If set to true, the dialog will be resizeable. Code examples Initialize a dialog with the resizable option specified.     $( ".selector" ).dialog({ resizable: false }); Get or set the resizable option, after init.     //getter     var resizable = $( ".selector" ).dialog( "option", "resizable" );     //setter     $( ".selector" ).dialog( "option", "resizable", false );
show	String	null	The effect to be used when the dialog is opened. Code examples Initialize a dialog with the show option specified.     $( ".selector" ).dialog({ show: 'slide' }); Get or set the show option, after init.     //getter     var show = $( ".selector" ).dialog( "option", "show" );     //setter     $( ".selector" ).dialog( "option", "show", 'slide' );
stack	Boolean	true	Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus. Code examples Initialize a dialog with the stack option specified.     $( ".selector" ).dialog({ stack: false }); Get or set the stack option, after init.     //getter     var stack = $( ".selector" ).dialog( "option", "stack" );     //setter     $( ".selector" ).dialog( "option", "stack", false );
title	String	''	Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element. Code examples Initialize a dialog with the title option specified.     $( ".selector" ).dialog({ title: 'Dialog Title' }); Get or set the title option, after init.     //getter     var title = $( ".selector" ).dialog( "option", "title" );     //setter     $( ".selector" ).dialog( "option", "title", 'Dialog Title' );
width	Number	300	The width of the dialog, in pixels. Code examples Initialize a dialog with the width option specified.     $( ".selector" ).dialog({ width: 460 }); Get or set the width option, after init.     //getter     var width = $( ".selector" ).dialog( "option", "width" );     //setter     $( ".selector" ).dialog( "option", "width", 460 );
zIndex	Integer	1000	The starting z-index for the dialog. Code examples Initialize a dialog with the zIndex option specified.     $( ".selector" ).dialog({ zIndex: 3999 }); Get or set the zIndex option, after init.     //getter     var zIndex = $( ".selector" ).dialog( "option", "zIndex" );     //setter     $( ".selector" ).dialog( "option", "zIndex", 3999 );

Events:

Name	Type	Description
create	dialogcreate	This event is triggered when dialog is created. Code examples Supply a callback function to handle the create event as an init option.     $( ".selector" ).dialog({        create: function(event, ui) { ... }     }); Bind to the create event by type: dialogcreate.     $( ".selector" ).bind( "dialogcreate", function(event, ui) {       ...     });
beforeClose	dialogbeforeclose	This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented. Code examples Supply a callback function to handle the beforeClose event as an init option.     $( ".selector" ).dialog({        beforeClose: function(event, ui) { ... }     }); Bind to the beforeClose event by type: dialogbeforeclose.     $( ".selector" ).bind( "dialogbeforeclose", function(event, ui) {       ...     });
open	dialogopen	This event is triggered when dialog is opened. Code examples Supply a callback function to handle the open event as an init option.     $( ".selector" ).dialog({        open: function(event, ui) { ... }     }); Bind to the open event by type: dialogopen.     $( ".selector" ).bind( "dialogopen", function(event, ui) {       ...     });
focus	dialogfocus	This event is triggered when the dialog gains focus. Code examples Supply a callback function to handle the focus event as an init option.     $( ".selector" ).dialog({        focus: function(event, ui) { ... }     }); Bind to the focus event by type: dialogfocus.     $( ".selector" ).bind( "dialogfocus", function(event, ui) {       ...     });
dragStart	dialogdragstart	This event is triggered at the beginning of the dialog being dragged. Code examples Supply a callback function to handle the dragStart event as an init option.     $( ".selector" ).dialog({        dragStart: function(event, ui) { ... }     }); Bind to the dragStart event by type: dialogdragstart.     $( ".selector" ).bind( "dialogdragstart", function(event, ui) {       ...     });
drag	dialogdrag	This event is triggered when the dialog is dragged. Code examples Supply a callback function to handle the drag event as an init option.     $( ".selector" ).dialog({        drag: function(event, ui) { ... }     }); Bind to the drag event by type: dialogdrag.     $( ".selector" ).bind( "dialogdrag", function(event, ui) {       ...     });
dragStop	dialogdragstop	This event is triggered after the dialog has been dragged. Code examples Supply a callback function to handle the dragStop event as an init option.     $( ".selector" ).dialog({        dragStop: function(event, ui) { ... }     }); Bind to the dragStop event by type: dialogdragstop.     $( ".selector" ).bind( "dialogdragstop", function(event, ui) {       ...     });
resizeStart	dialogresizestart	This event is triggered at the beginning of the dialog being resized. Code examples Supply a callback function to handle the resizeStart event as an init option.     $( ".selector" ).dialog({        resizeStart: function(event, ui) { ... }     }); Bind to the resizeStart event by type: dialogresizestart.     $( ".selector" ).bind( "dialogresizestart", function(event, ui) {       ...     });
resize	dialogresize	This event is triggered when the dialog is resized. demo Code examples Supply a callback function to handle the resize event as an init option.     $( ".selector" ).dialog({        resize: function(event, ui) { ... }     }); Bind to the resize event by type: dialogresize.     $( ".selector" ).bind( "dialogresize", function(event, ui) {       ...     });
resizeStop	dialogresizestop	This event is triggered after the dialog has been resized. Code examples Supply a callback function to handle the resizeStop event as an init option.     $( ".selector" ).dialog({        resizeStop: function(event, ui) { ... }     }); Bind to the resizeStop event by type: dialogresizestop.     $( ".selector" ).bind( "dialogresizestop", function(event, ui) {       ...     });
close	dialogclose	This event is triggered when the dialog is closed. Code examples Supply a callback function to handle the close event as an init option.     $( ".selector" ).dialog({        close: function(event, ui) { ... }     }); Bind to the close event by type: dialogclose.     $( ".selector" ).bind( "dialogclose", function(event, ui) {       ...     });

Methods:

Name	Usage	Description
destroy	.dialog( "destroy" )	Remove the dialog functionality completely. This will return the element back to its pre-init state.
disable	.dialog( "disable" )	Disable the dialog.
enable	.dialog( "enable" )	Enable the dialog.
option	.dialog( "option" , optionName , [value] )	Get or set any dialog option. If no value is specified, will act as a getter.
option	.dialog( "option" , options )	Set multiple dialog options at once by providing an options object.
widget	.dialog( "widget" )	Returns the .ui-dialog element.
close	.dialog( "close" )	Close the dialog.
isOpen	.dialog( "isOpen" )	Returns true if the dialog is currently open.
moveToTop	.dialog( "moveToTop" )	Move the dialog to the top of the dialogs stack.
open	.dialog( "open" )	Open the dialog.

Sample
Do you remember my post about JQGrid. I'm going to extend that sample making it popup base. I use JQuery Dialog as project popups. That project has two major parts and I'll make some changes in both of them:

• User List: I'll show the detail of user in new window(using jquery dialog)
• File List: I'll show delete confirmation using jquery dialog when user click delete button of the file list grid.

User List
Here is the user-list.jsp code:

<script type="text/javascript">
    function setFormAction(action) {
        document.getElementById("userForm").action = action;
    }
    function setUserId(id) {
        document.getElementById("userId").value = id;
    }
    function deleteAll() {
        if (confirm('Do you want to delete the selected rows?')) {
            setFormAction('<spring:url value="/user/delete.html"/>');
            return true;
        } else {
            return false;
        }
    }
    $(function() {
        $("#dialog").dialog({ autoOpen: false,
            resizable:true,
            draggable:true,
            show: "blind",
            hide: "explode",
            position: 'center',
            modal: true,
            closeOnEscape: true,
            buttons:[{text:"back", click : function() {
                $(this).dialog("close");
            }}]
        });
    });
    function showDialog(userid) {
        $("#userview").load("/user/view.html", {'user.id':userid});
        $("#dialog").dialog("open");
    }
</script>
<div id="dialog" title="User View"><div id="userview"></div></div>
<form:form id="userForm">
    <form:hidden path="user.id" id="userId"/>
    <table>
        <tr>
            <td>
                <label for="name">name</label>
            </td>
            <td>
                <form:input path="user.name" id="name"/>
            </td>
        </tr>
    </table>
    <input type="submit" value="search" onclick="setFormAction('<spring:url value="/user/list.html"/>')"/>
    <table>
        <tr>
            <th></th>
            <th>name</th>
            <th>username</th>
            <th></th>
        </tr>
        <c:forEach items="${userList}" var="user">
            <tr>
                <td>
                    <security:authorize access="hasRole('administrator')">
                        <input type="checkbox" name="ids" value="${user.id}"/>
                    </security:authorize>
                </td>
                <td>${user.name}</td>
                <td>${user.username}</td>
                <td>
                    <security:authorize access="hasRole('administrator')">
                        <input type="submit" value="edit"
                               onclick="setUserId(${user.id}); setFormAction('<spring:url value="/user/edit.html"/>');"/>
                    </security:authorize>
                    <input type="button" value="view"
                           onclick="showDialog(${user.id});"/>
                </td>
            </tr>
        </c:forEach>
    </table>
...
</form:form>

As you see, I should prepare a div to display my content(the blue line). But my content is not a fix content. I should load it dynamically whenever the view button is clicked via ajax. So firstly I create the dialog but do not display it(the red lines). Then I will call showDialog method in view button click(the green lines). In this method I load the user detail in 'userview' div then I show the dialog.

File List
Here is the file-list.jsp code:

...
<script type="text/javascript">
    function folder(cellValue, opts, rowObject) {
        if (!rowObject.file) {
            return "<div class='ui-state-default'><span class='ui-icon ui-icon-folder-collapsed'></span></div>";
        }
        return "<div></div>";
    }
    function edit(cellValue, opts, rowObject) {
        return "<input type='submit' value='edit' onclick='setFileId(" + rowObject.id + "); setFormAction(\"<spring:url value="/file/edit.html"/>\");'/>";
    }

    function setFormAction(action) {
        document.getElementById("fileForm").action = action;
    }

    function setFileId(id) {
        $("#fileId").val(id);
    }

    function setFolderId(id) {
        $("#folderId").val(id);
    }

    $(function() {
        $("#deleteConfirmDlg").dialog({ autoOpen: false,
            resizable:true,
            draggable:true,
            show: "blind",
            hide: "explode",
            position: 'center',
            modal: true,
            closeOnEscape: true,
            buttons:[{text:"cancel", click : function() {
                $(this).dialog("close");
            }}, {text:"ok", click:function() {
                var selectedRowIds = $("#fileGrid").getGridParam("selarrrow");
                var params = "";
                for (var i = 0; selectedRowIds[i]; i++) {
                    params += "ids=" + selectedRowIds[i] + "&";
                }
                $.ajax({
                    type: 'POST',
                    url: '<spring:url value="/file/delete.html"/>',
                    data: params,
                    success: function(msg) {
                        if (msg != '') {
                            alert(msg);
                        } else {
                            $("#deleteConfirmDlg").dialog("close");
                            $("#fileGrid").trigger("reloadGrid");
                        }
                    }
                });
            }}]
        });

        $("#deleteNoRowDlg").dialog({ autoOpen: false,
            dialogClass: 'alert',
            resizable:true,
            draggable:true,
            show: "blind",
            hide: "explode",
            position: 'center',
            modal: true,
            closeOnEscape: true,
            buttons:[{text:"ok", click : function() {
                $(this).dialog("close");
            }}]
        });

        $("#fileGrid").jqGrid({
            url:'${listUrl}',
            datatype:'json',
            contentType:'contentType:"application/json; charset=utf-8"',
            jsonReader:{repeatitems: false,id:"id"},
            direction:'ltr',
            width:'500',
            colNames:['','name', 'file','edit'],
            colModel:[{sortable:false, width:'20', formatter:folder},{name:'name',sortable:true},{name:'file',hidden:true},{align:'center', sortable:false, width:'50',formatter:edit}],
            rowNum:10,
            rowList:[10,20,30],
            pager:'#filePager',
            sortname:'id',
            viewrecords:true,
            multiselect:true,
            multiboxonly:true,
            sortorder:'desc',
            prmNames:{rows:'pagination.rowSizePerPage', page:'pagination.currentPage', sort:'pagination.sortIndex', order:'pagination.sortOrder'},
            caption:'File List',
            recordtext:'View {0} - {1} of {2}',
            emptyrecords:'No Records',
            loadtext:'Loading ...',
            pgtext:'Page {0} Of {1}',
            ondblClickRow: function(rowid) {
                var row = $("#fileGrid").getRowData(rowid);
                if (row.file == 'true') {
                    setFormAction('<spring:url value="/file/download.html"/>');
                    setFileId(rowid);
                    $("#fileForm").submit();
                } else {
                    setFormAction('<spring:url value="/file/list.html"/>');
                    setFolderId(rowid);
                    $("#fileForm").submit();
                }
            }
        });
        $("#fileGrid").jqGrid('navGrid', '#filePager', {search:false, edit:false, add:false, del:false}).navButtonAdd("#filePager", {
            caption:'',
            buttonicon: "ui-icon-plus",
            onClickButton:function() {
                setFormAction('<spring:url value="/file/add.html"/>');
                $("#fileForm").submit();
            },
            position:"first", title:'add'}).navButtonAdd("#filePager", {
            caption:'',
            buttonicon: "ui-icon-trash",
            onClickButton:function() {
                deleteSelectedRows();
            },
            position:"first", title:'delete selected rows'});
    });
    function deleteSelectedRows() {
        var selectedRowIds = $("#fileGrid").getGridParam("selarrrow");
        if (selectedRowIds.length > 0) {
            $("#deleteConfirmDlg").dialog("open");
        } else {
            $("#deleteNoRowDlg").dialog("open");
        }
    }
</script>
<div id="deleteConfirmDlg" title="Delete Confirmation">Are you sure to delete the selected rows?</div>
<div id="deleteNoRowDlg" title="No Rows Selected">you should select some rows</div>
<form:form id="fileForm">
...
</form:form>

Here we have 2 dialogs. One for delete confirmation other for no row selection alert. So I should prepare 2 divs for them(the green lines). Then I should initiate them(the blue lines). I should display them when the delete button is clicked(the red lines). Here I call the deleteSelectedRows method. In this method I check if any row is selected or not. If selected I should display the 'deleteConfirmDlg' dialog otherwise I should dislplay 'deleteNoRowDlg' dialog.

Source Code:
It's the time to download the source code and try it yourselves. The application needed jar files are the same as previous post example. So you can copy all of them to here: [app-root]/lib/
The application database script is available in [app-root]/db/filerepository.sql. you can restore it in your mysql server. the connection datasource properties is in [app-root]/src/database.properites. And after you deploy the project home page will be: http://localhost:8080/home/view.html
the admin user specification is:
username: administrator
password: 123456
you can use it to log in for the first time.

all rights reserved by Mostafa Rastgar and Programmer Assistant weblog