Jquery conflict problem

  • Profile Image
    positpro
    Asked on December 18, 2013 at 09:28 PM

    Hi Guys, I have a jquery conflict problem.

    it seems that this line: <script src="js/prototype.js?v=3.1.1444" type="text/javascript"></script>

    ... Is in conflict with my dropdown menu, and the prettyphoto extension.

    Is there a way to fix it?

     

    Thank you

  • Profile Image
    EltonCris
    Answered on December 19, 2013 at 06:10 AM

    Hi,

    Sorry but I find this a little bit difficult. I think I have already tried all the solutions suggested here, but still couldn't make both to work at the same time. I will try to dig more and get back to you with updates later today.

    Thanks!

  • Profile Image
    positpro
    Answered on December 19, 2013 at 08:31 AM

    Fantastic, thank you very much.

    I did try this too, but i'm not an expert.

  • Profile Image
    EltonCris
    Answered on December 21, 2013 at 05:53 AM

    @positpro 

    I am still looking into this, FYI. I'll make sure to bring a solution on my next reply, hopefully. Thank you for patiently waiting!

  • Profile Image
    positpro
    Answered on December 21, 2013 at 10:37 AM

    No problem, thank you for your good support

  • Profile Image
    EltonCris
    Answered on December 22, 2013 at 03:11 AM

    Hi there,

    Sorry for the delay. Finally found a fix after checking all your jQuery extensions.

    In order for the dropdown menu to work and to fix the conflict, you have to make a little changes on this file: http://orangewebdesign.ca/positpro/js/superfish.js

    At the bottom part, you'll see this code:

    $(function(){

    $('.sf-menu').superfish()

    })

    Then, replace it with the following:

    var $j = jQuery.noConflict();

    $j(function(){

    $j('.sf-menu').superfish()

    })

    Assigning a new variable for the alias $ should fixed it. You can also replace the other plugins like the pretty photo so it does not conflict with the form. Example:

    $j("a[rel^='prettyPhoto']").prettyPhoto();

    Here's a working demo: https://shots.jotform.com/elton/jqueryConflict_test.html

    Thanks!

  • Profile Image
    positpro
    Answered on December 22, 2013 at 09:43 PM

    Good thank you very much.

    I'm not sure I understand the way to do it, but I copied and pasted the demo, and now it works.

    You guys rock!!!

  • Profile Image
    EltonCris
    Answered on December 23, 2013 at 12:45 AM

    @positpro 

    You're welcome!

    Happy holidays! :)

  • Profile Image
    profileweb
    Answered on February 03, 2015 at 05:43 AM

    This is not a fix of your form it is just unacceptable from JotForm that is causes issues like this that mean I have to rewrite a lot of my code for every site I do. Very frustrating and generally poor development by Jotform
  • Profile Image
    labphoenix
    Answered on April 09, 2015 at 02:30 PM

    You simply need to run whatever version of Jquery you're running in no conflict mode. Here's some instructions. 

     

    https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page

  • Profile Image
    developer53
    Answered on July 01, 2017 at 05:25 AM

    Hello,

    My jotform is conflicting with my other jquery files in my site

     please check on mobile version only. I am embedding jotform source code not only single jquery file to call. Menus, login icon not showing which is caling from custom jquery and many other things conflicting.
  • Profile Image
    Jan
    Answered on July 01, 2017 at 02:18 PM

    @developer53

    This is an old thread. I created a separate thread for your issue. Please wait for my reply on this thread: https://www.jotform.com/answers/1189195.

    Thank you.

  • Profile Image
    developer53
    Answered on July 01, 2017 at 02:43 PM
    Thank you.
    I will wait for your response.
    ...