Shortlist

Ajax Actions

All the action urls in shortlist can be called via ajax. If shortlist detects the call is being made via ajax it will return a json array of the result instead of redirecting the user.

Note: The following examples assume the use of jQuery as the js library in place. The same processes will work with any js library with basic syntax changes.

Setup

The first step is to attach your event handlers to your anchors. In these examples we've simply added a class of 'shortlist_action' to the anchors. For convenience we've also added a wrapper class of 'shortlist_action_container' to the surrounding markup.

<div class="shortlist_action_container">
   <a href="{add_url}" class="shortlist_action">+ to shortlist</a>
</div>

Then in our js :

$('a.shortlist_action').on('click',function(){
  parent = $(this).parent('.shortlist_action_container');

	$.ajax({
	  url: $(this).attr('href'),
	  success: function(data) {
	  // Do something with the result
	  verb = data['verb'];
	  total_items = data['total_items'];
	  // ..
	  }
	});
  // stop event propagation here
  return false;
});

When calling an action url the following values are returned (for use in the data array) :

type

The type of action just performed. ie - 'add', 'remove', 'cloned'

list_items

The update array of list items. This can be used to update any on page list views without refreshing the page or requiring another call. All the same variables as available in the :view loop are encoded in the list_items array

total_items

The total count of items in the updated list.

toggle_url

A new url to allow you to reverse the action just performed. ie. if you just added an item to the list, the toggle_url value will be the required url to remove that item from the list.

Note: If the action performed was a whole list clone, the return value will be a blank string

verb

English language verb to describe the action just performed. ie. added, removed or cloned