Introduction

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 is a HTML form operation helper, it 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
\Phoenix\Script\PhoenixScript::core();

// Custom selector
\Phoenix\Script\PhoenixScript::core('#my-form');

// Custom selector and use other variable name.
\Phoenix\Script\PhoenixScript::core('#my-form', 'MyPhoenix');

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

OR

@php(\Phoenix\Script\PhoenixScript::core())

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

And you must have a <form id="#admin-form"> ... element in your HTML so Phoenix can operate this form.

Submit and RESTful CRUD

You can simply use this JS code to submit form:

// Submit with default action defined on <form action="...">
Phoenix.submit();

// Submit with custom URI and query
Phoenix.submit('/flower/sakuras', {page: 3});

// Send POST
Phoenix.submit('/flower/sakura', data, 'POST');

// Send custom RESTful method, will add `_method` to your params
Phoenix.submit('/flower/sakura', data, 'POST', 'PUT');

Use simple methods:

// GET
Phoenix.get('/flower/sakura/25', query);

// POST
Phoenix.post('/flower/sakura/25', query);

// POST with custom method
Phoenix.post('/flower/sakura/25', query, 'PUT');

// PUT
Phoenix.put('/flower/sakura/25', query);

// PATCH
Phoenix.patch('/flower/sakura/25', query);

// DELETE
Phoenix.sendDelete('/flower/sakura/25', query);

On click event in HTML element:

<button type="button" onclick="Phoenix.post()"></button>

Routes

Use Router to print route to HTML.

<button type="button" onclick="Phoenix.post('{{ $router->route('sakura', ['id' => 25]) }}')"></button>

The output

<button type="button" onclick="Phoenix.post('/flower/sakura/25')"></button>

Use Phoenix JS Router:

Add route settings in PHP

\Phoenix\Script\PhoenixScript::addRoute('sakura_save', $router->route('sakura', ['id' => 25]));

And get this route by Phoenix.Router:

<button type="button" onclick="Phoenix.post(Phoenix.Router.route('sakura_save'))"></button>

Get route in anywhere, for example, use it in ajax call:

$.ajax({
    url: Phoenix.Router.route('sakura_save'),
    data: data,

    // ...
}).done(...)

Variable Storage

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

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

In frontend, use this JS to get value:

// Get object
var item = Phoenix.Sotre.item;

var id = item.id;

// Get string
var title = Phoenix.Sotre.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: {
        item: Phoenix.Store.item
    }
});

Translate

If you has a language key:

flower.message.sakura="Sakura"

Add language key to JS by php:

\Phoenix\Script\PhoenixScript::translate('flower.message.sakura');

Now you can get this language string in JS:

Phoenix.Translator.translate('flower.message.sakura'); // Sakura

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

See Translator

Messages

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

Phoenix.addMessage('Hello World');

p-2016-07-21-001

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.removeMessages();

Keep Alive

If you are writing a form with long textarea, you will hope the session do not expired, use keepAlive() in php.

PhoenixScript::keepAlive();

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