Custom Events - Exercise

Contact Us or call 1-877-932-8228
Custom Events - Exercise

Custom Events

Duration: 20 to 30 minutes.
  1. We would like to add a check box capability to our form designer.
  2. The HTML is already in place, and we have changed the form element names.
  3. You will need to obtain the values for the new text fields in the dialog.
  4. Then fire a new custom event for adding a check box.
  5. Create a handler for the new event.
  6. Attach your handler to the dialog.

Solution:

jqy-custom-events/Solutions/formdesigner-custom-event.html
---- C O D E   O M I T T E D ----

<script>
$(document).ready(function() {
	var $dialog = $('#dialog');
	var $ui = $('#ui');
	$dialog.tbLabel = $dialog.find('[name=tbLabel]');
	$dialog.tbName = $dialog.find('[name=tbName]');
	// get the values associated with adding a check box
	$dialog.cbLabel = $dialog.find('[name=cbLabel]');
	$dialog.cbName = $dialog.find('[name=cbName]');
	$dialog.cbValue = $dialog.find('[name=cbValue]');
	
	$dialog.find('[name=addTB]').click(
		function(e) {
			$dialog.triggerHandler(
				"addTextBox",
				{
					label: $dialog.tbLabel.val(), // values from other elements
					name: $dialog.tbName.val()    // in the dialog
				}
			);
		}
	);
	// attach a click handler for the checkbox Add button
	$dialog.find('[name=addCB]').click(
		function(e) {
			$dialog.triggerHandler(
				"addCheckBox",
				{
					label: $dialog.cbLabel.val(), // values from other elements
					name: $dialog.cbName.val(),   // in the dialog
					value: $dialog.cbValue.val()
				}
			);
		}
	);

	// in the ui div
	$ui.addTextBox = function(e, data) {
		$ui.children('form').append($(
		      '<label>' + data.label + 
					'<input type="text" name="' + data.name + '"/></label><br />'));
	};
	$dialog.on(
		"addTextBox",     // event name we made up
		$ui.addTextBox	  // function in the ui
	);
	// define an addCheckBox function for ui
	$ui.addCheckBox = function(e, data) {
		$ui.children('form').append($(
		      '<label>' + data.label + 
					'<input type="checkbox" name="' + data.name + 
					'" value="' + data.value + '"/></label><br />'));
					alert(
		      '<label>' + data.label + 
					'<input type="checkbox" name="' + data.name + 
					'" value="' + data.value + '"/></label><br />');
	};
	// attach it as a handler for an addCheckBox event
	$dialog.on(
		"addCheckBox",     // event name we made up
		$ui.addCheckBox	  // function in the ui
	);
	
});
</script>

---- C O D E   O M I T T E D ----

You should be able to follow the new logic from the comments in the code.

Next