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:
- Traditional HTTP requests to some routes in your application.
- Special Kompo methods to perform convenient actions such as loading another Komposer, calling additional Komponents or displaying Blade views.
- 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: |
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: |
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: |
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
}
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`