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>

The page you're working on doesn't seem to be working. I'm seeing a page with the following text: "An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security." — Yass
– Yass, Commented Feb 19, 2016 at 19:15

Kenney · Accepted Answer · 2016-02-23 18:40:17Z

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.

edited Feb 23, 2016 at 18:40

answered Feb 19, 2016 at 19:22

Kenney

9,11317 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2466010 Over a year ago

Thanks for your help! That seems to work at first but after testing it out, I noticed some issues. Perhaps you could tell me what's going wrong: When I double click a thumbnail (just for testing purposes), the modal is locked and can't be closed. The same issues arises when opening a modal, closing and quickly opening another. It freezes up. You can test it out yourself here: moniqueshay.com/antiques/4

Kenney Over a year ago

I'm getting a Not Acceptable! error from Mod_Security. Anything in the browser console? It probably tries to open the modal twice. Do you have any JS in the content you load?

user2466010 Over a year ago

Meaning you can't access the site?? That wouldn't be good! The only error I see in console is: Empty string passed to getElementById(). Yes, I'm loading various other JS on the page...could be conflicting.

Kenney Over a year ago

That's right, the site is inaccessible if you directly go to moniqueshay.com/antiques/4 in a new tab; After visiting moniqueshay.com/antiques the /4 link also works again. That JS error could cause other scripts to no longer execute, but I can't reproduce it - and neither the close-then-open-real-quick. The problem is that a doubleclick opens 2 modals - if you scoll you'll see the 2nd one below the first. Sometimes one gets on top that you can close, but the background stays faded. I'll add a workaround to the answer

user2466010 Over a year ago

You're a damn genius. Thank you, sir. That worked perfectly.

|

terrymorse · Accepted Answer · 2016-02-19 19:28:48Z

0

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');

answered Feb 19, 2016 at 19:28

terrymorse

7,1561 gold badge23 silver badges31 bronze badges

Collectives™ on Stack Overflow

Loading Bootstrap Modal with onclick function

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related