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

    Any word on when jotforms script won't break my other jQuery functions?

    Asked by grafixdiva on November 14, 2011 at 04:30 PM

    Love you guys and the service, but I really really hate that fact that when I include protoplus script it breaks all of my other jquery functions.  I tried using the "no conflict" but that didn't work.

    The iFrame is not the best solution for me as I need to have access to the CSS, and I don't want a lag when the page loads, and it waits for the iframe to load.

    Additonally, I do have feilds that need to be reuquired.  If I do not include that script, my other jquery functions work, but it does not make the fields requiered.

    Seems like this is a pretty big issue...and a more and more sites are utilizing jQuery functions, I am hoping that you are working on a solution, or have one easily availble.

    Thanks.

  • Profile Image

    Answered by fxr on November 14, 2011 at 04:55 PM

    The developers are aware of the issue, but JotForm has been coded to use the Prototype framework, JotForm contains thousands of lines of code. I am sure you understand its a significant, if not impossible task for the developers to rewrite JotForm to fix any and all conflicts with Jquery scripts.  

    It really is a more straightforward solution to either use iFrames or work with, the admittedly frustrating, Jquery.noConflict to make your scripts work with JotForms. 

    Is there much jquery code in your page? 

  • Profile Image

    Answered by grafixdiva on November 14, 2011 at 04:59 PM

    Thanks for the quick reply.  On this particular page the main jquery function is for my nav sprites...you can preview it here, but note that I have currently taken off the script that creates conflict...

    http://pixowl.net/OverheadDoorLou/contact.html

    Thanks again for the prompt responce

  • Profile Image

    Answered by fxr on November 14, 2011 at 05:08 PM

    Would you be able to create me a new page, with the same content, but include the piece of jquery that 'breaks' JotForms code (i assume?) e.g something like

    http://pixowl.net/OverheadDoorLou/contact_with_jquery_conflict.html

    Without wanting to promise anything, I will spend a bit of time trying to rework the jquery to make it work with jotforms code.

    Provide me with as much detail as you can, much like you have already done so, on where exactly you think things are breaking down. 

     

  • Profile Image

    Answered by grafixdiva on November 14, 2011 at 05:16 PM

    I understand no promises :)  Thanks so much for taking the time to review...

    http://pixowl.net/OverheadDoorLou/contact_jquery_conflict.html

     

    The main thing I'm concerned about on this particular page is the nav sprites...I have a small amount of jquery code that ceates a pretty hover effect on the navigation.  However, it also utilizes jquery easing so...maybe it's in there???

    Thanks again so much for your time & effort.

  • Profile Image

    Answered by fxr on November 14, 2011 at 06:59 PM

    jquery.easing shouldnt be the problem. It doesnt use the $ alias that is normally the cause of conflicts with prototype. 

    Its seems your sprite.js is causing the problem.

    Please try this code in its place: http://pastie.org/2864514

    (remember to back up your old version, or save this one as a new name. )

    Its quite hard to test this completely offline with bits of your page copied to my hard drive, but it does seem to work ok, i.e validation and your pretty menu navigation. 

    Test it yourself & let me know. 

  • Profile Image

    Answered by grafixdiva on December 19, 2011 at 02:50 PM

    Sorry it took forever to reply to this...had to put this project down for a bit.

    YOU ROCK!!!!

    Thanks oh so much for your help...above and beyond realy to help with my code.  Now that I have that to use as an example, I will remember the solution for the future.

    Thanks again so so much!

     

    All the best...

  • Profile Image

    Answered by fxr on December 19, 2011 at 04:12 PM

    Thats really good to hear. Appreciate you taking the time to let me know. 

    Some of these jquery conflicts are easier to 'fix' than others :)

    All the very best.

  • Profile Image

    Answered by m1cakes on August 07, 2012 at 03:55 PM

    I am having the same issue as grafixdiva.

    The script that is breaking for me when I add the proto script is the following:

    (this is a simple mouseover to highlight text in the menu and swap images)

        $(document).ready(function() {
            $("img.rollover").hover(
            function() { this.src = this.src.replace("_off", "_on");
            },
            function() { this.src = this.src.replace("_on", "_off");
            });
           
           
            //rollover script for the text
            $("a").mouseover(function () {
                $(this).css("color","white");
              });
            $("a").mouseout(function () {
                $(this).css("color","#000");
              });
            $(".copyrightContainer a").mouseout(function () {
                $(this).css("color","#aaa");
              });
             
             
           
             
        });

  • Profile Image

    Answered by fxr on August 07, 2012 at 06:26 PM

    Hi.

    Its quite hard for me to test this but can you try this code instead?

     

    $.noConflict();

     jQuery(document).ready(function() {

            $("img.rollover").hover(

            function() { this.src = this.src.replace("_off", "_on");

            },

            function() { this.src = this.src.replace("_on", "_off");

            });

     

     

            //rollover script for the text

            $("a").mouseover(function () {

                $(this).css("color","white");

              });

            $("a").mouseout(function () {

                $(this).css("color","#000");

              });

            $(".copyrightContainer a").mouseout(function () {

                $(this).css("color","#aaa");

              });          

        });

     

    It would be useful to see the webpage this code and JotForm is on to help troubleshoot if this change doesnt seem to work.