What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by emilevdende on January 13, 2014 at 09:53 AM

    Hi,

    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):

    http://fairleadsapp.nl/demo/

    Form without the notification included (no JS error):

    http://fairleadsapp.nl/demo/en

     

    The forms are, apart from the language, identical.

     

    Thanks a lot!

    Emile

    Page URL:
    http://fairleadsapp.nl/demo/

    Screenshot
    js conflict collapse toggling not toggling javascript conflict
  • Profile Image

    Answered by EliezerN 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:

    <script>$.noConflict();</script>

    Please inform us if the issue still persists.

    Thanks

  • Profile Image

    Answered by emilevdende on January 13, 2014 at 11:44 AM

    Hi,

     

    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:

    http://fairleadsapp.nl/demo

     

    Do you have another suggestion?

    Thanks!!

    Emile

  • Profile Image
    JotForm Support

    Answered by EltonCris 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();

      $j(function(){

        // 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...

        });

            */

     

        $j(document).ready(function(){

          $j.gritter.add({

            // (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;

        });

      });

    </script>

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

    Regards!

  • Profile Image

    Answered by emilevdende on January 13, 2014 at 03:38 PM

    Hi EltonCris,

     

    Works like a charm!

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

     

    Cheers,

    Emile

  • Profile Image
    JotForm Support

    Answered by abajan 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
    JotForm Support

    Answered by KadeJM 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.