How to use PJSON Actions

The Action component is what you can use to bring your application to life. From ajax calls, events, routing and popups, Action is one standardized way of creating interactivity in the app.

You should already have an application with a Scalejs/PJSON set up, if not visit the quick start guide.

Documentation

• PJSON Action
• Source Code

Available PJSON Actions

• Ajax
• Event
• Redirect
• Route
• Series
• Popup
• Close Popup

You can view the source code of each action in the developer's console and the file names can be found in the header of the action's section.

---

Ajax (ajax.js)

Simple Request

This is an example of a very simple ajax action that makes a GET request to the store route.

URI Rendering

This example shows how to create an ajax action with a dynamic uri that will be mustache rendered using the data in its context. Simply add an entry to the list and the request will be made with the id from the row.

Params Rendering

This example is similar to the previous, except this ajax action will render the data in the row based on the params key.

Sending a registered input

In this example an ajax action is created that will send all of the data that is in its context. The data will come from the inputs in the adapter.

Using Next/Error Actions

Ajax actions provide a very useful feature with next and error actions. Simply supply an array of actions to nextActions and/or errorActions and these actions will run on success and error respectively.

To see what happens when an error occurs in the ajax request, try changing the uri to something else!

Using the Render Component

You can use the PJSON Render component to conditionally render another component after an ajax action is complete. In the example below, on a successful ajax call a redirect button will be rendered.

---

Event (event.js)

The event action will notify all subscribers of the provided channel in options.target via scalejs.messageBus.

Redirect (redirect.js)

Redirect is a simple action that will redirect to the provided target.

Route (route.js)

The route action provides an easy way navigate around your web application.

Series (series.js)

The series action is exactly as it sounds; supply an array to options.actions and they will be executed synchronously.

Popup (popup.js)

The popup action provides developers with an easy way to create popups. A custom template can be used to create both simple and complex popups by using options.template.

Close Popup (popup.js)

The close popup action can be used to close a popup.