data-attributes

Usage
data-attributes usage

Data-attributes used to control Indira.js behavior.

Attribute or Selector Acceptable Values Default Value Example Description
*[id] (any element) String starts with: ^="ajax_" 
<div data-link="..." id="ajax_posts">
	Posts
</div>
All elements which ID started with ajax_ will be automatically Ajaxified.
(anchor) a[id]

String starts with: ^="go_to_" 

<a 	href="..." 
	id="go_to_posts"
>
	Posts
</a>
All anchor elements which ID started with go_to_ will be automatically Ajaxified.
button[class]

String starts with: ^="ajax_" 

<button 
	data-link="..." 
	id="btn_id" 
	class="ajax_posts"
>Posts</button>
All button elements which CLASS started with ajax_ will be automatically Ajaxified.
*[data-axajify] true, false 
<div 	data-link="..." 
	data-ajaxify="true"
>Posts</div>
Binds click event on element.
*[data-load] string (element id) Same element as output element OR indiraJsConfig.loader if defined 
<div 	data-link="..." 
	data-load="super_logo"
>Posts</div>
Defines loader output element
*[data-caching] true, false true - for GET requests methods false - for POST requests methods OR indiraJsConfig. defaultPostCaching if defined 
<div 	data-link="..." 
	data-post="{.. Some JSON ..}" 
	data-caching="true"
>Posts</div>
Set JS-cache for this request
*[data-append] true, false, prepend false 
<div 	data-link="..." 
	data-append="prepend" 
	data-out="table"
>Posts</div>
Prepend or append AJAX response to element ID defined in data-out attribute
*[data-replace] true, false false 
<div 	data-link="..." 
	data-replace="prepend" 
	data-out="table"
>Posts</div>
Replace by AJAX response element ID, defined in data-out attribute
*[data-remove] string (Element ID), false false 
<div 	data-link="..." 
	data-remove="button_id" 
	data-out="table"
>Posts</div> 
<button id="button_id">
	Click here
</button>
Remove element by ID defined in data-remove attribute after AJAX request is successfully done
*[data-restore] true, false true 
<div 	data-link="..." 
	data-restore="false"
>Posts</div>
Restore element defined in data-load attribute after AJAX request is done
*[data-encode] true, false true 
<div 	data-link="..." 
	data-encode="false" 
	data-post="{.. Some JSON ..}"
>Posts</div>
Encode POST data defined in data-post attribute
*[data-callback] function as a string false 
<div 	data-link="..." 
	data-callback="functionName(a, b, c)" 
>Posts</div>
Callback function, triggers after AJAX request is successfully done
*[data-out] string (element ID) body OR indiraJsConfig. defaultOutputElementId if defined 
<div data-link="..." data-out="inner" >Posts</div>
Element ID to output AJAX request response
*[data-post] string, JSON '' 
<div 	data-link="..." 
	data-post="{index:value, index2:value2,.. }"
>Posts</div>
Data which will be send via POST method | Accessible via data | Example (php): $_POST['data']
*[data-message] string (text) null 
<div 	data-link="..." 
	data-message="Warning! Please confirm.." 
>Posts</div>
Confirmation message to send AJAX request | Text for alert() message | Shown before send AJAX request
*[href], *[data-link] string (url) 
<div 	data-ajaxify="true" 
	data-link="http://www.a.com/i.php"
>Posts</div>
URL for AJAX request
*[data-title] string (text) '' 
<a 	id="go_to_posts" 
	data-title="My Blog Posts"
>Posts</a>
Document.title which will be pushed via History API
*[data-file-field] string (element id) '' 
<input 	type="file" 
	id="upload_input" 
	name="pic" 
	onchange="$('#upload_button').trigger('click')">
<button 
	id="upload_button" 
	data-ajaxify="true" 
	data-link="http://a.com/upload.php" 
	data-out="gallery" 
	data-append="prepend"
	data-file-field="upload_input" 
	data-form-name="pic" 
	data-prevent-follow="true"
>Upload</button>
ID of input[type="file"] element | Used to send file upload via AJAX
*[data-form-name] string (name attribute of input[type="file"]) '' 
<input 	type="file" 
	id="upload_input" 
	name="pic" 
	onchange="$('#upload_button').trigger('click')">
<button 
	id="upload_button" 
	data-ajaxify="true" 
	data-link="http://a.com/upload.php" 
	data-out="gallery" 
	data-append="prepend"
	data-file-field="upload_input" 
	data-form-name="pic" 
	data-prevent-follow="true"
>Upload</button>
NAME attribute of input[type="file"] element | Used to send file upload via AJAX
*[data-prevent-follow] true, false false 
<a 	id="go_to_posts" 
	data-prevent-follow="true"
>Posts</a>
Prevent pushState into History API | Send AJAX request without changing URL (window.location.href)
*[data-scroll-load] true, false false 
<div data-scroll-load="true" 
data-scroll-callback="$('#load_more').trigger('click')"
><table>...</table></div>
Bind scroll event to Element with [data-scroll-load="true"] attribute, after user scrolled to bottom of element - trigger callback function defined in data-scroll-callback attribute
*[data-scroll-callback] true, false false 
<div data-scroll-load="true" 
data-scroll-callback="$('#load_more').trigger('click')"
><table>...</table></div>
Callback function which will be triggered after user scrolls to down of this element