How to Dynamically Load Content Into Body of Bootstrap Modal Window?

Question

I found this answer on Stack Overflow, answer this exact question.

I've modified it slightly, because I'm using a button and not an 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 );

} );

If then added a PHP callback function to run on template_redirect in order to check for $_GET[ 'modal' ] and output the proper content upon valid conditions.

My PHP callback looks like this:

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;

} );

Note: render_form(); is a very simple function that exclusively outputs a standard HTML input form.

Just to be clear: I don't always write my callback functions anonymously. I did it just for simplicity of asking this question.

At this point: when the button is clicked, the modal window pops up, the form is rendered in the body of the modal window. However, the entire website's template is also outputted into the modal window.

How do I get it to ONLY output the form into the modal's body, instead of the ENTIRE website's template?

Answer 1

I think that the right solution is to have the form embeded in the page. In the big scheme of things the extra html bloat is nothing when you compare it to all the images and JS you are likely to serve.

As for AJAX, in wordpress there are only two good solutions, the AJAX end point or the JSON end point (preferably the second), any attempt to use the template hierarchy, while might be successful in the end, will be an uphill battle against all the header and footer hooks and cause to continued maintenance headache.

If for some reason the JSON end point can not be used, then you are left with having an page template, that do not call any wordpress hooks. You can manually create such "form page" or do it in run time (plugin/theme activation). Still some extra work to do if you want if you want to hide such page from google which will depend on the type of SEO plugin you use.