tepie/simple-eventchain-demo.html

## simple-eventchain-demo.html
<!doctype html>

<html>
<head>
<title>simple-eventchain-demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<button type="button" data-demo-action="start">Start Demo</button>

<div id="req-01-ui">
</div>

<form name="get-details-req-01" action="get-details-req.json">
	<input type="hidden" name="key" value='' />
</form>

<form name="set-details-req-01" action="set-details-req.json">
	<input type="hidden" name="key" value='' />
</form>


<script type="text/javascript">

var globalEventAttachedTo = "body";

$(document).ready(function (e) {


	$(globalEventAttachedTo).on("simple-eventchain-set-01",handleEventSet01);
	$(globalEventAttachedTo).on("simple-eventchain-get-01",handleEventGet01);
	$(globalEventAttachedTo).on("simple-eventchain-ui-01",handleEventUI01);
	$(globalEventAttachedTo).on("simple-eventchain-done",handleSimpleEventchainDone);

	$('button[data-demo-action="start"]').on("click",function(e){
		//$.blockUI();
		var event = jQuery.Event( "simple-eventchain-set-01" );

		event.fields = {};
		event.fields["key"] = "01";

		event.eventchain = [];
		event.eventchain.push();

		var getEvent = jQuery.Event("simple-eventchain-get-01");
		getEvent.fields = {};
		getEvent.fields["key"] = "01";

		event.eventchain.push(getEvent);

		event.eventchain.push(jQuery.Event("simple-eventchain-ui-01"));
		event.eventchain.push(jQuery.Event("simple-eventchain-done"));

		$(globalEventAttachedTo).trigger(event);
	});


});

var handleEventSet01 = function(event){
	var setForm = null;
	setForm = $('form[name="set-details-req-01"]');
	setForm.children('input[name="key"]').val(event.fields.key);

	$.ajax({
		url: setForm.attr('action'),
		dataType: 'json',
		data: setForm.serialize(),
		type: "GET",
		beforeSend : function( jqXHR, textStatus ){
		},
		complete : function( jqXHR, textStatus ){
		},
		success : function (responseText){
				if(event.eventchain){
					var nextEvent = event.eventchain.shift();
					if(event.eventchain.length > 0){
						nextEvent.eventchain = event.eventchain;
					}
					$(globalEventAttachedTo).trigger(nextEvent);
				}
		},
		error: function (responseText, errorThrown){
			handleIfErrorAsyncReply(responseText, errorThrown);
		}
	});
};

var handleEventGet01 = function(event){
	var getForm = null;
	getForm = $('form[name="get-details-req-01"]');
	getForm.children('input[name="key"]').val(event.fields.key);

	$.ajax({
		url: getForm.attr('action'),
		dataType: 'json',
		data: getForm.serialize(),
		type: "GET",
		beforeSend : function( jqXHR, textStatus ){
		},
		complete : function( jqXHR, textStatus ){
		},
		success : function (responseText){

			window["data-01"] = responseText;

			if(event.eventchain){
				var nextEvent = event.eventchain.shift();
				if(event.eventchain.length > 0){
					nextEvent.eventchain = event.eventchain;
				}
				$(globalEventAttachedTo).trigger(nextEvent);
			}
		},
		error: function (responseText, errorThrown){
			handleIfErrorAsyncReply(responseText, errorThrown);
		}
	});
};

var handleEventUI01 = function(event){
	$("#req-01-ui").text(window["data-01"].key);

	if(event.eventchain){
		var nextEvent = event.eventchain.shift();
		if(event.eventchain.length > 0){
			nextEvent.eventchain = event.eventchain;
		}
		$(globalEventAttachedTo).trigger(nextEvent);
	}
};

var handleIfErrorAsyncReply = function(event){

	if(event.eventchain){
		var nextEvent = event.eventchain.shift();
		if(event.eventchain.length > 0){
			nextEvent.eventchain = event.eventchain;
		}
		$(globalEventAttachedTo).trigger(nextEvent);
	}

};

var handleSimpleEventchainDone = function(event){
	if(event.eventchain){
		var nextEvent = event.eventchain.shift();
		if(event.eventchain.length > 0){
			nextEvent.eventchain = event.eventchain;
		}
		$(globalEventAttachedTo).trigger(nextEvent);
	} else {
		if(event.error && event.errorTo){
			event.error.prependTo(event.errorTo);
		} else if(window["pageLoadError"]){
			var errorTo = $("body");
			window["pageLoadError"].prependTo(errorTo);
			window["pageLoadError"] = null;
		}
	}
};

