Colin Davis Colin Davis - 5 months ago 27
jQuery Question

Splitter.js won't work with new versions of jQuery

I'm using Splitter.js in a project.


The code is from http://methvin.com/splitter/
The specific JS is at http://methvin.com/splitter/splitter.js

When using jQuery v1.5.2, the code works correctly.

When I move to jQuery v1.7.2, the code fails, and gives a "Too Much recursion" error.
This also appears to happen when I use jQuery 1.6.2

Does anyone have a workaround for this?

I did find an (updated?) version of splitter.js at https://bungeni-exist.googlecode.com/svn-history/r188/xq-framework/trunk/db/framework/assets/bungeni/scripts/splitter.js but this doesn't appear to solve the problem.

Any advice would be appreciated.

Answer

I was experiencing this same issue. After looking around in the splitter.js file for a while, I came across this section of code:

// Resize event handler; triggered immediately to set initial position
    splitter.bind("resize", function(e, size){          
        // Custom events bubble in jQuery 1.3; don't get into a Yo Dawg
        if ( e.target != this ) return;

        ......

    }).trigger("resize" , [initPos]);

The "yo dawg" reference was the dead giveaway :)

Sure enough, after debugging it in Chrome, there is excessive recursion in this particular event handler function. The developer who wrote it attempted to resolve the issue, but for some reason the newer version of the JQuery library does not work as expected, and the escape condition is never met. From what I can tell, this particular piece of code is only used during page load to set the initial position of the splitter. I found that the splitter was still usable aside from the stack overflow, and the only reason I noticed the problem was because my javascript code after initializing the splitter wasn't running. If you have time, see if you can find out why this part of the code isn't working and post a fix. If you're in a hurry and don't mind duct-tape, put a try catch around the line of code where you call the .splitter() function. It seems to work fine in both Chrome 19 and IE 9.