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('

Step 1: ' . time() . '

') ]) ->updateWith( events: [ AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'fg-step-2'), ], ) ->name('fg-step-1') , Fragment::make([ FlexibleRender::make('

Step 2: ' . time() . '

') ]) ->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()
,