Advanced

JsonResponse

Basics

JsonResponse extends Illuminate\Http\JsonResponse and is supplemented with helper methods for interacting with the frontend part of the admin panel interface after processing a request.

Methods

Merge

The merge() method allows you to add additional data to the response.

merge(array $data)
merge(array $data)
 namespaces
use MoonShine\Crud\JsonResponse;
 
JsonResponse::make()
    ->merge(['options' => $options, 'custom_key' => 'custom_value']);
 namespaces
use MoonShine\Crud\JsonResponse;
 
JsonResponse::make()
    ->merge(['options' => $options, 'custom_key' => 'custom_value']);

This is useful, for example, in asynchronous search for Select or BelongsToMany fields, when you need to return options along with additional actions (notifications, events, etc.).

Toast

The toast() method triggers a standard toast notification of the admin panel.

toast(
    string $value,
    ToastType $type = ToastType::DEFAULT,
    null|int|false $duration = null
)
toast(
    string $value,
    ToastType $type = ToastType::DEFAULT,
    null|int|false $duration = null
)
JsonResponse::make()
    ->toast('My message', ToastType::SUCCESS, duration: 3000);
JsonResponse::make()
    ->toast('My message', ToastType::SUCCESS, duration: 3000);

Redirect

The redirect() method will redirect to the specified URL.

redirect(string $value)
redirect(string $value)
JsonResponse::make()->redirect('/');
JsonResponse::make()->redirect('/');

Events

The events() method adds JSEvents to the response, which will be triggered after processing an asynchronous request.

events(array $events)
events(array $events)
JsonResponse::make()
    ->events([AlpineJs::event(JsEvent::TABLE_UPDATED, 'index')]);
JsonResponse::make()
    ->events([AlpineJs::event(JsEvent::TABLE_UPDATED, 'index')]);

Html

The html() method inserts the required HTML code into the selector specified when creating the component that initiated the request.

html(string|array $value, HtmlMode $mode = HtmlMode::INNER_HTML)
html(string|array $value, HtmlMode $mode = HtmlMode::INNER_HTML)
  • $value - the value to be inserted into the selector,
  • $mode - the mode of content replacement in the selector.

HtmlMode is an Enum with the following values:

enum HtmlMode: string
{
    case INNER_HTML = 'inner_html';
 
    case OUTER_HTML = 'outer_html';
 
    case BEFORE_BEGIN = 'beforebegin';
 
    case AFTER_BEGIN = 'afterbegin';
 
    case BEFORE_END = 'beforeend';
 
    case AFTER_END = 'afterend';
}
enum HtmlMode: string
{
    case INNER_HTML = 'inner_html';
 
    case OUTER_HTML = 'outer_html';
 
    case BEFORE_BEGIN = 'beforebegin';
 
    case AFTER_BEGIN = 'afterbegin';
 
    case BEFORE_END = 'beforeend';
 
    case AFTER_END = 'afterend';
}

In the following example, the value Content will be inserted into the selector #my-selector.

ActionButton::make('Button Label', '/endpoint')->async(selector: '#my-selector')
 
//...
 
JsonResponse::make()->html('Content');
ActionButton::make('Button Label', '/endpoint')->async(selector: '#my-selector')
 
//...
 
JsonResponse::make()->html('Content');

HtmlData

The htmlData() method allows specifying multiple selectors and HTML content for insertion into these selectors.

htmlData(
    string|array $value,
    string $selector,
    HtmlMode $mode = HtmlMode::INNER_HTML
)
htmlData(
    string|array $value,
    string $selector,
    HtmlMode $mode = HtmlMode::INNER_HTML
)
JsonResponse::make()
      ->htmlData((string) Text::make('One'), '#selector1')
      ->htmlData((string) Text::make('Two'), '#selector2', HtmlMode::BEFORE_END)
JsonResponse::make()
      ->htmlData((string) Text::make('One'), '#selector1')
      ->htmlData((string) Text::make('Two'), '#selector2', HtmlMode::BEFORE_END)

Fields values

The fieldsValues() method allows you to set the values of the field fields through selectors.

fieldsValues(array $values)
fieldsValues(array $values)
JsonResponse::make()
      ->fieldsValues([
        '.field-title-1' => 'some value 1',
        '.field-title-2' => 'some value 2',
    ])
JsonResponse::make()
      ->fieldsValues([
        '.field-title-1' => 'some value 1',
        '.field-title-2' => 'some value 2',
    ])

Also, when filling the field, the event change will be caused.