Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

QapTcha is a draggable jQuery captcha system. I have been trying to create a plugin to make it work on the Wordpress comment system. I found a plugin that is already doing this but it is outofdate and doesn't use the latest QapTcha version.

The earlier versions do not function on touch screens, therefore, the latest version is essential. So, I used the plugin as a template and updated all of the files accordingly, but no matter what I do, the QapTcha slider does not appear in the comment form.

Here is some of the PHP script:

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery ui' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
    wp_register_script( 'jquery ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js'); 
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery ui' );
} 

function myQaptcha_wp_footer() {
    if (is_singular() && !is_user_logged_in()) {
        $url = get_bloginfo("wpurl");
        $outer = '<link rel="stylesheet" href="' . $url . '/wp-content/plugins/myqaptcha/jquery/myQaptcha.jquery.css" type="text/css" />'."\n";     
        $outer.= '<script type="text/javascript" src="' . $url . '/wp-content/plugins/myqaptcha/jquery/jquery.ui.touch.js"></script>'."\n";
        $outer.= '<script type="text/javascript">var myQaptchaJqueryPage="' . $url . '/wp-content/plugins/myqaptcha/jquery/myQaptcha.jquery.php";</script>'."\n";
        $outer.= '<script type="text/javascript" src="' . $url . '/wp-content/plugins/myqaptcha/jquery/myqaptcha.jquery.js"></script>'."\n";        
        $outer.= '<script type="text/javascript">jQuery(document).ready(function(){if(jQuery("p:has(\'textarea\')").length>0) jQuery("p:has(\'textarea\')").before(\'<div class="QapTcha"></div>\'); else jQuery("#comment").before(\'<div class="QapTcha"></div>\');jQuery(\'.QapTcha\').QapTcha({disabledSubmit:true,autoRevert:true});});</script>'."\n";
        echo $outer;
    } 
}

function myQaptcha_preprocess_comment($comment) {
    if (!is_user_logged_in()) {
        if(!session_id()) session_start();
        if ( isset($_SESSION['30corg']) && $_SESSION['30corg']) {
            unset($_SESSION['30corg']);
            return($comment);
        } else {
            if (isset($_POST['isajaxtype']) && $_POST['isajaxtype'] > -1) {
                //header('HTTP/1.1 405 Method Not Allowed');   clove   find some error with ajax submit  2012-03-02
                die("请滑动滚动条解锁");
            } else {
                if(function_exists('err'))
                    err("请滑动滚动条解锁");
                else 
                    wp_die("请滑动滚动条解锁");
            } 
        } 
    } else {
        return($comment);
    } 
} 
add_action('wp_enqueue_scripts', 'my_scripts_method');
add_action('wp_footer', 'myQaptcha_wp_footer');
add_action('preprocess_comment', 'myQaptcha_preprocess_comment');

I double-checked the Qaptcha implementation guide and everything is set correctly. The only thing that could be wrong is maybe when the jQuery is executed...? I have uploaded my plugin project, just find the download button here and add it to your site if you want to test it.

Can you help me find out why the slider doesn't appear? There must be a mistake somewhere...

Edit: Here is a live link to the generated output: http://bogsorken.com/wpse/wordpress/?p=1

share|improve this question
    
The jQuery slider does not appear. Upon reviewing the source of the page, everything seems to be where it should. Feel free to download the plugin and try it out: filegiver.com/pub/126081/… –  Amanda Duke Nov 21 '12 at 17:30
    
Can you provide a live link to the generated output? That's usually the first place to start. –  Chip Bennett Nov 21 '12 at 17:39
    
Okay I tried it on a fresh install with original WP theme and the slider appears here but does not function, you can find it here: bogsorken.com/wpse/wordpress/?p=1 Try to drag the slider to see... –  Amanda Duke Nov 21 '12 at 18:05
    
I don't see a slider on that page. –  Chip Bennett Nov 21 '12 at 18:07
    
It is appearing for me using both Firefox and Safari. Nonetheless, I would not be surprised if it does not appear for you as it does not appear on my own theme. Obviously, there is an issue somewhere. –  Amanda Duke Nov 21 '12 at 18:10

