AjaxBundle
1.0.0
Ce bundle offre une structure simple pour exécuter des actions ajax. Pour chaque type d'action (lien ou formulaire), vous devez ajouter un data-toggle="ajax" à la balise ( a , form ) et spécifier l'identifiant du conteneur à mettre à jour dans l'attribut update.
Avec Compositeur :
Ajoutez cette ligne dans votre fichier composer.json :
"troopers/ajax-bundle": "dev-master"
Déclarez le bundle dans votre AppKernel.php :
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]Si vous avez installé notre bundle AsseticInjectorBundle :
Merci, tu es génial pour nous ;)
Cela peut "juste fonctionner", mais sinon, vous devrez vérifier les balises d'injecteur dans vos blocs javascript ( injector="foot" ) et feuille de style ( injector="head" ).
normal Chargez simplement ajax.js et ajax.css dans votre modèle :
<!DOCTYPE html><html><head>...
{% bloquer les feuilles de style %}<link rel="stylesheet" href="{{ Asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</head><body>. ..
{% block javascripts %}<!-- Assurez-vous d'avoir chargé jquery avant --><script type="text/javascript" src="{{ Asset('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 le lien contient la propriété data-form, il soumettra le formulaire en utilisant les propriétés du lien.
Vous pouvez envoyer automatiquement une requête ajax pour mettre à jour votre formulaire lors d'un changement de saisie/sélection, ajoutez simplement l'attribut de données "data-refreshonchange" :
<select name="category" data-refreshonchange="true"><option value="transport">Transport</option><option value="structure">Structure</option></select>
Puis dans l'action de votre contrôleur :
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// le formulaire est valide} else {// évite d'afficher des erreurs lors de la novalidate $form = $formFactory->createForm();$form->setData($user);
}
}Pour une raison quelconque, vous ne rafraîchiriez pas certaines parties de votre formulaire (par exemple un type d'entrée = "fichier"). Ensuite, ajoutez l'attribut de données 'data-ignoreonchange="$some_unique_id"'.
Comme vous l'avez probablement remarqué, vous pouvez définir automatiquement un conteneur pour votre réponse ajax. En fait, vous pouvez faire d'autres fonctionnalités :
L'attribut data-update-strategy est utilisé pour définir la fonction à utiliser pour intégrer votre contenu ajax au conteneur que vous avez déjà défini en utilisant l'attribut data-update. Donc, si vous le souhaitez, vous pouvez demander à la bibliothèque de mettre après, avant, ajouter, pré-ajouter ou une fonction personnalisée. Notez que le comportement par défaut consiste simplement à remplacer le contenu du conteneur par la fonction html.
Prenons un exemple. Si vous souhaitez que votre contenu ajax soit simplement ajouté à la fin de votre conteneur, voici votre code :
<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>
Par défaut, lorsque l'on charge du contenu ajax, un petit effet est exécuté : hide + fadeIn (si le conteneur n'est pas vide) hide + slideDown (si le conteneur est vide). Si cet effet ne répond pas à vos besoins, vous pouvez définir le vôtre en remplissant l'attribut data-effect. Par exemple :
<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 vous ne souhaitez aucun effet, vous pouvez simplement ajouter l'attribut de données noEffect sur la balise de lien (ou de cible). Par exemple, sur le lien :
<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>
ou directement sur la cible :
<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>
Dans ce dernier exemple, le premier lien fera l'appel ajax sans aucun effet à cause du data-noEffect sur le conteneur cible et le second, à cause de son remplacement déclenchera un effet fadeIn.
C'est la plus jeune de la famille des fonctionnalités ajax, vous pouvez désormais simplement déclencher le bootstrap modal en ajoutant simplement data-toogle="modal" sur le lien que vous décidez de :
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
Cela fonctionnera "tel quel", mais pour avoir une apparence sympa, vous devrez ajouter le balisage correct à l'intérieur du modal. Plus d'informations dans la documentation modale Twitter Bootstrap
AjaxBundle est livré avec un chargeur par défaut et une superposition. Si vous le souhaitez, vous pouvez le modifier en définissant le balisage du chargeur que vous souhaitez utiliser dans window.loader
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% block title %}Bienvenue !{% endblock %}</title>{% feuilles de style de bloc %}<link rel="stylesheet" href="{{ Asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}<link rel="icon" type="image/x-icon" href="{{ Asset('favicon.ico') }}" /></head><body>{% block body %}{% endblock %}
{% bloquer les 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="{{ Asset('/img/loading.gif') }}" style="largeur : 80 % ; padding-top : 15px;"/></div>';window.loaderOverlay = null;</script><type de script ="text/javascript" src="{{ Asset('bundles/troopersajax/js/ajax.js') }}"></script>{% endblock %}</body></html> Cet exemple indiquera à ajax.js d'utiliser le /img/loading.gif et désactivera la superposition.
