Call Dynamic JS Functions from Dialog in XPages

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	
	<!-- DIV - to store our function Name and arguments to be triggered after Dialog close -->
	<div id="dlgArg" style="display:none"></div>
	
	<!-- ScriptBlock - Functions to be triggered -->
	<xp:scriptBlock id="scriptBlock1" type="text/javascript">
		<xp:this.value><![CDATA[// Generic Function to call out dynamic functions
function functionTrigger (func){
	window[func](arguments[1]);
}

// function 1 - will be called after dialog hide
function calledFunc_showComment(arg1){
    // Do stuff here
    alert("functionName:calledFunc_showComment > arg1:" + arg1);
}]]></xp:this.value>
	</xp:scriptBlock>

	<xp:br></xp:br>
	
	<xp:button value="Open Dialog" id="button1">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[// Save local function Name and arguments
dojo.attr("dlgArg", "functionName", "calledFunc_showComment");

// Optional - Pass to dialog function arguments before opening it.
// dojo.attr("dlgArg", "arg1", "ferhat");
// dojo.attr("dlgArg", "arg2", "bulut");

// Open Dialog
XSP.openDialog("#{id:dialogTest}")]]></xp:this.script>
		</xp:eventHandler>
	</xp:button>
	<xp:br></xp:br>
	<xe:dialog id="dialogTest" title="Comment" style="width:350px">
		<xe:this.onHide><![CDATA[// Trigger function after Dialog Hide
// Function Name is coming from dlgArg node.
// Input Param is coming from Dialog node.
functionTrigger(dojo.attr("dlgArg", "functionName"), dojo.attr("#{id:dialogTest}", "userComment"));]]></xe:this.onHide>

		<xp:panel style="padding:2px;">
			<xp:inputTextarea id="inputUserComment"
				style="width:99%;height:150px">
			</xp:inputTextarea>
			<xe:dialogButtonBar id="dialogButtonBar">
				<xp:button value="Save Comment" id="btnOK">
					<xp:eventHandler event="onclick" submit="false">
						<xp:this.script><![CDATA[// Save information which entered from Dialog.
dojo.attr("#{id:dialogTest}", "userComment", dojo.byId("#{id:inputUserComment}").value);

/*
alert("functionName:" + dojo.attr("dlgArg", "functionName"));
alert("arg1:" + dojo.attr("dlgArg", "arg1"));
alert("arg2:" + dojo.attr("dlgArg", "arg2"));

functionTrigger(dojo.attr("dlgArg", "functionName"), dojo.attr("dlgArg", "arg1"), dojo.attr("dlgArg", "arg2"));
*/

XSP.closeDialog("#{id:dialogTest}");]]></xp:this.script>
					</xp:eventHandler>
				</xp:button>
				<xp:button value="Close" id="btnClose">
					<xp:eventHandler event="onclick" submit="false">
						<xp:this.script><![CDATA[XSP.closeDialog("#{id:dialogTest}");]]></xp:this.script>
					</xp:eventHandler>
				</xp:button>
			</xe:dialogButtonBar>
		</xp:panel>
	</xe:dialog>
</xp:view>





This XPages design element includes DIV, Script Block, Dialog objects.

I created this sample to use Common Dialog Custom Control object to use it for different operations in different XPages.

DIV -> Used to store dynamic function details using dojo.attr
Script Bllock -> Includes functions will be called and our main function to trigger dynamic functions - triggerFunction-
Dialog -> Sample dialog. Getting comment from the user. After Dialog Close/Hide operation, Dialog calls our dynamic function.

Ferhat BULUT
BestCoder.NET for Personal Blog
BlackberryTool.Com for Blackberry Mobile Applications

XPages
Ferhat BULUT
December 31, 2011 7:34 AM
Rating
858

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.



No comments yetLogin first to comment...