Loading Bootstrap Modal with onclick function

Question

I'm trying to dynamically load ajax content into a bootstrap modal when a link is clicked. I can load the content fine without the modal but not sure how to simultaneously trigger the modal window to open. It interferes with the onclick function. Here's the page I'm working on. The goal is to click a thumbnail and open up its details in a modal window.

The following onclick function triggers a function to load a wordpress post type:

<?php
    if ( has_post_thumbnail(get_the_ID())) {
        echo '<a href="#" onclick="displayAntiqueDetails('.get_the_ID().');return false;" title="' . esc_attr( get_the_title() ) . '">';
        echo get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('class'=>'img-responsive', 'alt'=>get_the_title()));
        echo '<span class="caption">'.get_post_meta( get_the_ID(), 'antique_item_number', true ). '</span>';
        echo '</a>';
    }
?>

This line of JS calls the content:

function displayAntiqueDetails(post_id){
var urlPart = getUrlPart();
jQuery('.antique-details-container').load(urlPart + '/wp-content/themes/moniqueshay/antique-details.php', {antique_post_id: post_id});
}

My modal looks like this:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="antique-details well">
            <?php
            if($reserved)echo '<div class="marked reserved"></div>';
            if($sold)echo '<div class="marked sold"></div>';
            if($new)echo '<div class="marked new"></div>';
            ?>
            <div class="row">
                <div class="col-md-8 antique-image">
                    <?php
                    if ( has_post_thumbnail($post_id)) {
                        echo get_the_post_thumbnail($post_id, 'full', array('class'=>'img-responsive', 'alt'=>$post_title));
                    }
                    ?>
                </div>
                <div class="col-md-4">
                    <div class="antique-thumbs">
                        <?php
                        global $antique_attachment_id_set;
                        $antique_attachment_id_set = 1;
                        echo do_shortcode($post_content);
                        $antique_attachment_id_set = 0;
                        ?>
                    </div>
                    <div class="details-list">
                        <h3 class="text-red"><?php echo $post_title; ?></h3>
                        <p><span>Length: </span><?php echo esc_html($length); ?></p>
                        <p><span>Depth: </span><?php echo esc_html($depth); ?></p>
                        <p><span>Height: </span><?php echo esc_html($height); ?></p>
                        <p><span>Item #: </span><?php echo esc_html($item_number); ?></p>
                    </div>
                    <a class="btn btn-default" href="<?php echo home_url('contact/?contact-subject=I am inquiring about '.urlencode($post_title).' ('.urlencode($item_number).')'); ?>">Inquiry about this piece <i class="fa fa-share text-red"></i></a>
                    <div class="social-buttons btn btn-default">
                        <!-- social buttons go here -->
                        <?php if( function_exists('ADDTOANY_SHARE_SAVE_KIT') ) { ADDTOANY_SHARE_SAVE_KIT(); } ?> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Use the complete parameter of jQuery.load() to specify a callback that displays the modal once it's loaded:

jQuery('.antique-details-container').load( url, {antique_post_id: post_id},
  function(text,status,jqXHR) { $('#myModal').modal().show() }
);

UPDATE

It is possible to open the modal twice, making it impossible to close them. This (untested) replacement function should do the trick:

var displayingPopup = false;
function displayAntiqueDetails(post_id) {
  if ( displayingPopup ) return;
  displayingPopup = true;      
  var urlPart = getUrlPart();
  jQuery('.antique-details-container').load(urlPart + '/wp-content/themes/moniqueshay/antique-details.php', {antique_post_id: post_id},
    function() {
      jQuery('#myModal').modal().show()
        .one('hidden.bs.modal', function() { displayingPopup = false })
    }
  );
}

The added line .one('hidden.bs.modal', function(){...}) resets the boolean; .one is the same as .on except that once the event is fired, the handler is unregistered.

Answer 2

I don't see anything that triggers the display of the modal.

If you want a button to trigger the modal display:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

Or if you want to display it using JavaScript:

$('#myModal').modal('show');