AjaxBundle
1.0.0
Dieses Bundle bietet eine einfache Struktur zum Ausführen von Ajax-Aktionen. Für jede Art von Aktion (Link oder Formular) müssen Sie ein data-toggle="ajax" zum Tag ( a , form ) hinzufügen und die ID des zu aktualisierenden Containers im Update-Attribut angeben.
Mit Komponist:
Fügen Sie diese Zeile in Ihre Composer.json-Datei ein:
"troopers/ajax-bundle": "dev-master"
Deklarieren Sie das Bundle in Ihrer AppKernel.php:
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]Wenn Sie unser AsseticInjectorBundle-Bundle installiert haben:
Danke, du bist großartig für uns ;)
Es könnte „einfach funktionieren“, aber wenn nicht, müssen Sie die Injektor-Tags in Ihren Javascript- ( injector="foot" ) und Stylesheet-Blöcken ( injector="head" ) überprüfen.
normal Weg Laden Sie einfach ajax.js und ajax.css in Ihre Vorlage:
<!DOCTYPE html><html><head>...
{% Block-Stylesheets %}<link rel="stylesheet" href="{{ asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</head><body>. ..
{% block javascripts %}<!-- Stellen Sie sicher, dass jquery vorher geladen ist --><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>
Wenn der Link die Eigenschaft „data-form“ enthält, wird das Formular mithilfe der Eigenschaften des Links gesendet.
Sie können automatisch eine Ajax-Anfrage senden, um Ihr Formular zu aktualisieren, wenn sich eine Eingabe/Auswahl ändert. Fügen Sie einfach das Datenattribut „data-refreshonchange“ hinzu:
<select name="category" data-refreshonchange="true"><option value="transport">Transport</option><option value="structure">Struktur</option></select>
Dann in der Aktion Ihres Controllers:
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// form is valid} else {// Vermeiden Sie die Anzeige von Fehlern beim Novalidate $form = $formFactory->createForm();$form->setData($user);
}
}Aus irgendeinem Grund würden Sie einige Teile Ihres Formulars nicht aktualisieren (z. B. einen Eingabetyp = „Datei“). Fügen Sie dann das Datenattribut „data-ignoreonchange="$some_unique_id"“ hinzu.
Wie Sie wahrscheinlich bemerkt haben, können Sie automatisch einen Container für Ihre Ajax-Antwort festlegen. Tatsächlich können Sie noch einige andere Funktionen nutzen:
Das Attribut „data-update-strategy“ wird verwendet, um die Funktion zu definieren, die zum Integrieren Ihres Ajax-Inhalts in den Container verwendet werden soll, den Sie bereits mithilfe des Attributs „data-update“ festgelegt haben. Wenn Sie möchten, können Sie der Bibliothek also mitteilen, dass sie nach, vor, anhängen, voranstellen oder eine benutzerdefinierte Funktion einfügen soll. Beachten Sie, dass das Standardverhalten darin besteht, einfach den Inhalt des Containers durch die HTML-Funktion zu ersetzen.
Nehmen wir ein Beispiel. Wenn Sie möchten, dass Ihr Ajax-Inhalt einfach am Ende Ihres Containers hinzugefügt wird, finden Sie hier Ihren 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>
Wenn wir Ajax-Inhalte laden, wird standardmäßig ein kleiner Effekt ausgeführt: hide + fadeIn (wenn der Container nicht leer ist) hide + slideDown (wenn der Container leer ist). Wenn dieser Effekt Ihren Anforderungen nicht gerecht wird, können Sie einen eigenen festlegen, indem Sie das Attribut data-effect ausfüllen. Zum Beispiel :
<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>
Wenn Sie keinen Effekt wünschen, können Sie einfach das Datenattribut noEffect zum Link-Tag (oder zum Ziel-Tag) hinzufügen. Zum Beispiel auf dem Link:
<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>
oder direkt am Ziel:
<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>
In diesem letzten Beispiel führt der erste Link den Ajax-Aufruf aufgrund des data-noEffect auf den Zielcontainer ohne Auswirkung aus, und der zweite Link löst aufgrund seiner Überschreibung einen FadeIn-Effekt aus.
Dies ist das jüngste Mitglied der Ajax-Funktionsfamilie. Jetzt können Sie Bootstrap-Modal einfach auslösen, indem Sie einfach data-toogle="modal" zu dem Link hinzufügen, den Sie möchten:
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
Dies funktioniert „wie es ist“, aber um ein cooles Erscheinungsbild zu erzielen, müssen Sie das richtige Markup innerhalb des Modals hinzufügen. Weitere Informationen finden Sie im modalen Twitter-Bootstrap-Dokument
AjaxBundle wird mit einem Standard-Loader und einem Overlay geliefert. Wenn Sie möchten, können Sie es ändern, indem Sie das Markup des Loaders definieren, das Sie in window.loader verwenden möchten
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% block title %}Willkommen!{% endblock %}</title>{% block stylesheets %}<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 %}
{% block 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="width: 80%; padding-top: 15px;"/></div>';window.loaderOverlay = null;</script><script type="text/javascript" src="{{ asset('bundles/troopersajax/js/ajax.js') }}"></script>{% endblock %}</body></html> In diesem Beispiel wird ajax.js angewiesen, /img/loading.gif zu verwenden, und das Overlay wird deaktiviert.
