Fixing JSON Parse Error in WordPress Plugins

If you write WordPress plugins and make AJAX requests, you may be familiar the dreaded Javascript error: SyntaxError: JSON Parse Error: Unrecognized token '>'

SyntaxError: JSON Parse Error: Unrecognized token '<'

Why? Why!?!

What it means is that the response your code expected is screwed up because a plugin barfed PHP warnings into the admin-ajax.php ventilation system.

When WP_DEBUG is on, admin-ajax.php responses can include junk HTML output from PHP warnings, like:

<br />
<b>Notice</b>:  Undefined offset: 0 in
<b>/wp-content/plugins/im-gonna-break-ur-ajax.php</b> on line
<b>666</b><br />

The fix? Catch exceptions, then exceed expectations

The way to fix this is to wrap the jQuery.parseJSON() function in try/catch. That will make sure that the code doesn’t fully blow up.

try {
  jQuery.parseJSON( response );
} catch( exception ) {
  console.log( exception );
}

That will prevent your code from breaking, but it won’t make your code work.

The cause of the code breaking is the junk HTML at the beginning on the AJAX response. So, what we want to do is:

  1. Check for a valid JSON response
  2. If the JSON is invalid, strips all characters until finding a JSON-style opening of {".
  3. Check the newly stripped string to see if that is valid JSON
  4. If valid, return the JSON. If not, return an error message.

Here’s the code to achieve that:

Let me know what you think, and please fork the Gist if you have any improvements!

Toggle WordPress Help Menu

It’s not possible (as far as I know) to currently link directly to a help tab in WordPress. Here’s the jQuery solution I cooked up:


/**
* Toggle the WP help menu tab by linking to the tab id
*
* The anchor must have a `rel` of `wp-help`
*/
$(‘a[rel=”wp-help”]’).click(function() {

// Open the help wrapper if it’s not open yet
if($(‘#screen-meta’).is(‘:hidden’)) {
$(‘#contextual-help-link’).click();
}

// Click on the tab link inside the help wrapper
$(‘#screen-meta a[href*=”‘ + $(this).attr(‘href’).replace(‘#’, ”) +'”]’).click();

// We’re just anchor linking; don’t go anywhere
return false;
});

If the tab’s ID that you pass to `$screen->add_help_tab()` is `example-plugin`, then you could create a link like this: `View the help docs`.

jQuery validator annoyances

Null or Not an Object my ASS!

For all of you that use jQuery and use the Validator plugin, you may have been getting this error in Internet Explorer 6:

jQuery.Validator is null or not an object

This code will break any jQuery below your validation code, and will thoroughly piss you off.

The fix is simple: use the minified version (jquery.validate.min.js) javascript file, instead of the packed version (jquery.validate.pack.js).

Simple Vertical Align Plugin for jQuery

Everything in it's right place.
Sometimes you may want to vertically align a block item, but the CSS-only vertical aligning methods don’t make you feel clean.  Personally, I hate having to style items as a table/table cell to get them to vertically align in Internet Explorer.

jQuery to the rescue.  Using a jQuery vertical align snippet as my base code, I modified it to be a jQuery plugin that will allow you to use the function in the jQuery chain. Continue reading “Simple Vertical Align Plugin for jQuery”