JQuery.AddToList

Advanced Example

A advanced demo of the AddToList Plugin. View the page source to see how the custom event hooks work.

Code Used

Javascript & Styling

<script type="text/javascript" src="/js/jquery.1.2.6.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery.addtolist.1.0.0.js"></script>
<script type="text/javascript">
<!--
$(function() {
	$('select.advanced').addToList({
		form: '#sampleForm',
		dataHandler: function(data) {
			alert(data.other);
			return {
				value: data.value,
				label: data.label
			};
		}
	});
	
	$('.close').click(function() {
		if($('select.advanced[@form-open=true]').size() == 1) {
			$('select.advanced').trigger('form-cancel');
			alert('customised form-close handler clicked');
		} else {
			alert('customised form-close handler clicked, however there was no form to close');
		}
	});
	
	$('.new').click(function() {
		
		$('select.advanced').trigger('form-open');
	});
	
	$('select.advanced').bind('form-open', function() {
		alert('trigger: form-open');
	}).bind('form-success', function() {
		alert('form succesfully submitted!');
	}).bind('form-success-inserted', function() {
		alert('form succesfully submitted + a new item has been added & selected');
	});
});
-->
</script>
<style type="text/css">
select.advanced {
width: 300px;
}
#sampleForm {
position: absolute;
background: #FFF;
border: 1px outset;
padding: 5px;
}
label {
display: block;
}
</style>

HTML Code

<div>
	<select class="advanced">
		<option value=""></option>
		<option value="-1">New Item</option>
		<?php
		foreach($list as $item) {
			echo '<option value="'.$item->value.'">'.$item->label.'</option>';
		}
		?>
	</select>
	
	<div>
	<button class="new">New</button>
	<button class="close">Close</button>
	</div>
	
	<select class="advanced">
		<option value=""></option>
		<option value="-1">New Item</option>
		<?php
		foreach($list as $item) {
			echo '<option value="'.$item->value.'">'.$item->label.'</option>';
		}
		?>
	</select>
</div>

<div id="sampleForm">
	<form method="get" action="process.php">
	<div>
	<input type="hidden" name="save_to" value="advanced.data" />
	<table>
		<tr>
			<td>Value</td>
			<td><input type="text" name="value" /></td>
		</tr>
		<tr>
			<td>Label</td>
			<td><input type="text" name="label" /></td>
		</tr>
		<tr>
			<td>Other Field</td>
			<td>
				<label><input type="radio" name="other" value="true" checked="checked" />True</label>
				<label><input type="radio" name="other" value="false" />False</label>
			</td>
		</tr>
	</table>
	<input type="submit" value="Save" />
	<input type="button" value="Close" class="close" />
	</div>
	</form>
</div>

Saved Raw Data (Serialized PHP)

array(9) {
  [0]=>
  object(stdClass)#1 (3) {
    ["value"]=>
    string(4) "vghg"
    ["label"]=>
    string(5) "oijl9"
    ["other"]=>
    string(4) "true"
  }
  [1]=>
  object(stdClass)#2 (3) {
    ["value"]=>
    string(4) "vghg"
    ["label"]=>
    string(5) "oijl9"
    ["other"]=>
    string(4) "true"
  }
  [2]=>
  object(stdClass)#3 (3) {
    ["value"]=>
    string(0) ""
    ["label"]=>
    string(0) ""
    ["other"]=>
    string(5) "false"
  }
  [3]=>
  object(stdClass)#4 (3) {
    ["value"]=>
    string(4) "dffe"
    ["label"]=>
    string(4) "rerg"
    ["other"]=>
    string(4) "true"
  }
  [4]=>
  object(stdClass)#5 (3) {
    ["value"]=>
    string(3) "tes"
    ["label"]=>
    string(3) "tes"
    ["other"]=>
    string(4) "true"
  }
  [5]=>
  object(stdClass)#6 (3) {
    ["value"]=>
    string(3) "tes"
    ["label"]=>
    string(3) "tes"
    ["other"]=>
    string(4) "true"
  }
  [6]=>
  object(stdClass)#7 (3) {
    ["value"]=>
    string(4) "tes1"
    ["label"]=>
    string(4) "tes2"
    ["other"]=>
    string(4) "true"
  }
  [7]=>
  object(stdClass)#8 (3) {
    ["value"]=>
    string(5) "88798"
    ["label"]=>
    string(13) "9879987987987"
    ["other"]=>
    string(4) "true"
  }
  [8]=>
  object(stdClass)#9 (3) {
    ["value"]=>
    string(0) ""
    ["label"]=>
    string(0) ""
    ["other"]=>
    string(4) "true"
  }
}

Back to AddToList