JS errors in Jotform script when custom script is added to source - form collapse not toggling

  • Profile Image
    Asked on January 13, 2014 at 09:53 AM


    I just managed to include some sort of notification on my form, telling the user that the form is ready to use.

    The way I did this, is by using a jQuery plugin called Gritter and I included it to run everytime the document finishes loading (document.ready).


    Now it currently works like it should, however one of the Jotform scripts is giving an error. My technical knowledge is not too advanced; I can read the HTML/CSS/JS a bit, but chances are that I made a rookie mistake :)


    Can you please take a look at the source to see if you know why I'm getting the JS errors (see attachment) when I inspect the page? The errors are actually not breaking the form (except the yellow highlighting does not work), but I don't feel comfortable with errors :)


    Form with the notification included (JS error):


    Form without the notification included (no JS error):



    The forms are, apart from the language, identical.


    Thanks a lot!


  • Profile Image
    Answered on January 13, 2014 at 11:07 AM

    Upon checking your form I found that the first form collapse will not open. To resolve the issue, please use the next nonconflict function. Insert it just after the form source code and before your jQuery plugin as shown in the image:


    Please inform us if the issue still persists.


  • Profile Image
    Answered on January 13, 2014 at 11:44 AM



    Thanks for your quick reply!

    I added the noconflict function just like you say, but it still does not work. Indeed, the form collapse broke and an extra JS error is shown.

    You can see it here:



    Do you have another suggestion?



  • Profile Image
    Answered on January 13, 2014 at 12:57 PM

    Hi Emile,

    You can try the following to stop the conflict between the prototype script from the form and the jQuery script on your page.

    ** The highlighted parts are the ones changed.

    <script type="text/javascript">

    var $j = jQuery.noConflict();


        // global setting override


        $.extend($.gritter.options, {

            class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)

            position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right

          fade_in_speed: 100, // how fast notifications fade in (string or int)

          fade_out_speed: 100, // how fast the notices fade out

          time: 3000 // hang on the screen for...






            // (string | mandatory) the heading of the notification

            title: 'Voer een nieuwe lead in',

            // (string | mandatory) the text inside the notification

            //text: 'Je kunt nu een nieuwe lead invoeren',

            // (string | optional) the image to display on the left

            image: 'images/checkmark.png',

            sticky: false,


          return false;




    Here's a working demo: http://shots.jotform.com/elton/workaround/noconflict_316574.html


  • Profile Image
    Answered on January 13, 2014 at 03:38 PM

    Hi EltonCris,


    Works like a charm!

    Thank you and EliezerN for the great service, as always!




  • Profile Image
    Answered on January 13, 2014 at 04:14 PM

    We're very happy to hear that, Emile!

    If ever you need assistance with anything else JotForm related, please let us know.

    Ciao for now :)

  • Profile Image
    Answered on September 12, 2014 at 05:01 PM

    Thank you for the additional comments about my colleagues previous solutions.

    If you end up needing help or have more questions about anything just let us know via a new thread.