0

I want to AJAX post content into a pop-up div when I click on the post / page link. I have come up with the following code:

Relevant HTML / PHP:

<ul class="links">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
    <li><a href="<?php the_permalink() ?>"><?php the_title();?></a></li>
<?php endwhile; endif; ?>
</ul>

<div id="hover-box"></div>

jQuery:

$('#hover-box').hide();
$('.links a').click(function( ) {
    var url=$(this).attr('href');
    $('#hover-box').fadeIn();
    $('#hover-box').load(url + ' article');
    return false;
    });

This works fine, but I'm wondering if anyone could point out the drawbacks to this approach. Other solutions I've found (e.g. https://wordpress.stackexchange.com/a/41062/18329) seem much more complicated. Should I be using additional PHP? Other solutions also make use of admin-ajax.php (e.g. http://deadlyhifi.com/2011/12/loading-frontend-ajax-content-in-wordpress/).

Any help / advice greatly appreciated!

Improve this question

1 Answer 1

Reset to default
1

Your code is not clear as it is out of context but it looks to me like you are loading your posts pages over AJAX through their normal URLs-- URLs like http://example.com/this-is-a-post/ or http://example.com/2012/12/01/this-is-a-post/. The drawback to doing that you are loading the entire WordPress and theme framework into your popup, which may be much more overhead than you need and more content than you want to display. You'll get the page header and footer, the sidebars, etc. If that is what you want, fine... except for the fact that you are probably generating very broken HTML. From the jQuery Docs for .load:

Load data from the server and place the returned HTML into the matched element.

So, if you are doing what I think you are doing, you are nesting a complete webpage-- from <html> to </html> inside another one, which is wrong.

Ultimately, you would be better just grabbing the post(s), which is slightly more complicated but more efficient. If you were to do that, you'd want to use admin-ajax.php.

Some of the "complexity" of the other wpse thread you referenced is the enqueueing of the scripts. I don't know how you are doing that but you should be doing it as in the accepted answer of that thread, by using wp_enqueue_script

Improve this answer
3
  • Thanks for the reply. Yes, under the jQuery Docs for .load (api.jquery.com/load) - see heading: Loading page fragments. This is what I am doing, so that it is only returning the html from <article> not entire html, and outputting it in the div #hover-box. I was just wondering if there is a drawback to this approach?
    – vonholmes
    Commented Jan 31, 2013 at 15:18
  • 1
    I can't say for sure without more information-- maybe a working URL ??? -- but if you are loading only the parts you need much of the serious problems don't apply. The performance issues I mentioned still do apply though. jQuery will load the whole page and extract the section requested. I don't see how it could do anything else. And, actually, that is more overhead than I originally imagined since there is an extra "extraction" step.
    – s_ha_dum
    Commented Jan 31, 2013 at 15:23
  • Ok great - I guess that performance issue is the main problem with my approach. I'll try implementing the other wpse approach I mentioned above. Thanks for the advice!
    – vonholmes
    Commented Jan 31, 2013 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.