How it works
Client ( your web browser ) send an Ajax request to server.
Then, server return a Json response respecting the good format.
Response format[
{
'action' : 'toast',
'params' : {
text: "Lorem ipsum ...",
...
}
},
{
'action' : 'redirect',
'params' : {
value : "umbrella-demo.dev/foo/bar"
}
},
...
]
Then, server return a Json response respecting the good format.
Response format
So, Client resolves each actions one by one, calling the right js function depending of action type :
- action : toast →
Toastify({text: 'Lorem ipsum'}).showToast() - action : redirect →
window.location.href=...
To send ajax request, you must call
Code Javascriptimport AjaxUtils from 'vendor/umbrella2/admin-bundle/assets/utils/AjaxUtils';
AjaxUtils.request({
'method' : 'get',
'url' : 'umbrella.dev/foo/bar',
'data' : {},
'spinner' : true, // display a spinner until server respond
'confirm' : 'Are you sure ?' // open a confirm modal before perform ajax request
'xhr-id' : 'my-id' // prevent multiple ajax request with same id
...
// Any other option available with $.ajax method
});
AjaxUtils.request() on Javascript.Code Javascript
Then, your controller must return a JsonResponse.
Code Symfony Controllerclass MyController extends BaseController {
public function myAction(): Response
{
return new JsonResponse([
['action' => 'action1', 'params' => ...],
['action' => 'action2', 'params' => ...],
]);
// or use js() helper
// Your controller must extends Umbrella\AdminBundle\Lib\Controller\AdminController
return $this->js()
->action1(...params)
->action2(...params);
}
}
Code Symfony Controller
The data-xhr attribute
This attribute will override the default behaviour of link or form and send an Ajax request (with AJaxUtils) to server on
click or on submit.
Code HTML
Example
Modal
Code Symfony Controller
class MyController extends BaseController {
public function modal(): Response
{
return $this->js()->modal('@UmbrellaAdmin/lib/modal/default.html.twig', [
'class' => ...,
'title' => ...,
'content' => ...,
...
]);
}
public function formModal(): Response
{
$form = $this->createForm(...)
return $this->js()->modal('@UmbrellaAdmin/lib/modal/form.html.twig', [
'form' => $form->createView(),
'form_layout' => 'horizontal', // or 'default'
...
]);
}
}
Offcanvas
Code Symfony Controller
class MyController extends BaseController {
public function offcanvas(): Response
{
return $this->js()->offcanvas('@UmbrellaAdmin/lib/offcanvas/default.html.twig', [
'class' => ...,
'title' => ...,
'content' => ...,
...
]);
}
}
Toast (notification)
Code Symfony Controller
class MyController extends BaseController {
public function success(): Response
{
return $this->js()->toastSuccess('Toast text here...', 'Toast title here...');
// or $this->js()->toast('success', 'Toast text here...', 'Toast title here...');
}
public function error(): Response
{
return $this->js()->toastError('Toast text here...', 'Toast title here...');
}
}
DOM manipulation
Code Symfony Controller
class MyController extends BaseController {
public function alert(): Response
{
// update content of all HTMLElements with selector #alert-stack
return $this->js()->updateHtml('<div>Your alert ...</div>', '#alert-stack');
// remove all HTMLElements with selector #alert-stack > *
return $this->js()->remove('#alert-stack > *');
}
}
Web components (@see documentation)
Code Symfony Controller
class MyController extends BaseController {
public function toggleMenu(): Response
{
// def :
// return $this->js()->call('function name', 'function params', 'selector');
return $this->js()->call('toggle', [], '[is=umbrella-sidebar]');
}
}
Custom
Code Symfony Controller
class MyController extends BaseController {
public function alert(): Response
{
return $this->js()->add('alert', ['text' => '...']);
}
}
Code Javascript
<script>
umbrella.jsResponseHandler.registerAction('alert', (params) => {
alert(params.text)
});
</script>
Options
Confirm
Show a confirm modal before perform ajax request :
<a data-xhr="umbrella.dev/foo/bar" data-confirm="Are you sure ?" href></a>
Spinner
Show a spinner until server respond :
<a data-xhr="umbrella.dev/foo/bar" data-spinner="true" href></a>