</script>
</body>
</html>
	<!doctype html>

	<html>
	<head>
	<title>simple-eventchain-demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	</head>
	<body>

	<button type="button" data-demo-action="start">Start Demo</button>

	<div id="req-01-ui">
	</div>

	<form name="get-details-req-01" action="get-details-req.json">
	<input type="hidden" name="key" value='' />
	</form>

	<form name="set-details-req-01" action="set-details-req.json">
	<input type="hidden" name="key" value='' />
	</form>


	<script type="text/javascript">

	var globalEventAttachedTo = "body";

	$(document).ready(function (e) {


	$(globalEventAttachedTo).on("simple-eventchain-set-01",handleEventSet01);
	$(globalEventAttachedTo).on("simple-eventchain-get-01",handleEventGet01);
	$(globalEventAttachedTo).on("simple-eventchain-ui-01",handleEventUI01);
	$(globalEventAttachedTo).on("simple-eventchain-done",handleSimpleEventchainDone);

	$('button[data-demo-action="start"]').on("click",function(e){
	//$.blockUI();
	var event = jQuery.Event( "simple-eventchain-set-01" );

	event.fields = {};
	event.fields["key"] = "01";

	event.eventchain = [];
	event.eventchain.push();

	var getEvent = jQuery.Event("simple-eventchain-get-01");
	getEvent.fields = {};
	getEvent.fields["key"] = "01";

	event.eventchain.push(getEvent);

	event.eventchain.push(jQuery.Event("simple-eventchain-ui-01"));
	event.eventchain.push(jQuery.Event("simple-eventchain-done"));

	$(globalEventAttachedTo).trigger(event);
	});


	});

	var handleEventSet01 = function(event){
	var setForm = null;
	setForm = $('form[name="set-details-req-01"]');
	setForm.children('input[name="key"]').val(event.fields.key);

	$.ajax({
	url: setForm.attr('action'),
	dataType: 'json',
	data: setForm.serialize(),
	type: "GET",
	beforeSend : function( jqXHR, textStatus ){
	},
	complete : function( jqXHR, textStatus ){
	},
	success : function (responseText){
	if(event.eventchain){
	var nextEvent = event.eventchain.shift();
	if(event.eventchain.length > 0){
	nextEvent.eventchain = event.eventchain;
	}
	$(globalEventAttachedTo).trigger(nextEvent);
	}
	},
	error: function (responseText, errorThrown){
	handleIfErrorAsyncReply(responseText, errorThrown);
	}
	});
	};

	var handleEventGet01 = function(event){
	var getForm = null;
	getForm = $('form[name="get-details-req-01"]');
	getForm.children('input[name="key"]').val(event.fields.key);

	$.ajax({
	url: getForm.attr('action'),
	dataType: 'json',
	data: getForm.serialize(),
	type: "GET",
	beforeSend : function( jqXHR, textStatus ){
	},
	complete : function( jqXHR, textStatus ){
	},
	success : function (responseText){

	window["data-01"] = responseText;

	if(event.eventchain){
	var nextEvent = event.eventchain.shift();
	if(event.eventchain.length > 0){
	nextEvent.eventchain = event.eventchain;
	}
	$(globalEventAttachedTo).trigger(nextEvent);
	}
	},
	error: function (responseText, errorThrown){
	handleIfErrorAsyncReply(responseText, errorThrown);
	}
	});
	};

	var handleEventUI01 = function(event){
	$("#req-01-ui").text(window["data-01"].key);

	if(event.eventchain){
	var nextEvent = event.eventchain.shift();
	if(event.eventchain.length > 0){
	nextEvent.eventchain = event.eventchain;
	}
	$(globalEventAttachedTo).trigger(nextEvent);
	}
	};

	var handleIfErrorAsyncReply = function(event){

	if(event.eventchain){
	var nextEvent = event.eventchain.shift();
	if(event.eventchain.length > 0){
	nextEvent.eventchain = event.eventchain;
	}
	$(globalEventAttachedTo).trigger(nextEvent);
	}

	};

	var handleSimpleEventchainDone = function(event){
	if(event.eventchain){
	var nextEvent = event.eventchain.shift();
	if(event.eventchain.length > 0){
	nextEvent.eventchain = event.eventchain;
	}
	$(globalEventAttachedTo).trigger(nextEvent);
	} else {
	if(event.error && event.errorTo){
	event.error.prependTo(event.errorTo);
	} else if(window["pageLoadError"]){
	var errorTo = $("body");
	window["pageLoadError"].prependTo(errorTo);
	window["pageLoadError"] = null;
	}
	}
	};

	</script>
	</body>
	</html>