Components

Fragment

Basics

With Fragment, you can wrap a specific area of your page and update only that area by triggering events. For this, you can use Blade Fragments. Fragment enables this capability.

make(iterable $components = [])
make(iterable $components = [])
use MoonShine\Laravel\Components\Fragment;
use MoonShine\UI\Fields\Text;
 
// ...
 
protected function components(): iterable
{
    return [
        Fragment::make([
            Text::make('Name', 'first_name')
        ])->name('fragment-name')
    ];
}
 
// ...
use MoonShine\Laravel\Components\Fragment;
use MoonShine\UI\Fields\Text;
 
// ...
 
protected function components(): iterable
{
    return [
        Fragment::make([
            Text::make('Name', 'first_name')
        ])->name('fragment-name')
    ];
}
 
// ...

Asynchronous Interaction

Update via Events

Fragment::make($components)->name('fragment-name'),
Fragment::make($components)->name('fragment-name'),

As an example, let's trigger an event upon successful form submission:

FormBuilder::make()->async(events: AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fragment-name'))
FormBuilder::make()->async(events: AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fragment-name'))

You can also pass additional parameters with the request via an array:

Fragment::make($components)
    ->name('fragment-name')
    ->updateWith(params: ['resourceItem' => request('resourceItem')]),
Fragment::make($components)
    ->name('fragment-name')
    ->updateWith(params: ['resourceItem' => request('resourceItem')]),

Passing Parameters

The method withSelectorsParams() allows you to pass field values with the request using element selectors.

Fragment::make($components)
    ->withSelectorsParams([
        'start_date' => '#start_date',
        'end_date' => '#end_date'
    ])
    ->name('fragment-name'),
Fragment::make($components)
    ->withSelectorsParams([
        'start_date' => '#start_date',
        'end_date' => '#end_date'
    ])
    ->name('fragment-name'),

Triggering Events

Upon successful update, Fragment can also trigger additional events. Let's consider an example of updating fragments one after another when clicking a button:

Fragment::make([
    FlexibleRender::make('<p> Step 1: ' . time() . '</p>')
])
    ->updateWith(
        events: [
            AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-2'),
        ],
    )
    ->name('fg-step-1')
,
 
Fragment::make([
    FlexibleRender::make('<p> Step 2: ' . time() . '</p>')
])
    ->name('fg-step-2')
,
// ...
ActionButton::make('Start')->dispatchEvent([AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-1')])
,
Fragment::make([
    FlexibleRender::make('<p> Step 1: ' . time() . '</p>')
])
    ->updateWith(
        events: [
            AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-2'),
        ],
    )
    ->name('fg-step-1')
,
 
Fragment::make([
    FlexibleRender::make('<p> Step 2: ' . time() . '</p>')
])
    ->name('fg-step-2')
,
// ...
ActionButton::make('Start')->dispatchEvent([AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-1')])
,

Response Handling

Details in the Js section

Fragment::make($components)
    ->updateWith(
        callback: AsyncCallback::with(afterResponse: 'afterResponseFunction')
    )
    ->name('fragment-name')
,
Fragment::make($components)
    ->updateWith(
        callback: AsyncCallback::with(afterResponse: 'afterResponseFunction')
    )
    ->name('fragment-name')
,

URL Query Parameters

You can include parameters of the current URL request (e.g., ?param=value) in the fragment request:

This will preserve all parameters from the current request URL when loading the fragment.

Fragment::make($components)
    ->name('fragment-name')
    ->withQueryParams()
,
Fragment::make($components)
    ->name('fragment-name')
    ->withQueryParams()
,