RESTInTag

A JavaScript plugin to ease the HTTP requests by making them work directly from the HTML tags. it was inspired by RestfulizerJs by Ifnot but with a different implementation.

Install

Simple Download

after downloading include them in your html file like this

<script src="path/to/js/restintag.vanilla.js"></script>

NPM

Install via this command

npm install --save restintag

then in your main javascript file do the following

// For vanilla version
var restintag = require("restintag").vanilla;
restintag(".test", {}, function(data) {
    console.log(data);
});

// For jQuery version
var jquery = require("jquery");
window.$ = window.jQuery = jquery;
var restintag = require("restintag").jquery;
jquery.fn.restintag = restintag;

$(".test").restintag({}, function(data) {
    console.log(data);
});

Usage

easy! just add the following attributes to your HTML tag:

data-method: the request type, GET, POST, PUT, etc.
data-target: the url to send/get the data
data-disabled: true to disable the tag until the request is done else just put false

example:

<button data-target="http://example.com/post/post-id/" data-method="DELETE" data-disabled="true">Delete Article</button>

or you can use the javascript apis, note the data attributes have the priority.

API

Vanilla

The zero dependency version, just add it to any project you have and it will work

restintag(selector: String, options: Object, successCallback: Function, errorCallback: Function): void

options are the following (the seen values are the default):

{
    parse: false, // if you have query string, it will add them to the request body
    target: null, // the url
    method: "GET", // the request method
    headers: {}, // the HTTP headers
    timeout: 0, // milliseconds to wait before cancelling the request, 0 means no timeout 
    data: {}, // request body specially for POST and PUT requests
    disable: true // to disable the clicking event until the request is finished
}

jQuery

after adding jQuery use the restintag() function to do the magic

$(".selector").restintag(options: Object, successCallback: Function, errorCallback: Function): jQuery

options are the following (the seen values are the default):

{
    parse: false, // if you have query string, it will add them to the request body
    target: null, // the url
    method: "GET", // the request method
    headers: {}, // the HTTP headers
    timeout: 0, // milliseconds to wait before cancelling the request, 0 means no timeout 
    data: {}, // request body specially for POST and PUT requests
    disable: true // to disable the clicking event until the request is finished
}

Browser Support

Both jQuery version and Vanilla version support the following browsers:

Chrome (Latest)
FireFox (Latest)
Edge (Latest)
IE (9+)
Opera (Latest)
Safari (Latest)
Vivaldi (Latest)
Epiphany (Latest)

License

This project is under the MIT license.

israelroldan / RESTInTag