AjaxBundle
1.0.0
Este paquete ofrece una estructura simple para ejecutar acciones ajax. Para cada tipo de acción (enlace o formulario), debe agregar un data-toggle="ajax" a la etiqueta ( a , form ) y especificar la identificación del contenedor a actualizar en el atributo de actualización.
Con compositor:
Agregue esta línea en su archivo compositor.json:
"troopers/ajax-bundle": "dev-master"
Declare el paquete en su AppKernel.php:
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]Si ha instalado nuestro paquete AsseticInjectorBundle:
Gracias, eres increíble para nosotros;)
Puede que "simplemente funcione", pero si no, tendrá que verificar las etiquetas del inyector en sus bloques javascript ( injector="foot" ) y hoja de estilo ( injector="head" ).
normal Simplemente cargue ajax.js y ajax.css en su plantilla:
<!DOCTYPE html><html><head>...
{% bloquear hojas de estilo %}<link rel="stylesheet" href="{{ active('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</head><body>. ..
{% block javascripts %}<!-- Asegúrese de tener jquery cargado antes --><script type="text/javascript" src="{{ active('bundles/troopersajax/js/ajax.js') }} "></script>{% endblock %}</body></html><a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me</a> <div id="updater-container">Here will stand the ajaxCall response</div>
<form action="ajaxAction" method="POST" data-toggle="ajax" data-update="updater-ajaxAction-container"> <input type="submit" value="Ok save me" /> </form> <div id="updater-ajaxAction-container">Here will stand the ajaxAction response</div>
<a data-toggle="ajax" data-form="#search" data-update="result-panel" data-update-strategy="append" href='your_url'> Show more </a>
Si el enlace contiene la propiedad del formulario de datos, enviará el formulario utilizando las propiedades del enlace.
Puede enviar automáticamente una solicitud ajax para actualizar su formulario cuando cambia una entrada/selección, simplemente agregue el atributo de datos "data-refreshonchange":
<select name="category" data-refreshonchange="true"><option value="transport">Transporte</option><option value="structure">Estructura</option></select>
Luego en la acción de su controlador:
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// el formulario es válido} else {// evita mostrar errores al novalidar $formulario = $formFactory->createForm();$formulario->setData($usuario);
}
}Por alguna razón, no actualizaría algunas partes de su formulario (por ejemplo, un tipo de entrada = "archivo"). Luego, agregue el atributo de datos 'data-ignoreonchange="$some_unique_id"'.
Como probablemente habrás notado, puedes configurar automáticamente un contenedor para tu respuesta ajax. En realidad, puedes hacer algunas otras funciones:
El atributo data-update-strategy se utiliza para definir la función que se utilizará para integrar su contenido ajax con el contenedor que ya configuró mediante el uso del atributo data-update. Entonces, si lo desea, puede decirle a la biblioteca que coloque después, antes, agregue, anteponga o una función personalizada. Tenga en cuenta que el comportamiento predeterminado es simplemente reemplazar el contenido del contenedor por la función html.
Tomemos un ejemplo. Si desea que su contenido ajax simplemente se agregue al final de su contenedor, aquí está su código:
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-update-strategy="append">Click me</a> <div id="updater-container">This sentence will stay here and the ajax content will be displayed just after</div>
De forma predeterminada, cuando cargamos contenido ajax, se ejecuta un pequeño efecto: ocultar + desvanecerse (si el contenedor no está vacío) ocultar + deslizar hacia abajo (si el contenedor está vacío). Si este efecto no satisface sus necesidades, puede configurar el suyo propio completando el atributo de efecto de datos. Por ejemplo :
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-effect="slideDown">Click me</a> <div id="updater-container">This container will be hidden, the ajax content will be placed here and then the slideDown function will be used to display this</div>
Si no desea ningún efecto, simplemente puede agregar el atributo de datos noEffect en la etiqueta del enlace (o de destino). Por ejemplo, en el enlace:
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-noEffect=true>Click me, no effect</a> <div id="updater-container">This container will be hidden without any effect if you click</div>
o directamente en el objetivo:
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me, no effect</a> <a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-effect="fadeIn">Click me (fadeIn)</a> <div id="updater-container" data-noEffect=true>This container will be hidden with or without an effect, according by the link you choose</div>
En este último ejemplo, el primer enlace realizará la llamada ajax sin ningún efecto debido al data-noEffect en el contenedor de destino y el segundo, debido a su anulación, activará un efecto de desvanecimiento.
Esta es la más joven de la familia de funciones ajax, ahora puede simplemente activar el modo de arranque simplemente agregando data-toogle="modal" en el enlace que decida:
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
Esto funcionará "tal cual", pero para tener una apariencia atractiva, deberá agregar el marcado correcto dentro del modal. Más información en el documento modal Twitter Bootstrap
AjaxBundle viene con un cargador predeterminado y una superposición. Si lo desea, puede cambiarlo definiendo el marcado del cargador que desea usar en window.loader
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% block title %}¡Bienvenido!{% endblock %}</title>{% block stylesheets %}<link rel="stylesheet" href="{{ active('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}<link rel="icon" type="image/x-icon" href="{{ active('favicon.ico') }}" /></head><body>{% block body %}{% endblock %}
{% bloquear javascripts %}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript ">window.loader = '<div id="canvasloader-container" style="display: none;"><img src="{{ activo('/img/loading.gif') }}" style="ancho: 80%; padding-top: 15px;"/></div>';window.loaderOverlay = null;</script><tipo de script ="text/javascript" src="{{ activo('bundles/troopersajax/js/ajax.js') }}"></script>{% endblock %}</body></html> Este ejemplo le indicará a ajax.js que use /img/loading.gif y deshabilitará la superposición.
