FIX: Using an embedded SurveyGizmo Survey on a page with jQuery

Posted on Feb 25, 2014 in General  | No comments

We use SurveyGizmo (www.surveygizmo.com) with many of our clients to provide author generated forms and surveys.  It has lots of great features, and one terribly annoying one.  The main mechanism for deploying a form or survey is to use some JavaScript automatically generated by SurveyGizmo to download and embed the form or survey in the host page AJAX-style.  Super cool, I hear you say.  And I agree. But…

Unfortunately SurveyGizmo use a JavaScript function “$” that is an internal system function.  The astute amongst you have noticed the “$” function is used by many other JS frameworks, notably jQuery, becoming increasingly popular and soon to be embedded in Visual Studio 2010 (or so I am led to believe).

The upshot is that all your jQuery defined after your survey is embedded on the page will break.  That’s bad.

I was advised by SG support to use the jQuery.noConflict() function, which makes SG work properly (that’s good) but it also means all your jQuery now uses a function called “jQuery” in place of “$” (that’s bad… again).

We devised a workaround that lets everybody play nice and it seems to work for us so far – thusly:

Immediately before the SG injection script add the following:

<script> var JQ$ = $; </script>

Add SG injection script as normal

Immediately after the SG injection script add the following:

<script> $ = JQ$; </script>

Basically we keep a copy of the jQuery “$” function in a variable and restore it to its original value when the SG scripts have finished.  I do this rather than using “var $ = function( selector, context ) { return new jQuery.fn.init( selector, context ); }” because jQuery may change their initialisation parameters at a later date and I prefer to not have to update my code.