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

Posted on Feb 25, 2014 in General  | No comments

We use SurveyGizmo ( 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.