Code interfering with code

  • Profile Image
    mistertidd
    Asked on November 22, 2011 at 05:12 PM

    Hi. If you see the code in the head of www.marktiddplumbing.co.uk, the jotform feedback form I want to appear on the index page (center far right of page) interfers with the other javascript on the index page (the slider and the sliding tabs fails to work).

    Can you help? I'd love the feedback form to be on this site.

    I can't see how I can call the JS file (containing the Jotform styles etc.) AND the code from the url provided.

    Thanks.

    Graeme

  • Profile Image
    allanftd
    Answered on November 23, 2011 at 02:37 AM

    I have checked your website but did not find any Feedback buttons there that we can test (you may have deleted it). I think there is conflict between the Feedback button and the jquery script on your webpage - which is a known issue already.

    Please refer to the following threads related to this issue for more information on how to resolve this conflict:

    http://www.jotform.com/answers/26824-JQuery-conflict-with-Feedback-Button
    http://www.jotform.com/answers/39649-The-form-is-blocking-my-script-to-work-properly-how-can-I-fix-this
    http://www.jotform.com/answers/45519-Form-feedback-button-breaks-the-jquery-plugin-in-my-website

    Let us now if you need further help.

  • Profile Image
    mistertidd
    Answered on November 23, 2011 at 09:20 AM
    Thanks for the reply. The latest word from Jotform, as per the latest link you sent me, is that there is no solution - period. Is this still the case? That was posted in September.
    Graeme
    Graeme Tidd - Yahoo account
  • Profile Image
    fxr
    Answered on November 23, 2011 at 05:40 PM

    JotForm uses the Prototype javascript framework, this is known to conflict with Jquery framework code which uses the $ abbreviation as selector. 

    JotForm have no plans to change its code base, so if you want to make Jquery code work with JotForm you have to make your code compatible. Jquery has a no.conflict method detailed here which should help in that process.

    --

    Looking at your page, I believe the two pieces of code causing the conflict are these:

    <script type="text/javascript" src="nivo/jquery.nivo.slider.js"></script>

    <script type="text/javascript" src="nivo/jquery.nivo.settings.js"></script>

     

    If you want to remove those, maybe in a test page which contains a copy of your original URLs code i.e http://www.marktiddplumbing.co.uk/  to see if JotForms code will then work, I may be able to edit those two scripts and provide you with code that doesnt conflict with JotForm.

     


  • Profile Image
    mistertidd
    Answered on November 25, 2011 at 04:53 PM

    Hi. Thanks for the reply and the offer to look at the code. I would use the feedback form on almost all sites I design, if it was not for this issue. The thing is, the feedback function works just fine - not issues with that at all. What is does though is stop the sliding tabs and Nivo slider working. So I can't remove the code for these as they will not work, which is the issue. However, I have removed the code for Nivo to see if this had an effect, but the sliding tabs still did not work, and vice versa. I appreciate it is what it is and that there probably is no solution, which is a shame as the feedback form is damn good, but the other code forms the foundation of this site and so wins on that front. G  

  • Profile Image
    fxr
    Answered on November 25, 2011 at 05:05 PM

    OK. Fair enough, I will just say there probably is a solution you just have to work hard enough to find it. 

     

    Just looking again at your code, i see two other scripts i missed on first look.

     

    <script type="text/javascript" src="nivo/jquery.nivo.slider.js"></script>

    <script type="text/javascript" src="nivo/jquery.nivo.settings.js"></script>

    <script type="text/javascript" src="js/tabs.js"></script>

    <script type="text/javascript" src="js/browser.js"></script>

     

    Conflicts probably exist in those 4 scripts. 

  • Profile Image
    mistertidd
    Answered on November 25, 2011 at 06:31 PM

    Thanks, FXR. I solved it! I went into the jquery.nivo.settings.js file (simply the control settings for the slider) and added: var j = jQuery.noConflict(); to line 1. I then changed the $ symbol to j (there were only two instances) and voila - sorted. I am very, very happy; now I can use a JotForm feedback form with the site - it's live. Thanks for all of your help. G

  • Profile Image
    mistertidd
    Answered on November 25, 2011 at 06:54 PM

    Actually, the JotFom form as position right of centre on the website does not work in Firefox - the submit button is not showing. Can you help? Works fine in IE and Chrome. Thanks. G