Kompo Ajax Requests
Ajax Requests in Kompo from Laravel

AJAX interactions in Kompo are really easy to do. No need to write any Javascript!. It is all done in your Komposer class in PHP.

Kompo offers very convenient methods that should cover the majority of use cases. The AJAX actions can be divided into 3 categories:

  1. Traditional HTTP requests to some routes in your application.
  2. Special Kompo methods to perform convenient actions such as loading another Komposer, calling additional Komponents or displaying Blade views.
  3. Self HTTP requests to methods inside your Komposer.

Traditional HTTP requests

The simplest of AJAX interactions are the traditional HTTP requests. You may currently perform the 4 main HTTP requests with the methods of the same name: `get()`, `post()`, `put()` and `delete()`

They all accept the same parameters `$routeOrUri`, `$parameters` and `$ajaxPayload`:

public function get($routeOrUri, $parameters = [], $ajaxPayload = [])
public function post($routeOrUri, $parameters = [], $ajaxPayload = [])
public function put($routeOrUri, $parameters = [], $ajaxPayload = [])
public function delete($routeOrUri, $parameters = [], $ajaxPayload = [])

The `$routeOrUri` parameter accepts either a Route name or a Route URI, and `$parameters` are the route parameters:

//Assuming your route is:
Route::post('like-post/{id?}', 'PostController@retrieve')->name('post.like');

//related Kompo method - both work
Button::form('Like!')->post('like-post', ['id' => 1]) //targets Route URI
Button::form('Like!')->post('post.like', ['id' => 1]) //targets Route Name

Demo

In this demo, we show how to make each of the requests, then we will display the success response in different ways.

  • The GET request response will be displayed in a Modal with `inModal`
  • The POST request response will be displayed in a Panel with `inPanel1`
  • The PUT request response will be displayed in an Alert with `inAlert`
  • The DELETE request response will simply hide itself on success.

Special Kompo Actions

This is where amazing stuff happen. You have 4 main methods to simplify your life when it comes to more advanced AJAX requests.

getKomposer
string $methodName
The method name that will return a view or HTML response.
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Loads a fresh Komposer class from the server.
To display the new Komposer, you need to chain a method `inModal` or `inPanel`.
You may also pass it additional data in the $payload argument. This data will be injected in the Komposer's store.
Note that the new Komposer will be separate from the parent Komposer where this call is made. If you wanted to include the Komponents as part of the parent, use `getKomponents()` instead.
For example:
->getKomposer(PostForm::class, ['payload' => 'some-data'])->inModal()
getView
string $viewPath
The view path as in the view() helper.
array|null $ajaxPayload
Additional custom data to include in the view (optional).
Loads a backend Blade view from the server.
To display the view in a container, you may chain it with the methods `inModal` or `inPanel`.
You may also pass it additional data in the $payload argument. This data will be available with the request() helper.
For example:
->loadView('route-of-view')->inModal()
refresh
null|string|array $komposerIds
The id of the Komposer(s). Keep blank if targeting self.
Refreshes the Komposer(s) by reloading a fresh new version from the backend.
If the argument is left blank, the Komposer will refresh itself. To target another Komposer, add a string or array of target Komposer ids.
getKomponents
string $methodName
The class's method name that will return the new komponents.
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Includes additional komponents from the server. If they contain Fields, they will be included in the Form data and handled in an Eloquent Form.
To display the new Komponents, you need to chain a method `inModal` or `inPanel`. For example:
->getKomponents('newKomponentsMethod')->inPanel('panel-id')

Demo

Self HTTP requests

Similarly to the traditional Http requests, the methods perform GET, POST, PUT and DELETE requests. The only difference is that we don't need to define a new route for the request as it will be handled directly in our Komposer.

This is useful when you want to keep related functionality in the same place (like you do with Controllers). The methods that will handle the request have Dependency injection capabilities. Most important one is injecting the FormRequest that will take care of Authorization and Validation. 

//In our komponents array
Button::form('self GET')
   ->selfGet('myMethod', ['payload' => 'ajax-payload'])

// Injecting the payload into $payload
// And booting a FormRequest instance that will authorize and validate the request.
public function myMethod($payload, KompoFormRequest $request)
{
   //... do something
}
To better understand how to use KompoFormRequest, take a look at the docs in the security section: Authorization & Validation

Demo

In this demo, we show how to make each of the requests, then we will display the success response in different ways.

  • The GET request response will be displayed in a Modal with `inModal`
  • The POST request response will be displayed in a Alert with `inAlert`
  • The PUT request response will simply hide itself on success.
  • The DELETE request response will be displayed in a Panel with `inPanel`