Load content on-demand via single event

In this demo form attached to popup not inited on startup
it will inited when popup will shown first time, i.e. on demand
init way here is an event's callback, which will init form
and autodetached, i.e. will called once

</> Source

<!DOCTYPE html>
<html>
<head>
	<title>Load content on-demand via single event</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		#myToolbar {
			margin: 10px;
		}
		#eLog {
			position: relative;
			width: auto;
			font-family: Roboto, Arial, Helvetica;
			font-size: 14px;
			color: #404040;
			margin: 170px 10px 10px 10px;
			padding: 2px;
		}
	</style>
	<script>

		var myToolbar;
		var myPop;
		var myForm;
		var eLog;
		var eId;

		function doOnLoad() {

			myToolbar = new dhtmlXToolbarObject({
				parent: "myToolbar",
				icons_path: "../common/imgs/",
				xml: "../common/toolbar.xml",
				onload: function() {
					myToolbar.setItemText("workbut", "Login Form");

					myPop = new dhtmlXPopup({ toolbar: myToolbar, id: "workbut" });

					// this event will init form on 1st popup show
					// and will detached automaticaly (i.e. will called once)
					eId = myPop.attachEvent("onShow", function(){

						myForm = myPop.attachForm([
							{type: "settings", position: "label-left", labelWidth: 110, inputWidth: 130},
							{type: "input", label: "Email Address", name: "email"},
							{type: "password", label: "Password", name: "pwd"},
							{type: "checkbox", label: "Remember me", checked: 1},
							{type: "button", value: "Proceed", offsetLeft: 149}
						]);
						myForm.attachEvent("onButtonClick", function(){
							myPop.hide();
						});

						myPop.detachEvent(eId);
					});

					// this event will not detached and will called every time to put focus on "email"
					myPop.attachEvent("onShow", function(){
						myForm.setFocusOnFirstActive();
					});
				}
			});

		}

	</script>
</head>
<body onload="doOnLoad()">
	<div id="myToolbar"></div>
	<div id="eLog">
		In this demo form attached to popup not inited on startup<br>
		it will inited when popup will shown first time, i.e. on demand<br>
		init way here is an event's callback, which will init form<br>
		and autodetached, i.e. will called once
	</div>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.