ajax-elements v0.1.9-development

Ajax elements

Make your links perform ajax call

• Set links behaviour:

<a href="/auth/logout" 
    data-method="POST" 
    data-callback="redirectHome">Logout</a>

<a href="/news" 
    data-method="GET" 
    data-params="sort=created_at&order=desc" 
    data-callback="updateElement(.status)|showMessage|log">Get News</a>

• Set elements selector and callbacks:

import {AjaxLinksSettings} from 'ajax-links';

AjaxLinksSettings.setSelector('.ajaxLink');
AjaxLinksSettings.setCallbacks({
    redirectHome() {
        location.href = '/';
    },
    
    updateElement(response, $elements) { // querySelectorAll used, you may wrap to jQuery
        $elements[0].innerHTML = response.status;
    },
    
    showMessage(response) {
        alert(response.message);
    },
    
    log(response) {
        console.log(response);
    }
});

Installation

yarn add ajax-elements or npm install ajax-elements --save

Documentation:

• Links:

  • href = URL
  • data-method = GET, POST (default), PUT, PATCH, DELETE, HEAD
  • data-params = sort=id&order=desc (key=value&key2=value2)
  • data-callbacks = "log|closeModal" callbacks names (can be piped with "|", and parametrized with selectors)

• Callbacks:

  • First argument is response
  • Other arguments are queried with document.querySelectorAll