How do I activate jQuery/script on demand?

Question

I am trying to use jQuery to display the comment-section of my Wordpress-pages, but without requiring that jQuery be present on all pages that allows comments. Basically, I need the following:

1. A generic javascript implementation of the 'in view' jQuery-plugin (http://remysharp.com/2009/01/26/element-in-view-event-plugin/)
2. A method of activating jQuery (core) when the div containing the comments come into view.

This would then load jQuery, which in turn would load the comments-section of the page, but only when that section became visible through the browser viewport.

The problem seems to be that I really cannot use 'wp_enqueue_script' (Wordpress' generic way of adding scripts) for this, as it is a PHP-function. Is there some method that would allow me to implement a functionality as described above (without breaking Wordpress/jQuery-functionality)?

EDIT: I need to enable jQuery only when the reader decides he wants to read comments (as opposed to only opening a page, seeing the title and leaving) - much in the style of Disqus. Disqus appears to be activated only when visible in the viewport, and I am assuming, at the same time the controlling Javascript is activated.

How would I do something like that in regular Javascript (activating jQuery), and then porting it to Wordpress?

Answer 1

1. Register jQuery and the plugin within your head

wp_register_script( 'jquery' );
wp_register_script( 'your_jquery_plugin', STYLESHEETPATH, 'jquery', '0.0', false );

2. Register a meta box

It should be a simple checkbox. Please do it like it's described on the codex page for add_meta_box() (don't just repeat this one here). If you follow the rest, then the $id for the meta box should be 'jquery_comments'.

Example (shortened):
inside functions.php

    function add_jquery_comments_meta_box() {
       $id = 'jquery_comments';
       $title = __( 'jQuery Comments, please?', 'your_textdomain_string' );
       $context = 'side'; // advanced/normal also possible
       $priority = 'low'; // high also possible
       $callback_args = ''; // in case you want to extend it
       add_meta_box( $id, $title, 'add_jquery_comments_cb_fn', 'post', $context, $priority, $callback_args );
    }
    add_action( 'admin_init', 'add_jquery_comments_meta_box', 1 );

    // Prints the box content
    // Please adjust this to your needs - only slightly modified from codex example
    function add_jquery_comments_cb_fn() {
       // Use nonce for verification
      wp_nonce_field( basename(__FILE__), 'your_noncename' );

      // The actual fields for data entry
?>
      <label for="jquery_comments"><?php _e("Do you want jquery comments on this post?", 'your_textdomain_string' ); ?></label>
      <input type="checkbox" id="jquery_comments" name="jquery_comments" />
<?php
    }

3. enqueue the script based on your meta box as the condition

and then write a function like this in your functions.php file

function add_jquery_comments_plugin() {
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'your_jquery_plugin' );
}
// and call it depending on a conditional in the comment form hook
if ( get_post_meta($post->ID, 'jquery_comments', true) ) {
   add_action( 'comment_form', 'add_jquery_comments_plugin' );
}

Answer 2

After i understood what your Q is about, i got another A for you:

--> google for "never ending pages" javascript scripts.

Some example:
http://plugins.jquery.com/plugin-tags/neverending
http://plugins.jquery.com/project/in-viewport-event
http://plugins.jquery.com/project/infiniScroll

Answer 3

After a LOT of googling, trying to find a solution at the same time as keeping up with the earthquake-situation in Japan, I found a way:

Two scripts for Wordpress

Using wp_enqueue_script, I added a DeferJS (https://github.com/BorisMoore/DeferJS), which allows scripts to be loaded onEvent. Also, a I added a custom-script that looks like this:

function gingah_comments_onLoad() {
    var element = document.getElementById("comments");
    var current = document.body.clientHeight+document.body.scrollTop;
    var target = element.offsetTop;
    if (current >= target) {
        $.defer("jquery-1.5.1.min.js", {
            bare: true 
        }).done(console.log('jquery-1.5.1.min.js loaded'));
        window.onscroll = null;
    }
}
window.onscroll = gingah_comments_onLoad;

Which basically does a quick check every time the viewer scrolls the page, to see if the target element ("comments") is reached. When it is in fact visible in the viewport, DeferJS loads jquery-1.5.1.min.js (and also drops a quick line into the console.log for verification). Also, when it became visible, the effect from scrolling was removed.

At this point, jQuery will be loaded and ready to use. This method does not, however, allow for use of the wp_enqueue_script-function to load jQuery (but it should be quite possible to extend it to not try to load it if already present). This is because of the obvious separation between PHP and JS.

I owe a lot of thanks to kaiser for his comments and suggestions on the method, so thank you very much for the help.