Open Nested Dialog with PF Dialog FW

Recep February 17, 2014
2 people like this post

Dialog Framework does not support nested usage. But you can ensure by modifying primefaces.js after extract from Primefaces.jar (Open with winrar and /resources/primefaces/primefaces.js)
(This code examples for PF 4.0.8)

primefaces.js

 openDialog: function (cfg) {
            var dialogId = cfg.sourceComponentId + "_dlg";
            if (document.getElementById(dialogId)) {
                return
            }
            var dialogWidgetVar = cfg.sourceComponentId.replace(/:/g, "_") + "_dlgwidget",
                dialogDOM = $('<div id="' + dialogId + '" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-overlay-hidden" data-pfdlgcid="' + cfg.pfdlgcid + '" data-widgetvar="' + dialogWidgetVar + '"></div>').append('<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"><span class="ui-dialog-title"></span></div>');
            if (cfg.options.closable !== false) {
                dialogDOM.children(".ui-dialog-titlebar").append('<a class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all" href="#" role="button"><span class="ui-icon ui-icon-closethick"></span></a>')
            }
            dialogDOM.append('<div class="ui-dialog-content ui-widget-content" style="height: auto;"><iframe style="border:0 none" frameborder="0"/></div>');
            dialogDOM.appendTo(document.body);
            var dialogFrame = dialogDOM.find("iframe"),
                symbol = cfg.url.indexOf("?") === -1 ? "?" : "&",
                frameURL = cfg.url + symbol + "pfdlgcid=" + cfg.pfdlgcid,
                frameWidth = cfg.options.contentWidth || 640;
            dialogFrame.width(frameWidth);

	// Everything similar to here		
            dialogFrame.on("load", function () {
				 
                var $frame = $(this),
                titleElement = $frame.contents().find("title");
					
		var maxHeight = $(window).height(); // get max size
		var maxWidth = $(window).width(); // must not go out from screen	
					
		var minHeight= cfg.options.contentHeight || 0;  // developer sent option parameters
		var minWidth= cfg.options.contentWidth || 0;  // you can send more parameter in "options" HashMap
					
		var newHeight;
		var newWidth;
				
// here is "onload" function. In here dialog body size significant.

		if(minWidth < $(this).contents().find("body").width()){
				newWidth= $(this).contents().find("body").width();
		}else newWidth=minWidth;
// spesify the developer or dialog body size			
		if(minHeight < $(this).contents().find("body").height()){
				newHeight= $(this).contents().find("body").height();
		}else newHeight=minHeight;
					 
// And here... Inside dialog can be max 90 per 100 of parent dialog
// You can not set inside dialog bigger than parent. Because it is an iframe !
                rheight = Math.min((newHeight + 17), (maxHeight * 0.9));
		rwidth = Math.min((newWidth + 17), (maxWidth * 0.90));
// But if you choose p:dialog, you can do that.					
                if (!$frame.data("initialized")) {
                    PrimeFaces.cw("Dialog", dialogWidgetVar, {
                        id: dialogId,
                        position: "center",
                        sourceComponentId: cfg.sourceComponentId,
                        sourceWidget: cfg.sourceWidget,
                        onHide: function () {
                            this.jq.remove();
                            PF[dialogWidgetVar] = undefined;
                            window[dialogWidgetVar] = undefined
                        },
                        modal: cfg.options.modal,
                        resizable: cfg.options.resizable,
                        draggable: cfg.options.draggable,
                        width:$(this).width(rwidth),	 // set parameter here 
                        height:$(this).height(rheight)
                    })
                }
                if (titleElement.length > 0) {
                    PF(dialogWidgetVar).titlebar.children("span.ui-dialog-title").html(titleElement.text())
                }
                //var frameHeight = cfg.options.contentHeight || $frame.get(0).contentWindow.document.body.scrollHeight + 5; // do not use this setter
                //$frame.height(frameHeight);
                PF(dialogWidgetVar).show();
                dialogFrame.data("initialized", true)
            }).attr("src", frameURL)
        },



closeDialog: function (cfg) {
	// get last dialog div. In openDialog() function, 
        // PF add a DIV that its class "ui-dialog" and iframe end of html tree
	var dlg = $(parent.document.body).children("div.ui-dialog").last(), 
        dlgWidget = PF(dlg.data("widgetvar")),
        sourceWidget = dlgWidget.cfg.sourceWidget,
        sourceComponentId = dlgWidget.cfg.sourceComponentId,
        dialogReturnBehavior = null;
            if (sourceWidget && sourceWidget.cfg.behaviors) {
                dialogReturnBehavior = sourceWidget.cfg.behaviors.dialogReturn
            } else {
                if (sourceComponentId) {
                    var dialogReturnBehaviorStr = $(document.getElementById(sourceComponentId)).data("dialogreturn");
                    if (dialogReturnBehaviorStr) {
                        dialogReturnBehavior = eval("(function(){" + dialogReturnBehaviorStr + "})")
                    }
                }
         } if (dialogReturnBehavior) {
             var ext = {
                 params: [{
                      name: sourceComponentId + "_pfdlgcid",
                      value: cfg.pfdlgcid
                 }]
          };
          dialogReturnBehavior.call(this, null, ext)
        }
            dlgWidget.hide()
},

( 56992 )

  • 0
  • 487

Leave your comment