1 Answer 1

up vote 1 down vote accepted

First things first, there is quite a bit of _doing_it_wrong() in the script enqueueing.

Don't override core-bundled scripts

Try removing this hook callback, and see if that fixes things:

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery ui' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
    wp_register_script( 'jquery ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js'); 
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery ui' );
} 

add_action('wp_enqueue_scripts', 'my_scripts_method');

Core-bundled scripts should never be over-ridden by Plugins or Themes. Replacing the core-bundled version with some other version can and will cause problems.

Enqueue Plugin-bundled scripts properly

These scripts should be enqueued via callback, hooked into an appropriate action:

function myQaptcha_wp_footer() {
    if (is_singular() && !is_user_logged_in()) {
        $url = get_bloginfo("wpurl");
        $outer = '<link rel="stylesheet" href="' . $url . '/wp-content/plugins/myqaptcha/jquery/myQaptcha.jquery.css" type="text/css" />'."\n";     
        $outer.= '<script type="text/javascript" src="' . $url . '/wp-content/plugins/myqaptcha/jquery/jquery.ui.touch.js"></script>'."\n";
        $outer.= '<script type="text/javascript">var myQaptchaJqueryPage="' . $url . '/wp-content/plugins/myqaptcha/jquery/myQaptcha.jquery.php";</script>'."\n";
        $outer.= '<script type="text/javascript" src="' . $url . '/wp-content/plugins/myqaptcha/jquery/myqaptcha.jquery.js"></script>'."\n";        
        $outer.= '<script type="text/javascript">jQuery(document).ready(function(){if(jQuery("p:has(\'textarea\')").length>0) jQuery("p:has(\'textarea\')").before(\'<div class="QapTcha"></div>\'); else jQuery("#comment").before(\'<div class="QapTcha"></div>\');jQuery(\'.QapTcha\').QapTcha({disabledSubmit:true,autoRevert:true});});</script>'."\n";
        echo $outer;
    } 
}

Try this instead:

function wpse73486_enqueue_myQaptcha_scripts() {
    if ( is_singular() && ! is_user_logged_in() ) {
        $url = plugin_dir_url( plugin_basename( __FILE__ ) );
        wp_enqueue_style( 'qapcha-jquery', $url . '/jquery/myQaptcha.jquery.css' );
        wp_enqueue_script( 'qaptcha-jquery', $url . '/jquery/myqaptcha.jquery.js', array( 'jquery' ), '', true );
        wp_enqueue_script( 'jquery-touch-punch' );
        // etc.
    }
}
add_action( 'wp_enqueue_scripts', 'wpse73486_enqueue_myQaptcha_scripts' );

Move script code to a file, so it can be enqueued

Create a new file, such as qaptcha.script.js, and put the custom script code inside. If the code requires both jQuery and PHP, put it inside a PHP file, such as qaptcha.script.php, so that you have access to WordPress functions within the file.

Use updated core-bundled script

WordPress 3.4 now ships with jquery-ui-touch-punch. You may need to enqueue/use it instead of the Plugin-bundled jquery-ui-touch library.

share|improve this answer
    
I just added your code and it did not make any difference. I do not understand what part of the code is not being executed, when I look through the source of the page, everything seems to be where it needs to. But the jQuery slider does not appear at all. Feel free to download my plugin and test it. –  Amanda Duke Nov 21 '12 at 17:28
    
How do I enqueue jquery-ui-touch-punch? –  Amanda Duke Nov 21 '12 at 18:37
    
Also, can you please expand your Plugin-bundled script code to include all of the myQaptcha_wp_footer code. I tried to do it myself but couldn't understand how to add the "var myQaptchaJqueryPage=" etc part. –  Amanda Duke Nov 21 '12 at 18:41
    
I would recommend putting any actual custom script code inside a foobar.js file, and then enqueueing that file the same way as the script libraries are enqueued. –  Chip Bennett Nov 21 '12 at 18:43
    
Try wp_enqueue_script( 'jquery-touch-punch' ). –  Chip Bennett Nov 21 '12 at 18:45

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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