CODEWITHSUNDEEP
jqueryajaxwordpressplugins
Tomasz Lisiecki
Tomasz Lisiecki

Reputation: 71

How to trigger jquery plugins after ajax has loaded a page in WordPress?

After all links in Google search results being purple and me being frustrated since couple of hours I decided to ask you guys to help me with the problem.

On my home page in WordPress, a loop generates list with all posts titles on the blog. To improve website loading time, I decided to go with AJAX. Instead of loading all content at once, you click the title of certain post to display its cotnent below. Simply, when you click it POSTs the id of the post (taken from attribute tag) to the ajax.php file (being WordPress template with a loop to display content ... ). When the content is read out, it gets displayed on the front end.

Problem are plugins. As they are not re-fired after content loads (DOM changes). Obviously, I don't want the solution that I add every single plugin I installed to AJAX callback, because it is not the way it should be. I want it automated. WordPress is meant to be simple and easy to manage (even from developers point of view).

I already tried with live(), livequery() - the plugin, listen() - the plugin .. and tried to change my ajax script to be more the WordPress way (using admin-ajax.php) and everytime result is the same - it doesnt work.

By plugins I mean for example: Syntax Highlighter, Social Share Buttons or FancyBox / Lightbox for images... Even if I add plugin's function to the ajax loop to display it manually it still fails...

I suspect I may use live() functions a bit wrong or something ... anyway this is my code:

Front-end loop (index.php)

<?php while (have_posts()) : the_post(); ?>   
    <article>
        <div class="fake">
            <div class="header" rel="<?php the_ID(); ?>">
                <h1 class="title"><?php the_title(); ?></h1>
                <span class="tags">
                    <?php
                      $posttags = get_the_tags();
                      if ($posttags) {
                        foreach($posttags as $tag) {
                          echo $tag->name . ', '; 
                        }
                      }
                    ?>
                </span>
                <span class="post_no">#<?=$published?></span>
                <div class="arrow"></div>
            </div>
        </div>
        <div class="content"></div>
    </article>
   <?php endwhile; ?>

Fragment of AJAX I use:

$('.header').live('click',function() {
        var content = $(this).parent().parent().find('.content');
        var post_id = $(this).attr("rel"); 
        content.load("http://localhost/simpleecode/ajax/",{id:post_id}).delay(800).slideDown('slow');});

Template with loop for AJAX:

<?php $post = get_post($_POST['id']); ?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<?php the_content(); ?>
<?php endif;?>

I think you may like link to the dev website to check out the DOM and files for your own too (I used shortlink because it is dev site and I don't want it to be public anyhow):

http://bit.ly/Oa6hWH

Hope you will have idea on how to do this :S

Upvotes: 2

Views: 4858

Answers (1)

charlietfl
charlietfl

Reputation: 171679

Use the success/complete callback of AJAX request to call plugins for html that is new to the DOM.

content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     /* new html now exists*/
    $(this).find('.classThatNeedsPlugin').somePlugin();

}).delay(800).slideDown('slow');

jQuery API - load() method docs

If plugins have any dimension sensitive code in them you may need to alter this to call a plugin in the callback of the animation

EDIT: Rather than use delay() to setup the animation, call the animation within the same success callback, the html will be ready then

content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     /* new html now exists*/
    $(this).find('.classThatNeedsPlugin').somePlugin().slideDown('slow');      

});

Edit2 Alternate methods: jQuery deferred object methods.

You can also use deferred to set up your ajax callbacks.

var jqXhr= content.load("http://localhost/simpleecode/ajax/",{id:post_id});
$.when( jqXhr).then( /* plugin function */);

OR custom events

/* on page load*/
$('#myTable').on('myCustomEventName', function(){
     $(this).doPlugins();
}).trigger('myCustomEventName');

/* ajax callback*/
content.load("http://localhost/simpleecode/ajax/",{id:post_id}, function(){
     $('#myTable').trigger('myCustomEventName')

})

Upvotes: 3

Related Questions