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
Rating
126

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...