cayasso · June 13, 2012 21:13
diff --git a/jsfunction.html b/jsfunction.html
 <html>

 <head>
 <script>

 // Assuming this is the namespace root for myatc
 var myatc = {};

 // then somewhere global
 myatc.saveCar = function () {
 	// call the jsFunction
 	jsfMyAtcSaveCar();
 }

 // then somewhere global
 myatc.saveSearch = function (e, listing) {

       // first argument is the event and second is the listing object passed

 	// call the jsFunction
 	jsfMyAtcSaveSearch();
 }

 myatc.carAdded = function () {
 	// code to anounce that car was added
 	alert('a new car was just added, please do what you need');
 }

 myatc.searchAdded = function () {
 	// code to anounce that search was added
 	alert('a new search was just added, please do what you need');
 }

 // on document ready
 $(function(){

 	// Bind to the DOM the global execute custom event
 	$(document).on('execute', function (e, method) {
 		
 		// prepate arguments to pass, just get the 3rd and ahead arguments
 		// we discard the second argument because we dont need it
 		var args = Array.prototype.slice.call(arguments, 2);

 		// check to see if method is valid function   
 		if (typeof myatc[method] === 'function') {

 			// Call the myatc coresponding event passing the event 
 			// and arguments, we need to concatenate the event back as first argument
 			myatc[method].apply(this, [e].concact(args));
 		}
 	});

 });

 </script>

 </head>

 <body>

 <!-- THE HTML -->

 <!-- Assuming this is the user action link to save the car -->
 <a href="#" class="save-car">Save this car</a>

 <!-- Assuming this is the user action link to save the search -->
 <a href="#" class="save-search">Save this search</a>

 <!-- This is the jsFunction for saving a car -->
 <a4j:jsFunction name="jsfMyAtcSaveCar" reRender="savedCars" onComplete="myatc.carAdded"> 

 <!-- This is the jsFunction for saving a search -->
 <a4j:jsFunction name="jsfMyAtcSaveSearch" reRender="savedCars" onComplete="myatc.carAdded"> 

 <div id="savedCars">
 <!-- This will be re-rendered after jsFunction finish its thing -->
 </div>

 <div id="savedSearches">
 <!-- This will be re-rendered after jsFunction finish its thing -->
 </div>

 <script>

 // Register click event
 $('.save-car').on('click', function () {
 	// Here we trigger the custom event save car
 	$(document).trigger('execute', 'saveCar');
 });

 $('.save-search').on('click', function () {
 	// Here we trigger the custom event save search
 	$(document).trigger('execute', ['saveSearch', { /* listing object */} ]);
 });

 </script>
 </body>

 </html>
	<html>

	<head>
	<script>

	// Assuming this is the namespace root for myatc
	var myatc = {};

	// then somewhere global
	myatc.saveCar = function () {
	// call the jsFunction
	jsfMyAtcSaveCar();
	}

	// then somewhere global
	myatc.saveSearch = function (e, listing) {

	// first argument is the event and second is the listing object passed

	// call the jsFunction
	jsfMyAtcSaveSearch();
	}

	myatc.carAdded = function () {
	// code to anounce that car was added
	alert('a new car was just added, please do what you need');
	}

	myatc.searchAdded = function () {
	// code to anounce that search was added
	alert('a new search was just added, please do what you need');
	}

	// on document ready
	$(function(){

	// Bind to the DOM the global execute custom event
	$(document).on('execute', function (e, method) {

	// prepate arguments to pass, just get the 3rd and ahead arguments
	// we discard the second argument because we dont need it
	var args = Array.prototype.slice.call(arguments, 2);

	// check to see if method is valid function
	if (typeof myatc[method] === 'function') {

	// Call the myatc coresponding event passing the event
	// and arguments, we need to concatenate the event back as first argument
	myatc[method].apply(this, [e].concact(args));
	}
	});

	});

	</script>

	</head>

	<body>

	<!-- THE HTML -->

	<!-- Assuming this is the user action link to save the car -->
	<a href="#" class="save-car">Save this car</a>

	<!-- Assuming this is the user action link to save the search -->
	<a href="#" class="save-search">Save this search</a>

	<!-- This is the jsFunction for saving a car -->
	<a4j:jsFunction name="jsfMyAtcSaveCar" reRender="savedCars" onComplete="myatc.carAdded">

	<!-- This is the jsFunction for saving a search -->
	<a4j:jsFunction name="jsfMyAtcSaveSearch" reRender="savedCars" onComplete="myatc.carAdded">

	<div id="savedCars">
	<!-- This will be re-rendered after jsFunction finish its thing -->
	</div>

	<div id="savedSearches">
	<!-- This will be re-rendered after jsFunction finish its thing -->
	</div>

	<script>

	// Register click event
	$('.save-car').on('click', function () {
	// Here we trigger the custom event save car
	$(document).trigger('execute', 'saveCar');
	});

	$('.save-search').on('click', function () {
	// Here we trigger the custom event save search
	$(document).trigger('execute', ['saveSearch', { /* listing object */} ]);
	});

	</script>
	</body>

	</html>