0

I need to know if there is a way to prevent scripts from inadverntly calling functions in jQuery.

Basically, I'm calling jQuery in the page head on each page since it's required for certain functionality across the whole site. However, on my 'Contact' page, I have embedded a contact form that I built using JotForm. The form is hosted locally in order to reduce load times.

For the most part (in all modern browsers) this doesn't cause any issues - but in IE8 I get a stack overflow error when trying to leave the page. It seems that this is due to some code in the form inadvertently calling jQuery functions in ways that make no sense.

So what I need is to exclude the form-containing div and all of it's contents from being able to call jQuery functions.

I'm hoping that this is doable with a relatively simple line of code that I can throw in before the form. Modifying the form scripts is beyond my level of competence at this point. Any advice appreciated.

FYI - It's a PHP site. Not sure if this makes any difference?

Tunaki
  • 132,869
  • 46
  • 340
  • 423
OCD
  • 167
  • 1
  • 3
  • 9
  • It seems unlikely that the mere presence of jQuery is causing the problem. jQuery will only act on the form if there's a statement in your code that makes it do so. – Beetroot-Beetroot Mar 09 '13 at 02:41
  • @Beetroot-Beetroot - I just realised this. Question updated. – OCD Mar 09 '13 at 02:46
  • Also "disable jQuery immediately before the form and re-enable it immediately after" reveals a possible misunderstanding of how jQuery interacts with the DOM. – Beetroot-Beetroot Mar 09 '13 at 02:47
  • Agreed. I'm definitely not an expert. Still, the problem persists and I need to find a solution... – OCD Mar 09 '13 at 02:49
  • Leon, nothing can happen inadvertently except possibly a `$` conflict. Try experimenting with the position of the `` tag with respect to the `` tag. See if it makes a difference. – Beetroot-Beetroot Mar 09 '13 at 02:56
  • @Beetroot-Beetroot: There could also be a foreach on the `window` object that does silly things. – Dave Mar 09 '13 at 03:03
  • @Dave, seems unlikely but yes, possible, though I would class that sort of thing as unsafe rather than inadvertent. – Beetroot-Beetroot Mar 09 '13 at 03:08

3 Answers3

0

Immediately after loading jQuery, do this:

myJQuery = jQuery.noConflict(true);

now use myJQuery instead of jQuery or $ (you could of course call it something shorter). noConflict will remove jQuery and $ from the global scope (reverting them to what they used to be), but will keep any fiddling it's doing to the events, etc.

You can also use this style:

(function($){
    // all code here
})(jQuery.noConflict(true))

which keeps it named $ for convenience.

Dave
  • 44,275
  • 12
  • 65
  • 105
  • Dave, I'm puzzled. Reading the question again, why would a `$` conflict only affect IE8? – Beetroot-Beetroot Mar 09 '13 at 03:32
  • @Beetroot-Beetroot IE8 has a very small stack compared to real browsers, so it's possible that some bizarre function is actually exhausting it. Maybe there's something which iterates through all objects when the user leaves the page, for some silly reason. – Dave Mar 09 '13 at 03:37
  • @Beetroot-Beetroot (also, since I have nothing else to go on, I'm simply answering the question as it was posed. I'm not saying this will actually solve his problem) – Dave Mar 09 '13 at 03:38
  • Cool. I didn't know about IE8 having a small stack. Sounds a far more plausible explanation than a `$` conflict. – Beetroot-Beetroot Mar 09 '13 at 03:51
  • @Beetroot-Beetroot You might be interested in my source for that comment then: http://stackoverflow.com/a/7828803/1180785 – Dave Mar 09 '13 at 03:57
  • Dave, thanks for that. All we need now is for the OP to run some tests and/or post some code. We don't have enough to go on yet to provide a definitive solution. – Beetroot-Beetroot Mar 09 '13 at 04:09
  • I've tried the noConflict solution to no avail. It's possible that I'm doing something wrong but it doesn't seem to have any effect. which code would you like posted? happy to provide it. – OCD Mar 09 '13 at 04:13
  • It seems there's something more complicated going on, possibly too complicated to dump on StackOverflow. You should try debugging it yourself first by looking through code and using console.log, firebug, etc. If you can narrow it down, I'd suggest starting a new question. – Dave Mar 09 '13 at 04:17
  • Oh dear. Well, I guess there's nothing for it. I have no idea where to start looking but I guess it'll be a learning experience. Plenty of other people have had the same problem with JotForm forms and jQuery but, looking through their forums, JotForm support are unable to provide a solution - it's simply regarded as a 'known issue'. With that in mind, I doubt I'll be able to debug it but I guess it's worth a shot. Thanks for you help. – OCD Mar 09 '13 at 04:22
  • If it's a known issue with no listed workaround, it means there's probably no easy answer. You might need to wait for the library maker to fix a rather nasty bug, although you might be able to help them track it down. Also updating to the latest jQuery (if you're not using it already) could be worth a shot. – Dave Mar 09 '13 at 04:29
0

Dave's answer is preferable, but if you don't need jQuery for the contact page, you could always set: 

jQuery = null; 
$ = null;
pdoherty926
  • 9,895
  • 4
  • 37
  • 68
  • Unfortunately, I do require jQuery for all pages since I'm using it to affect the navigation menu. For the sake of experiment, where would you suggest throwing this in? immediately after calling jQuery? just before the form? somewhere else? I realise that it's difficult for you to provide suggestions without being able to see the page in question. – OCD Mar 09 '13 at 07:25
  • Somewhere specific to the contact page, before the form's js is included. – pdoherty926 Mar 09 '13 at 14:58
0

The noConflict solution wouldn't work for me.

I ended up getting around this issue by embedding the form on a separate html page and then calling that page using an iframe.

Thanks for the suggestions.

OCD
  • 167
  • 1
  • 3
  • 9