jQuery变量用ajax和php引导模态（使用Wordpress）

Question

I have an element which contains an ID. I am trying to pass this ID through when opening a modal. The ID is then used to get a Wordpress post.

When an element which has a class (openModalStaff) is loaded in and clicked, I am successfully get the ID and assign it as an attribute to the element. I can also open the modal. What I can't do is display the variable inside the modal, which will then be used to target the correct Wordpress post.

Any ideas?

The JS:

    jQuery(".page_meet_the_team").bind("DOMSubtreeModified", function() {

    jQuery('.openModalStaff').each(function(i, obj) {
        var staffIDAdd = jQuery(this).find('.wd_member_id').text().trim();  
        jQuery(this).attr('data-id', staffIDAdd);
    });

    jQuery(".openModalStaff").unbind().click(function() {
        // Get ID of staff
        var staffID = jQuery(this).attr("data-id"); 
        console.log('fire');

        // Post variable to PHP
        jQuery.ajax(
            {
            url: "https://www.example.com/wp-content/themes/voisen-child/partials/partial-staff-modal-ajax.php",
            type: "POST",
            data: { id: staffID},
            success: function (result) {
                console.log(staffID);
                // Fire modal
                jQuery('#staffModal').modal('show');    
            }
        });


    });

});

The PHP:

if (isset($_POST['id']) && !empty($_POST['id'])) {
    echo $_POST['id'];
} else {
    echo 'not set';
}

The modal:

<div class="modal fade" id="staffModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                </div>
                <div class="modal-body">
                    <?php
                    $type = 'team';
                    $args = array(
                      'post_type' => $type,
                      'post_status' => 'publish',
                      'posts_per_page' => 1,
                      'p' => JQUERY UNIQUE ID
                      );

                    $my_query = null;
                    $my_query = new WP_Query($args);
                    if( $my_query->have_posts() ) {
                        while ($my_query->have_posts()) : $my_query->the_post();
                        ?>
                        <div class="staffModalRow">
                            <div class="staffModalLeft">
                                <?php the_post_thumbnail('full'); ?>
                            </div>
                            <div class="staffModalRight">
                                <h2><?php the_title(); ?></h2>
                                <p><?php the_content(); ?></p>
                            </div>
                        </div>
                        <?php
                        endwhile;
                    }
                    wp_reset_query();
                    ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I ended up taking another approach. The modals were needed in Wordpress, so I used a modal per item inside the loop, and used ID's to target unique modals, which meant when I clicked the link I was able to pass the ID directly and open up the required data in to the modal.

Would have preferred a neater way using jQuery / AJAX like the above, and just using the one modal, but for some reason $_POST just wasn't passing the data.