jquery-ajax-markup

This is a petite jQuery plugin that allows you to make ajax calls directly from HTML elements without writing any JavaScript. The idea came from the need to load and display data on a page in multiple places after the page was all loaded up. It's usage is inspired a bit by AngularJS, but obviously much simpler and lighter.

##Usage

To use simply add data-ajax-url="http://example.com/api" to any element. By default the response from the url will be inserted into the element as text.

###HTML data

If the expected response of the ajax call is HTML specify data-ajax-type="html". With this markup the contents of the div will be filled by the response of the url.

<div data-ajax-url="http://example.com/api/product" data-ajax-type="html"></div>

###JSON data

If the expected response of the ajax call is JSON then specify data-ajax-type="json". The properties of the JSON object will be accessible like ~property~. In this example the ~name~ and ~sku~ text will be replaced by the name and sku property of the returned JSON. This works in attribute values as well as inner text.

<div data-ajax-url="http://example.com/api/product" data-ajax-type="json" class="~sku~ active">
	~name~
</div>

Note that urls are only requested once even if multiple elements use the same one.