Phoenix provides a set of useful scripts to help us operate form and input, these scripts based on jQuery so every developers can easily learn how to use and integrate it with their own scripts.

Phoenix Core

Phoenix core script will auto included if you generate a phoenix admin template, but you can also include it manually in everywhere with first argument as css selector.

// In View class

// In Template
<?php \Phoenix\Script\PhoenixScript::phoenix(); ?>



The jquery.js and phoenix.js will be auto included to HTML head.


Use uri() to get uri data, same as php $uri->path in template.


Use asset() to get asset path:


Variable Storage

Phoenix can store some variables from PHP and push to frontend. Use this code in PHP:

PhoenixScript::data('item', $data);
PhoenixScript::data('title', 'Hello');

In frontend, use this JS to get value:

// Get object
var item ='item');

var id =;

// Get string
var title ='title').toUpperCase();

It is useful if you are using Vue.js and you want to push a lot of data structure to vue instance:

new Vue({
    el: '#app',
    data: {


If you has a language key:"Sakura"

Add language key to JS by php:


Now you can get this language string in JS:

Phoenix.__(''); // Sakura

// You can also use sprintf() and plural()
Phoenix.__('', 'arg1', 'arg2');
Phoenix.Translator.plural('', 3);

See Translator


Use JS code addMessage() to render message to template:

Phoenix.addMessage('Hello World');


Use other styles

Phoenix.addMessage('Hello World', 'info');
Phoenix.addMessage('Hello World', 'success');
Phoenix.addMessage('Hello World', 'warning');
Phoenix.addMessage('Hello World', 'danger');

Multiple messages:

Phoenix.addMessage(['Foo', 'Bar'], 'info');

Remove messages:



Phoenix has it's own event system and very easy to use:

Listen A Custom Event

Phoenix.on('my.event', function () {
    // ...

Only listen once:

Phoenix.once('my.event', function () {
    // ...

Trigger Event


Trigger with params:

Phoenix.trigger('my.event', 'Flower', 'Sakura');

Listen with params:

Phoenix.on('my.event', function (arg1, arg2) {
    // ...

Stop Listening'my.event');

Get Listeners

var listeners = Phoenix.listeners('');

Plugin Creator

Phoenix help us create jQuery plugin quickly.

Phoenix.plugin('flower', class Flower {
  constructor(arg1, arg2) {
    // ...

// Use this plugin
var instance = $('.hello').flower('arg1', 'arg2');

// Call again will get same instance.
var instance2 = $('.hello').flower('arg1', 'arg2');

instance === instance2;

Loaded Event

Phoenix provides a loaded event to make sure your script can run after page and something initialised.

// By default, loaded is same as dom ready event
Phoenix.on('loaded', function () {
    // ...

But you can add wait() to make phoenix loaded deferred. For example, this code make phoenix wait web components ready.

Phoenix.wait(function (resolve) {
    window.addEventListener('WebComponentsReady', function() {
        // Call resolve() to complete loaded

All wait() callback will push to a queue, if queue all completed, Phoenix will trigger loaded event.

If you found a typo or error, please help us improve this document.