Wie man Inhalt dynamisch in Körper des Bootstrap-Modalfensters lädt?

Ich habe diese Antwort auf Stack Overflow gefunden , beantworte genau diese Frage.

Ich habe es leicht modifiziert, weil ich einen button und keinen anchor :

 jQuery( ".modal" ).on( "show.bs.modal", function ( e ) { var target = jQuery( e.relatedTarget ).attr( "data-target" ).replace( "#", "" ); var modal_ids = [ "modal-request-estimate", "modal-schedule-appointment", "modal-rate-review" ]; if ( modal_ids.indexOf( target ) == - 1 ) { return false; } jQuery( this ).find( ".modal-body" ).load( location.href + "?modal=" + target ); } ); 

Wenn dann eine PHP-Callback-function hinzugefügt wurde, die auf template_redirect wird, um nach $_GET[ 'modal' ] und den richtigen Inhalt zu gültigen Bedingungen auszugeben.

Mein PHP-Callback sieht so aus:

 add_action( 'template_redirect', function () { $modal_id = null; if ( isset( $_GET['modal'] ) ) { $modal_id = filter_var( $_GET['modal'], FILTER_SANITIZE_STRING ); } if ( ! $modal_id ) { return false; } echo render_form( $modal_id ); return true; } ); 

Hinweis: render_form(); ist eine sehr einfache function, die ausschließlich ein Standard-HTML-Eingabeformular ausgibt.

Nur um es klar zu stellen: Ich schreibe meine Callback-functionen nicht immer anonym. Ich habe es einfach gemacht, um diese Frage zu stellen.

An diesem Punkt: Wenn die Schaltfläche geklickt wird, erscheint das modale Fenster, das Formular wird im Hauptteil des modalen Fensters gerendert. Die Vorlage der gesamten Website wird jedoch auch in das modale Fenster ausgegeben.

Wie bekomme ich es, das Formular NUR in den Körper des Modals anstelle des Templates der GESAMTEN Webseite auszugeben?

Solutions Collecting From Web of "Wie man Inhalt dynamisch in Körper des Bootstrap-Modalfensters lädt?"

Ich denke, dass die richtige Lösung darin besteht, das eingebettete Formular auf der Seite zu haben. In dem großen Schema der Dinge ist der zusätzliche HTML-Blödsinn nichts, wenn Sie ihn mit allen Bildern und JS vergleichen, die Sie wahrscheinlich bedienen.

Wie bei AJAX gibt es in WordPress nur zwei gute Lösungen, den AJAX-Endpunkt oder den JSON-Endpunkt (vorzugsweise den zweiten). Jeder Versuch, die Vorlagenhierarchie zu verwenden, während am Ende erfolgreich, wird ein harter Kampf gegen sein alle Header und Footer Haken und verursachen fortgesetzte Pflege Kopfschmerzen.

Wenn aus irgendeinem Grund der JSON-Endpunkt nicht verwendet werden kann, bleibt eine Seitenvorlage übrig, die keine WordPress-Hooks aufruft. Sie können diese “Formularseite” manuell erstellen oder in der Laufzeit ausführen (Aktivierung von Plugins / Themen). Noch etwas Arbeit zu tun, wenn Sie wollen, wenn Sie eine solche Seite von Google verstecken möchten, die von der Art des SEO-Plugins abhängt, das Sie verwenden.