Gravity Forms Picatcha error with WordPress 3.6

In a recent upgrade of a site for a client I ran into a problem with Gravity Forms. The contact page would not show up and a JavaScript error was thrown.

TypeError: jQuery(...).textareaCount is not a function

. After some digging around and debugging it turns out that the problem was with the Gravity Forms Picatcha Add-On.

Current setup

The main components that are in play:

  • WordPress 3.6
  • Gravity Forms 1.7.7
  • Gravity Forms Picatcha Add-On 1.2

Diagnosis

The error message came from a script that was embedded in HTML. The (partial) code that threw the message

jQuery('#input_1_6').textareaCount( ....

This code is inserted when you have a field where you limit the amount of characters a visitor can type.

It’s clear from the error message that jQuery is loaded but it can’t find the function which is a jQuery plugin provided by Gravity Forms.

Time pull up Firefox+Firebug for some JavaScript debugging.

I placed a break point on the line where it broke, reloaded the page and start stepping through the JavaScript and after the second step I ended up in a function called

picatcha_add_jquery

. Hmmm, why am I in a function with a name like that, I already loaded jQuery. The stack revealed I was in a JavaScript file loaded from the Picatcha website. I opened the file and saw the following code

/**************************JQUERY LIBRARY*************************************************/
/*!
 * jQuery JavaScript Library v1.9.1
 * http://jquery.com/
 *
 * Copyright 2012, jQuery Foundation, Inc.
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 */
 // var jQuery;
 if(!window['jQuery']){
     //if jQuery does not exist
     picatcha_add_jquery();
 }else{
     //jQuery Exists, check the version number
     if (jQuery.fn.jquery<'1.7'){
         picatcha_add_jquery();
     }else{
         $P = jQuery;
     }
 }

And there it was

if (jQuery.fn.jquery<'1.7')

WordPress 3.6 runs jQuery 1.10.2 and if you check if 1.10.2 is smaller than 1.7, it will say it is. I love version comparisons, no matter what language.
The function picatcha_add_jquery is just jQuery 1.9.1.

To make sure I removed the Picatcha check from the form, and sure enough the page loaded correctly.

So now that we found the cause of the problem, what about a fix.

The solution

We need to edit the Picatcha JavaScript file so it won’t load jQuery, but the file is loaded from the Picatcha site.
I downloaded the script locally to make the changes. As I always load jQuery I don’t need the check to see if jQuery is loaded, and I sure don’t need to have jQuery 1.9.1 in the file, so I replaced the above code with

 // var jQuery;
$P = jQuery;

and I also removed the function picatcha_add_jquery.

Now how do we load this script instead of the remote file.

The Picatcha JavaScript file is loaded by the Gravity Forms Picatcha Add-On by the following functions

//Enqueue the picatcha script on the front end
add_action("gform_enqueue_scripts", array('GFPicatcha',"enqueue_scripts"), 10,2);

public static function enqueue_scripts($form, $ajax){

  if(!is_array(rgar($form, "fields")))
    return;

  $protocol = GFCommon::is_ssl() ? "https" : "http";

   //cycle through the fields to see if picatcha is being used
   foreach( $form['fields'] as $field){
    if( ($field['type']=='picatcha') ){
      wp_enqueue_script("gform_picatcha_script", "{$protocol}://api.picatcha.com/static/client/picatcha.js", array("jquery"), self::$version);
      wp_enqueue_style("gform_picatcha_style", "{$protocol}://api.picatcha.com/static/client/picatcha.css", null, self::$version);
      break;
    }
  }
}

I really don’t want to hack the Gravity Form files so I came up with the following solution.

In the theme functions.php I added the following code:

add_action("gform_enqueue_scripts", 'action_GF_enqueue_scripts', 99, 2);

function action_GF_enqueue_scripts($form, $ajax)
{
	if(!is_array(rgar($form, "fields")))
		return;

	//cycle through the fields to see if picatcha is being used
	foreach( $form['fields'] as $field){
		if( ($field['type']=='picatcha') ){
			wp_dequeue_script("gform_picatcha_script");
			wp_deregister_script("gform_picatcha_script");
			wp_enqueue_script("gform_picatcha_script", get_stylesheet_directory_uri() .'/scripts/picatcha.js', array("jquery"),false);
			break;
		}
	}
}

Line 1: Enqueue my function as the last one.
Lines 11-12: Remove the call originally set by the Gravity Forms Picatcha Add-On
Line 13: Enqueue the modified script, that I now serve locally.

Result

Everything is back to working again. I hope Picatcha and/or Rocketgenius will look into this, as I’m sure I’m not the only one with this problem.

This article is filed under the categories Development » WordPress » Code Snippet and has the following tag associated with it: .
Showing 3 comments
Skip to the end and leave a comment.
  1. Luis

    I have the same problem! Thanks for the info!

  2. Ben

    Life saving! Thanks so much.

  3. Steven Munro

    You absolutely saved me too. I was about to go absolutely nuts over this.

  4.  

Leave a comment

For questions and/or support consider using the forums.