bennadel/code-1.htm

## code-1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Parent Window</title>

	<script type="text/javascript">

		function PopUp(){

			// Open the new window with ID selector.
			// Pass PopUpHandler() as the data handler
			// to which the popup will broadcast its'
			// data selection.
			window.open(
				"./pop_up.cfm?data_handler=PopUpHandler",
				"",
				"width=300,height=300"
				);

			void( 0 );
		}


		function PopUpHandler( strIDs ){
			var objIDList = document.forms[ 0 ].lst_id;

			// Set the ID list.
			objIDList.value = (
				objIDList.value +
				(objIDList.value.length > 0 ? "," : "" ) +
				strIDs
				);
		}

	</script>
</head>
<body>

	<form>

		<p>
			ID List:
		</p>

		<p>
			<input
				type="text"
				name="lst_id"
				value=""
				size="30"
				/>

			<a href="javascript:PopUp();">Find IDs</a>
		</p>

	</form>

</body>
</html>

## code-2.cfm
<!--- Kill extra output. --->
<cfsilent>

	<!---
		Param the URL and FORM variables. We are doing
		both as you never know where this value will be
		coming from. This value is the name of the
		Javascript method that will "handle" our data
		broadcast.
	--->
	<cfparam
		name="URL.data_handler"
		type="string"
		default=""
		/>

	<!--- Param the form using the URL. --->
	<cfparam
		name="FORM.data_handler"
		type="string"
		default="#URL.data_handler#"
		/>

</cfsilent>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Pop-Up Data Selector</title>

	<script type="text/javascript">

		<!---
			Check to see if we have a data callback handler
			to work with. If we do not, then alert the user
			that something is wrong so they don't waste their
			time doing stuff.
		--->
		<cfif Len( FORM.data_handler )>

			function SendData( objForm ){
				var strIDs = "";
				var i = 0;

				// Loop over the form fields to build the data.
				for (i = 0 ; i < objForm.girl_id.length ; i++){

					if (objForm.girl_id[ i ].checked){

						strIDs = (
							strIDs +
							(strIDs.length > 0 ? "," : "") +
							objForm.girl_id[ i ].value
							);

					}

				}


				// Try to pass the data back to caller.
				try {

					<cfoutput>
						window.opener.#FORM.data_handler#( strIDs );
					</cfoutput>


					// Close current window.
					window.close();

				} catch (objError){

					alert(
						"There was an error passing the\n" +
						"data back to the parent window"
						);

				}

			}

		<cfelse>

			<!---
				We have no data handler. Alert the user
				before they do anything.
			--->
			alert(
				"Something went wrong. No data handler\n" +
				"can be found. Please try closing and\n" +
				"opening this window again"
				);

		</cfif>

	</script>
</head>
<body>

	<cfoutput>

		<form>

			<!---
				Store the data handler in a hidden form
				field. This way, if the page refreshes
				(ie. pagination, search) then we will see
				have the proper handler.
			--->
			<input
				type="hidden"
				name="data_handler"
				value="#FORM.data_handler#"
				/>


			<label for="girl_1">
				<input
					type="checkbox"
					name="girl_id"
					id="girl_1"
					value="1"
					/>
				Sammantha
			</label>

			<label for="girl_2">
				<input
					type="checkbox"
					name="girl_id"
					id="girl_2"
					value="2"
					/>
				Alexa
			</label>

			<label for="girl_3">
				<input
					type="checkbox"
					name="girl_id"
					id="girl_3"
					value="3"
					/>
				Sarah
			</label>

			<input
				type="button"
				value="Use Selected Girls"
				onclick="SendData( this.form );"
				/>

		</form>

	</cfoutput>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<title>Parent Window</title>

	<script type="text/javascript">

	function PopUp(){

	// Open the new window with ID selector.
	// Pass PopUpHandler() as the data handler
	// to which the popup will broadcast its'
	// data selection.
	window.open(
	"./pop_up.cfm?data_handler=PopUpHandler",
	"",
	"width=300,height=300"
	);

	void( 0 );
	}


	function PopUpHandler( strIDs ){
	var objIDList = document.forms[ 0 ].lst_id;

	// Set the ID list.
	objIDList.value = (
	objIDList.value +
	(objIDList.value.length > 0 ? "," : "" ) +
	strIDs
	);
	}

	</script>
	</head>
	<body>

	<form>

	<p>
	ID List:
	</p>

	<p>
	<input
	type="text"
	name="lst_id"
	value=""
	size="30"
	/>

	<a href="javascript:PopUp();">Find IDs</a>
	</p>

	</form>

	</body>
	</html>
	<!--- Kill extra output. --->
	<cfsilent>

	<!---
	Param the URL and FORM variables. We are doing
	both as you never know where this value will be
	coming from. This value is the name of the
	Javascript method that will "handle" our data
	broadcast.
	--->
	<cfparam
	name="URL.data_handler"
	type="string"
	default=""
	/>

	<!--- Param the form using the URL. --->
	<cfparam
	name="FORM.data_handler"
	type="string"
	default="#URL.data_handler#"
	/>

	</cfsilent>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<title>Pop-Up Data Selector</title>

	<script type="text/javascript">

	<!---
	Check to see if we have a data callback handler
	to work with. If we do not, then alert the user
	that something is wrong so they don't waste their
	time doing stuff.
	--->
	<cfif Len( FORM.data_handler )>

	function SendData( objForm ){
	var strIDs = "";
	var i = 0;

	// Loop over the form fields to build the data.
	for (i = 0 ; i < objForm.girl_id.length ; i++){

	if (objForm.girl_id[ i ].checked){

	strIDs = (
	strIDs +
	(strIDs.length > 0 ? "," : "") +
	objForm.girl_id[ i ].value
	);

	}

	}


	// Try to pass the data back to caller.
	try {

	<cfoutput>
	window.opener.#FORM.data_handler#( strIDs );
	</cfoutput>


	// Close current window.
	window.close();

	} catch (objError){

	alert(
	"There was an error passing the\n" +
	"data back to the parent window"
	);

	}

	}

	<cfelse>

	<!---
	We have no data handler. Alert the user
	before they do anything.
	--->
	alert(
	"Something went wrong. No data handler\n" +
	"can be found. Please try closing and\n" +
	"opening this window again"
	);

	</cfif>

	</script>
	</head>
	<body>

	<cfoutput>

	<form>

	<!---
	Store the data handler in a hidden form
	field. This way, if the page refreshes
	(ie. pagination, search) then we will see
	have the proper handler.
	--->
	<input
	type="hidden"
	name="data_handler"
	value="#FORM.data_handler#"
	/>


	<label for="girl_1">
	<input
	type="checkbox"
	name="girl_id"
	id="girl_1"
	value="1"
	/>
	Sammantha
	</label>

	<label for="girl_2">
	<input
	type="checkbox"
	name="girl_id"
	id="girl_2"
	value="2"
	/>
	Alexa
	</label>

	<label for="girl_3">
	<input
	type="checkbox"
	name="girl_id"
	id="girl_3"
	value="3"
	/>
	Sarah
	</label>

	<input
	type="button"
	value="Use Selected Girls"
	onclick="SendData( this.form );"
	/>

	</form>

	</cfoutput>

	</body>
	</html>