Link JavaScript & Setup Config

Right before link Indira.js you need to define variable with name indiraJsConfig, and Object value, see example below.

Read more about config here: Config Object.

Example:

<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>

<script type="text/javascript">
	var indiraJsConfig = {
		loader: 'Loading...',
		defaultLoaderContainer: false,
		defaultOutputElementId: 'inner',
		defaultPostCaching: false,
	};
</script>
<script src="http://youydomain.com/scripts/indira.min.js"
type="text/javascript"></script>
<script src="http://youydomain.com/scripts/vendor/jquery.history.js"
type="text/javascript"></script>

AJAXify

To easily AJAXify your links just add to them data-ajaxify="true" or start theirs ID from go_to_.

Find out more about data attributes.

Example:

<input type="text" id="my_demo_input" />
<a 	id="go_to_some_page" 
	href="http://a.com/some_page.html"
	data-out="quick_view_box"
	data-prevent-follow="true"
	data-load="quick_view_box"
	data-post="{"value": encodeURI($('#my_demo_input').val()) }"
	data-caching="true"
>Some Page</a>
<div id="quick_view_box">
	AJAX request response will be placed here
</div>

Scripts

In downloaded archive you will find next files:

• Indira.min.js - Packed and minified version in Indira.js
• Indira.debug.js - This version of Indira.js you may found useful on development stage. In console you will see all logs and states about any function or event. This version we use on website, open JS-console to see what's going on now
• Indira.js - Standart version

Caching

JS Caching in Indira.js is beautiful. If user going back or to main page of your website it happens in miliseconds, it happens just now! Caching even handle all your filled inputs, and all unsaved changes makes by user on previous pages. By default it's turned on for all your GET-requests, and for POST on your demand.

Caching is not handled by DOM, - that means, - once user goes to next page, the previous one is saved into JS Object and removed from DOM. But you still have access to cached elements and you can change it's content on the fly. This is very useful when user editing something on one page and have to see result on previous. For example we have a table of blog posts and we create new one, after we go back we need to see new row with newly created blog post.

Infinite Scroll

Easily create infinite scroll table using data-scroll-load="true" and data-scroll-callback="..." attribute. After user scrolls to bottom for element with this data-scroll-load="true" attribute Indira.js will run code from data-scroll-callback attribute, please check out example below:

Add new, delete and edit rows content.

Code:

<button 
  class="btn btn-sm btn-default disabled" 
  disabled="disabled" 
  id="loading_element">
    <i class="icon icon-lemon icon-large"></i>
</button>
<button 
  data-ajaxify="true" 
  data-link="/tools/demo_scrolling" 
  data-load="loading_element" 
  data-out="scrolling_container" 
  data-post="{..JSON..}" 
  data-prevent-follow="true">
    Add row
</button>
<button 
  data-ajaxify="true" 
  data-link="/tools/demo_scrolling" 
  data-load="loading_element" 
  data-out="scrolling_container" 
  data-post="{..JSON..}" 
  data-prevent-follow="true">
    Prepend row
</button>

<div id="scrolling_container">
  <table 
    id="scrolling_table" 
    data-scroll-load="true" 
    data-scroll-callback="$("#ajax_load_more_button").trigger("click")">
    <thead>
      <tr>
        <th>
          ...
        </th>
      </tr>
    </thead>
    <tbody id="scrolling_table_tbody">
      <tr id="scrolling_table_tbody_tr_1">
        ...
      </tr>
      //LOAD MORE ROWS BUTTON
      <tr id="load_scrolling_table_tbody">
       <td colspan="100%">
        <button 
          id="ajax_load_more_button" 
          data-link="/tools/demo_scrolling?page=32" 
          data-post="{..JSON..}" 
          data-prevent-follow="true" 
          data-append="true" 
          data-out="scrolling_table_tbody" 
          data-remove="load_scrolling_table_tbody" 
          data-caching="false">
            Show more rows
        </button>
       </td>
      </tr>
    </tbody>
  </table>
</div>