Ajax WordPress post popup with SimpleModal and jQuery

2 Views

I tried to implement this mode here http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but nothing seems to work.

This is what I do.

Read More

1 / Include in header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.simplemodal.js"></script>`

The links are goods cause I checked them both.

2 / Include in header this script

<script>
jQuery(document).ready(function() {
    jQuery('a.postpopup').live('click', function(){
        var id = jQuery(this).attr('rel');
        jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('<?php bloginfo('url')?>/ajax/?id='+id).modal({
           opacity:90,
           position: ["0%"],
           overlayClose:true
        });
        return false;
    });
});
</script>

3 / Make a custom template with this code

<?php
/*
Template Name: Ajax
*/
?>
<?php
    $post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
    <?php setup_postdata($post); ?>
    <div class="whatever">
        <h2 class="entry-title"><?php the_title() ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </div>
<?php endif; ?>

And after that made a page named Ajax and assign the template Ajax.

4 / Implement a link

<a href="javascript:;" rel="257" class="postpopup">this link</a>

If i click on the link nothing happens.
What did I do wrong cause I did not have a clue about it?
Thanks.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. jQuery .load() is ajax and so you need to do any subsequent things in a callback like this:

    var $ajax-div = jQuery('<div id="ajax-popup"></div>').hide().appendTo('body');
var url = '<?php bloginfo('url')?>/ajax/?id=' + id;
$ajax-div.load(url), function() {
    // the callback
    jQuery('#ajax-popup').modal({
        opacity: 90,
        position: ["0%"],
        overlayClose:true
    });
});