action-js 0

The powerful javascript library for connecting form components with backend protocols.

Action JS

The powerful javascript library for connecting form components with backend protocols.


To initialize a form with Action:

var a = Action.form(document.getElementById('formSimple'))

After the form is initialized, when user clicks on the submit button, the form submittion will be transformed into an AJAX call to the backend.

Adding plugin:

a.plug(new ActionBootstrapHighlight)

a.plug(new ActionMsgbox({
    container: $('#msgContainer')


Currently, there are few plugins you can plug into the action.

  • ActionBootstrapHighlight - a plugin that automatically highlights the fields by the validation result sent from server side ActionKit.

  • ActionGrowler - a plugin that pop-up the action result in MacGrowl-style message.

  • ActionMsgbox - a plugin that renders the action result in the message box on the top of the form.


composer install
typings install
npm install


Start webpack-dev-server

webpack-dev-server --config webpack.server.config.js

Setup virtual host for running ActionKit in PHP.

BACKLOG: TypeScript Migration Steps

Install Prerequisite

Install typescript

sudo npm install typescript -g
sudo npm link typescript

Install typings (tsd was deprecated)

sudo npm install typings -g
sudo link typings

Install types for jquery, mocha

typings install dt~jquery --global --save
typings install dt~mocha --global --save

Rename all files from *.js to *.ts

fsrename -match ".js" -replace ".ts"

Create tsconfig.json file for typescript compiler

  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "outDir": "build/"
  "exclude": ["node_modules"],
  "files": [

Install ts-loader for webpack

npm install ts-loader --save-dev

Define ts-loader in webpack.config.js:

module: {
  loaders: [{
      test: /\.(js|jsx)$/,
      loaders: ['babel'],
      exclude: [nodeModulesPath]
  }, { test: /\.tsx?$/, loader: 'ts-loader' }],
} ... 

Fixing Type Errors

Export symbols to window:


Migrate old prototype based class to ES6 class

Add property names to class definition.

class Action {

    actionName: string;

    plugins: Array<Object>;

    formEl: any;

    options: ActionSettings;



Use JQueryAjaxSettings to ajaxSettings property

class ... {
    ajaxSettings: JQueryAjaxSettings;

Cast element from getElementById function call to HTMLElement types, e.g.

var i = <HTMLIFrameElement>document.getElementById(id);

Fix AIM, the onComplete property setting. Change

i.onComplete = c.onComplete;


i['onComplete'] = c.onComplete;

Functions return jQuery Deferred should be defined with JQueryDeferred<T> in the prototype:

var doSubmit = (payload): JQueryDeferred<any> => {

Abstract config structure into interface (quality depends on how you define the types):

interface ActionSettings {

    // optional property
    plugins?: Array<ActionPlugin>;

    confirm?: string;

    disableInput?: boolean;

    // optional function
    onSubmit? ():any;

    beforeSubmit? ():any;

    beforeUpload? ():any;

Related Repositories



Animate your 'action-to-effect' paths ...



Examples for D3.js in Action 2nd Edition (D3v4) ...



:closed_book: 一本小书 -《Node.js实战》 ...



《Node.js实战 第二季》示例代码 ...



Scaffold setup for some ClojureScript, node.js, core.async action ...

Top Contributors