jQuery/Prototype conflict causing stack overflow error in IE8

  • Profile Image
    GlobeTechnical
    Asked on March 09, 2013 at 02:00 AM

    Hi,

    I'm wondering whether there's any suitable workaround to this problem yet. As I can see from looking through previous forum posts, quite a few people have experienced or are experiencing the same issue.

    For clarity's sake (and for anyone reading this who hasn't already read through all the other posts on the same topic) the problem is as follows:

    I have a JotForm form embedded on the 'Contact' page on my website. The form is hosted locally in order to reduce load times. When viewing the page in IE8, the page loads up ok but with errors indicated in the bottom left hand corner of the browser window. When the visitor tries to leave or refresh the page, they are presented with a 'Stack Overflow' error. Internet Explorer dev console seems to think that line 1830 of the prototype script is responsible.

    I also get a "'handler' is null or not an object" error @ line 5602 of the prototype script.

    I've done some reading up on this and it appears that the problem is (possibly) caused by a conflict between jQuery (a commonly used javascript library) and Prototype (another, less commonly used library - which JotForm forms use). It seems that jQuery uses the "$" (dollar) symbol as shorthand for "jQuery", while Prototype also requires use of "$". Both libraries cannot use the same namespace and so a conflict is born. There are various suggestions around the web and here on the JotForm forums to use the jQuery.noConflict(); command and then reference jQuery using "jQuery" instead of "$" in order to call jQuery functions...I have found that this does not work.

    Another suggestion I've spotted is to use a command that effectively tells the browser that there is no error - even though there is. This is not a viable solution. I have also tried embedding my form in an iframe but this messes up the formatting of my form.

    So...I would like to know if there are any other workarounds or fixes available (or planned) for this problem. failing that, please advise on the correct procedure for embedding a locally hosted JotForm form in an iframe in such a way that the formatting of my form will be unaffected - it is possible that I'm doing something wrong. Either way, I really need to get this working and I'm sure many others are in a similar position.

    Many thanks,

    Leon

  • Profile Image
    Welvin
    Answered on March 09, 2013 at 09:26 AM

    Hi Leon,

    The iframe method should always work and solved issues like this. Can you please try it again and let us know so we can check it also on our end.

    But before that, please kindly try doing this methods;

    1. Edit your doctype declaration into this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    2. Add this below the <title></title> tag of your webpage: 

    <!--[if lt IE 8]> <script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> <![endif]-->

    <!--[if lt IE 9]>  <script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->

     

    I hope this works.

    Thanks

  • Profile Image
    ardy0689
    Answered on March 09, 2013 at 10:59 AM

    The above suggestion by my colleague should fix the error. I have to agree with him that using IFRAME embed method will put the JotForm in a protected section to avoid interfering with the parent code. Thus, fixing conflicts along the way.

    Just in case it does not work a good workaround is still the jQuery.noConflict();

    I have reviewed your webpage and the best location for your jQuery.noConflict(); is to your head tag

    <head>
      <meta charset="utf-8" />
      <title>Globe Technical - Contact</title>
      <link rel="icon" type="image/x-icon" href="/GT Icon Black_Orange.ico">
      <link rel="stylesheet" href="Styles/StyleSheet.css" type="text/css" media="screen" />
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script type="text/javascript">
      jQuery.noConflict();
      </script>
    </head>

    Since you injected from the head it will be applied to all of the web page. Please do this along with the re-embed of the IFRAME method.

    Please let us know if this works.

    Thanks

  • Profile Image
    abajan
    Answered on March 09, 2013 at 11:47 AM

    @GlobeTechnical

    Exactly what function is jQuery performing on the Contact page? I downloaded the page and removed all of the jQuery references and haven't noticed any difference as yet. If there's no purpose for its existence there, just removing it would solve the problem.

  • Profile Image
    abajan
    Answered on March 09, 2013 at 11:48 AM

    Well, there was actually just one reference to jQuery.

  • Profile Image
    GlobeTechnical
    Answered on March 09, 2013 at 01:27 PM

    @Welvin - Webmatrix has the following to say about the !DOCTYPE declaration you suggested:

    "This document type is not supported. IntelliSense and validation for this document type will be based on HTML 5."

    I tried it anyway, along with the 2 IE hack scripts you suggested. Didn't work. Additionally, you're effectively commenting out both of those sections of code anyway. Did you want me to do something in particular with them before including them on my page?

    @ardy0689 - The iframe embed method you linked to doesn't explain how to get this working with a locally hosted form. If I change the url referenced in the embed code to point to the local copy of the form on my PC, the form does display but with all formatting removed. This is why I was asking in my OP whether there's a special trick to getting iframes working without messing with the formatting of the form.

    @abajan - I actually didn't provide a link to the live version of my website. While I certainly don't mind you taking a look, I should mention that the live site is still pointing to the form on your servers and not a locally hosted copy - since I haven't uploaded the changes yet (and wasn't planning to until I can get this issue sorted).

    You are correct...there is currently only one script that is calling jQuery. It is a necessary script, however, and I will likely add more functionality to the site that requires jQuery at a later date.

    Don't get me wrong - I really do appreciate your help...but the problem persists...happy days. Looking forward to your response.

    Many thanks,

    Leon

  • Profile Image
    ardy0689
    Answered on March 09, 2013 at 01:59 PM

    Hi Leon, I think you almost got the implementation with the IFRAME. Changing the URL to point on your local form is the right thing to do but you forgot to include the stylesheets on the page you are pointing.

    Have all the CSS codes that are related to your form to put into one stylesheet, we can call it  myform.css. You put all your customized  Jotform CSS codes in it.

    Next thing you need to do is to attach or link this on your local hosted copy.

    Let us say your local hosted form is embedded in http://mydomain.com/storage/jotform-static.html.

    You need to open this html file and have the form stylesheet attached to the head. This will be your proxy page.

    jotform-static.html:

    <head>
    ...some metadata
    ...some stylesheets links

    ...some external javascripts
    <link rel="stylesheet" target="_blank" href="Styles/myform.css" type="text/css" />
    </head>

     
    <body>
    .....your jotform normal embed code or the whole source code here
    </body> 



    Now all you need to do is embed an IFRAME in your contact us page pointing to your proxy page.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//mydomain.com/storage/jotform-static.html"frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script> 

    This should prevent your styles from being destroyed.
  • Profile Image
    GlobeTechnical
    Answered on March 09, 2013 at 03:46 PM

    @ardy0689 - but the stylesheet(s) are already included in the <head> of the page and my injected code is inline with the html, as follows:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html data-role="none"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="HandheldFriendly" content="true" /> <title>Form</title> <link type="text/css" rel="stylesheet" href="Form/css/styles/form.css?v3.1.1248"/> <link href="Form/css/calendarview.css?v3.1.1248" rel="stylesheet" type="text/css" /> <style type="text/css"> .form-label{ width:130px !important; } .form-label-left{ width:130px !important; } .form-line{ padding-top:1px; padding-bottom:1px; } .form-label-right{ width:130px !important; } .form-all{ width:496px; color:#423C42 !important; font-family:'Arial'; font-size:14px; } .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{ color:#423C42; } /* Injected CSS Code */ .form-all { margin: 0 0 0 0; Padding: 0 0 0 0; font-family: Arial, helvetica, sans-serif; } #id_21, #id_22, #id_23 { display:none; } select { width: 205px !important; -webkit-box-sizing: border-box; /*Safari/Chrome, other WebKit*/ -moz-box-sizing: border-box; /*Firefox, other Gecko*/ box-sizing: border-box; /*Opera/IE 8+*/ } .form-textbox { width: 205px !important; -webkit-box-sizing: border-box; /*Safari/Chrome, other WebKit*/ -moz-box-sizing: border-box; /*Firefox, other Gecko*/ box-sizing: border-box; /*Opera/IE 8+*/ } .form-textarea { width: 420px !important; -webkit-box-sizing: border-box; /*Safari/Chrome, other WebKit*/ -moz-box-sizing: border-box; /*Firefox, other Gecko*/ box-sizing: border-box; /*Opera/IE 8+*/ } #id_1, #id_17 { padding: 0 10px 10px 0 !important; } #id_4, #id_12 { padding: 0 10px 10px 0 !important; margin-bottom: -2px; } #id_3, #id_5, #id_7, #id_15, #id_14, #id_20 { padding: 0 0 10px 0 !important; margin-bottom: -2px; } #id_16{ width:175px; padding: 0 0 10px 0 !important; } /*-----------------*/ .form-captcha{ height: 72px; max-height: 72px; -min-height: 72px; } #id_20 { height:85px !important; max-height:85px !important; min-height:85px !important; margin-top: -2px9; /*--ie8-9 hack--*/ width:245px; padding: 1px 0 0 0 !important; } /*-----------------*/ #label_16 { display: none; } #input_16 { width: 130px !important } .form-label{ width: 200px !important; } .form-label-left{ width: 200px !important; } .form-label-right{ width: 200px !important; } .form-buttons-wrapper { padding: 50px 0 0 0 !important; } .form-submit-button-simple_orange{ border: 1px solid #D85D00 !important; -moz-box-shadow: inset 0px 1px 0px 0px #ffcc7a; -webkit-box-shadow: inset 0px 1px 0px 0px #FFCC7A; box-shadow: inset 0px 1px 0px 0px #FFCC7A; background: #FF8300; background: -moz-linear-gradient(top, #FAA51A 0%, #FF8300 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAA51A), color-stop(100%,#FF8300)); background: linear-gradient(top, #FAA51A 0%, #FF8300 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#ff8300', GradientType=0 ); } /* Injected CSS Code */ </style><link type="text/css" rel="stylesheet" href="Form/css/styles/buttons/form-submit-button-simple_orange.css?3.1.1248"/> <script src="Form/js/prototype.js?v=3.1.1248" type="text/javascript"></script> <script src="Form/js/protoplus.js?v=3.1.1248" type="text/javascript"></script> <script src="Form/js/protoplus-ui.js?v=3.1.1248" type="text/javascript"></script> <script src="Form/js/jotform.js?v=3.1.1248" type="text/javascript"></script> <script src="Form/js/calendarview.js?v=3.1.1248" type="text/javascript"></script> <script type="text/javascript"> JotForm.setConditions([{"action":[{"field":"3","visibility":"Show"}],"link":"Any","terms":[{"field":"1","operator":"equals","value":"Other"}],"type":"field"},{"action":[{"field":"7","visibility":"Show"}],"link":"Any","terms":[{"field":"17","operator":"equals","value":"Corporate"}],"type":"field"}]); JotForm.init(function(){ JotForm.initCaptcha('input_16'); JotForm.description('input_16', 'In order to combat spam and web-trawlers, we require that you enter the word shown in the space provided before clicking \'Submit\'. Thank you.'); JotForm.alterTexts({"alphabetic":"This field can only contain letters","alphanumeric":"This field can only contain letters and numbers.","confirmClearForm":"Are you sure you want to clear the form","confirmEmail":"E-mail does not match","email":"Please enter a valid e-mail address","incompleteFields":"There are incomplete required fields. Please complete them before proceeding.","lessThan":"Your score should be less than","numeric":"This field can only contain numeric values","pleaseWait":"Please wait...","required":"This field is required.","uploadExtensions":"You can only upload following files:","uploadFilesize":"File size cannot be bigger than:"}); }); </script> </head> <body>...all sorts of interesting form-related html code here </body>

    I have not changed the code on this page after downloading it other than to change the directories for the scripts so that they point to my local copies.

    Can you spot where I'm going wrong?

    Thanks,

    Leon

  • Profile Image
    EltonCris
    Answered on March 10, 2013 at 06:08 AM

    @Leon

    Try this,

    On your form source code, find these scripts

    <script src="Form/js/prototype.js?v=3.1.1248" type="text/javascript"></script>

    <script src="Form/js/protoplus.js?v=3.1.1248" type="text/javascript"></script>

    <script src="Form/js/protoplus-ui.js?v=3.1.1248" type="text/javascript"></script>

    <script src="Form/js/jotform.js?v=3.1.1248" type="text/javascript"></script>

    <script src="Form/js/calendarview.js?v=3.1.1248" type="text/javascript"></script>

    and replace it with this.

    <script src="//cdn.jotfor.ms/min/g=jotform?3.1.2002" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init();

    </script>

    You can check my demo on this page using your IE8 browser. https://shots.jotform.com/elton/fix_error_ie_189966.html

    The browser still indicates an error but it's no longer an issue with JotForm, it's probably with the NavArrow2.js .default subproperty.

    Thanks!

  • Profile Image
    GlobeTechnical
    Answered on March 10, 2013 at 10:41 PM

    @EltonCris - ...but if I do that then surely we're back to pulling the form (or at least the bulk of it) down from your servers? I've chosen to host the form locally for performance reasons. Otherwise the page takes 1-2 seconds to load up.

    How about if I were to copy the contents of 'g=jotform' (which appears to be the script you're calling), paste them into a new .js file and put that in my local 'Form' folder and then link to it instead of linking to an external site? Would that work? If not, is it possible for me to download and keep a local copy of whatever other files/scripts are involved?

    Either way, I'd be curious to know a little background as to what this alternative script does, if possible.

    Re: '.default' error - thanks for the heads-up, I'm aware of this error.

    Regards,

    Leon

  • Profile Image
    EltonCris
    Answered on March 10, 2013 at 10:50 PM

    Hi Leon,

    Yes, you can do that. Copy the js code and save it as .js file. Upload it to your server and use it on your page.

    Example.

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

    <script type="text/javascript">

    JotForm.init();

    </script>

    Well I would say it boost up the loading process since they are loaded all at once and it's more updated I guess than on the downloaded source. Give it a try and let us know what your results are. Thanks!

  • Profile Image
    GlobeTechnical
    Answered on March 11, 2013 at 04:10 AM

    Hi,

    That seems to work.

    Thanks for your help.

  • Profile Image
    EltonCris
    Answered on March 11, 2013 at 06:46 AM

    @GlobeTechnical

    Glad it helps!

    Should you need any assistance with JotForm, feel free to reach us here anytime.

    Cheers!