Wagtail client-side components
    Preparing search index...

    Class ActionController

    Adds the ability for an element to activate a discrete action such as clicking the button dynamically from some other event or triggering a form submission where the form is created dynamically in the DOM and then submitted.

    Example: - Triggering a click

    <button
      type="button"
      data-controller="w-action"
      data-action="some-event#click"
    >
      Go
    </button>

    Example: - Triggering a dynamic POST submission

    <button
      type="submit"
      data-controller="w-action"
      data-action="w-action#post"
      data-w-action-url-value='url/to/post/to'
    >
     Enable
    </button>

    Example: - Triggering a POST request via sendBeacon

    <button data-controller="w-action" data-action="blur->w-action#sendBeacon">
      If you move focus away from this button, a POST request will be sent.
    </button>

    Example: - Triggering a dynamic redirect (a link is normally preferred)

    <form>
      <select name="url" data-controller="w-action" data-action="change->w-action#redirect">
        <option value="/path/to/1">1</option>
        <option value="/path/to/2">2</option>
      </select>
    </form>

    Example: - Triggering selection of the text in a field

    <form>
      <textarea name="url" data-controller="w-action" data-action="click->w-action#select">
        This text will all be selected on focus.
      </textarea>
    </form>

    Example: - Ensuring a button's click does not propagate

    <div>
      <button type="button" data-controller="w-action" data-action="w-action#noop:stop">Go</button>
    </div>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    context continueValue urlValue blessings outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    click connect disconnect dispatch forceReload initialize noop post redirect reload reset select sendBeacon afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns ActionController

    Properties

    context: Context
    continueValue: boolean
    urlValue: string
    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[]
    values: {
        continue: { default: boolean; type: BooleanConstructor };
        url: StringConstructor;
    } = ...

    Accessors

    • get application(): Application

      Returns Application

    • get classes(): ClassMap

      Returns ClassMap

    • get data(): DataMap

      Returns DataMap

    • get element(): ElementType

      Returns ElementType

    • get identifier(): string

      Returns string

    • get outlets(): OutletSet

      Returns OutletSet

    • get scope(): Scope

      Returns Scope

    • get targets(): TargetSet

      Returns TargetSet

    • get shouldLoad(): boolean

      Returns boolean

    Methods

    • Returns void

    • Returns void

    • Parameters

      • eventName: string
      • Optional__namedParameters: Partial<
            {
                bubbles: boolean;
                cancelable: boolean;
                detail: Object;
                prefix: string;
                target: Element
                | Window
                | Document;
            },
        >

      Returns CustomEvent<Object>

    • Returns void

    • Intentionally does nothing.

      Useful for attaching data-action to leverage the built in Stimulus options without needing any extra functionality. e.g. preventDefault (:prevent) and stopPropagation (:stop).

      Returns void

    post

    • Trigger a redirect based on the custom event's detail, the Stimulus param or finally check the controlled element for a value to use.

      Parameters

      • event: CustomEvent<{ url?: string }> & { params?: { url?: string } }

      Returns void

    • Reset the field to a supplied or the field's initial value (default). Only update if the value to change to is different from the current value.

      Parameters

      • event: CustomEvent<{ value?: string }> & { params?: { value?: string } }

      Returns void

    • Like post, but uses the Beacon API, which can be used to send data to a server without waiting for a response. Useful for sending analytics data or a "release" signal before navigating away from a page.

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods