Search jQuery

jQuery Forum

noConflict/namespace issue in IE

in Using jQuery • 8 years ago

Hello all, I am trying to do some pretty basic noConflict/namespacing of jQuery. As this article suggests, I am trying to assign jQuery to a variable in case our widget is deployed to another page: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

It is working great in all browsers EXCEPT Internet Explorer (all versions 6.0+, as far as I can tell.) Here is a URL that you can use to see the problem. If you open this URL in Firefox, Safari or Chrome and use Firebug or Web Inspector, no jQuery issues.

https://www.healcode.com/manager/schedule_widgets/zn1ixgg/preview

(To see the jQuery in our source code, you need to use Firebug or Element Inspector, as it is loaded as a Javascript widget.)

But here is an excerpt of our Javascript code:

var hcjq = jQuery.noConflict(true);

</script>

This line generates the following error in IE:

'jQuery' is undefined

Any reason you can think of for this? Thanks so much for your help.

ajit

Replies(9)

Kevin B

Re: noConflict/namespace issue in IE

8 years ago

Open the page up in google chrome and check the console. Are you getting any warnings about jquery.js being transferred as some weird mime-type, such as text or html? I've been seeing a lot of that lately.

-- Kevin

ajitdsa

Re: noConflict/namespace issue in IE

8 years ago

No such warning in Chrome. Also, you could have discovered this yourself using the text URL I had pasted above:

https://www.healcode.com/manager/schedule_widgets/zn1ixgg/preview

thanks for your response.

whitefrog

Re: noConflict/namespace issue in IE

8 years ago

<script src="https://s3.amazonaws.com/assets.healcode.com/javascripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">var hcjq = jQuery.noConflict(true);</script>
<script src="https://s3.amazonaws.com/assets.healcode.com/javascripts/jquery-ui.min.js" type="text/javascript"></script>

Try changing the order. IE needs to have the no conflict loaded prior to UI libraries.

frizbian

Re: noConflict/namespace issue in IE

8 years ago

It is really simple. You need the jQuery to load before you start using it. When you document.write it all, it all gets parsed at the same time and not in order. Have it write a reference to another file that has the noConflict in it. That way it has to complete the parse of the jQuery before it tries to use jQuery.

test.html

<!DOCTYPE HTML>

<html><head><meta charset="utf-8"><title>Untitled Document</title></head><body>

<p> Nothing new </p>

</body></html>

test.js

document.write('<script src="https://s3.amazonaws.com/assets.healcode.com/javascripts/jquery.js" type="text/javascript"></script><script src="https://s3.amazonaws.com/assets.healcode.com/javascripts/jquery-ui.min.js" type="text/javascript"></script><script type="text/javascript" src="test1.js"></script>');

test1.js

document.write('<script type="text/javascript">var hcjq=jQuery.noConflict(true); hcjq("p").html("That worked"); </script>');

vivojack

Re: noConflict/namespace issue in IE

8 years ago

Hi ajit,

One of your sales guys asked me to take a look at this so I checked your link and it seemed to be working fine in IE9. I did a little testing and I think the problem is that you are using the "true" parameter in your no conflict call. By passing the true parameter you are making the jQuery variable unavailable to jQuery libraries. You can read about it here. http://api.jquery.com/jQuery.noConflict/ So my guess is that subsequent to your no conflict call you are calling a library which is trying to use the jQuery variable which you have left undefined. So change your var hcjq = jQuery.noConflict(true); line to var hcjq = jQuery.noConflict(); and try again. I think that should clear up your problem.

ajitdsa

Re: noConflict/namespace issue in IE

8 years ago

Hi guys, thanks so much for all the responses. Some of these answers are on the right track, so I appreciate the help. So here's a couple things to note:

vivojack: I do need to use the (true) parameter in the jQuery.noConflict call because we are using jQuery inside of a Javascript widget that other people can put onto their websites, and I can't assume that they won't have a different version of jQuery installed. Hence the entire namespacing issue in the 1st place.

whitefrog: The order doesn't seem to make any difference, just FYI.

frisbian: You are on the right track. It is definitely a jQuery load timing issue. Based on your response I was able to do some further testing and determine in regards to IE *specifically* when loading javascript from inside of other javascript (odd, I know, but that's how widgets work :P) the execution of one line isn't dependent on the completion of the execution of the previous line, like it is when you are loading javascript normally on the HTML page. I know that is a confusing explanation, but this is what I mean. Try this:

<html>
<body>

<div id="update_me"></div>

<script src="https://s3.amazonaws.com/assets.healcode.com/javascripts/jquery.js"></script>
<script type="text/javascript">hcjq = jQuery.noConflict(true); hcjq("#update_me").html("hi.");</script>

</body>
</html>

The above code works great in IE, as well as all other browsers.

But now try this:

<html>
<body>

<div id="update_me"></div>

<script type="text/javascript">
document.write("<script src=\"https:\/\/s3.amazonaws.com\/assets.healcode.com\/javascripts\/jquery.js\"><\/script>");
document.write("<script type=\"text\/javascript\">hcjq = jQuery.noConflict(true); hcjq(\"#update_me\").html(\"hi.\");<\/script>");
</script>

</body>
</html>

Notice in the 2nd case, it doesn't work in IE. Unfortunately the 2nd way is the way we have to load our widget code. This more accurately describes the problem I'm trying to fix.

If you have any ideas on this one, please let me know.

Cheers,

ajit

ajitdsa

Re: noConflict/namespace issue in IE

8 years ago

To make this even easier to see, I uploaded these files to a public place:

http://dev.files.healcode.com.s3.amazonaws.com/test1.html

http://dev.files.healcode.com.s3.amazonaws.com/test2.html

I need help trying to get test2.html working in IE.

cheers,

ajit

getify

Re: noConflict/namespace issue in IE

8 years ago

I'm pretty certain this bug is actually the same symptom as we found in this other thread, starting with this message:

https://github.com/h5bp/lazyweb-requests/issues/42#issuecomment-1901803

There, we were trying to figure out why IE (only) had this bizarre behavior that jQuery would suspend itself half way through, run jQuery-UI (which would fail since jQuery wasn't fully defined), and then come back to jQuery. Turns out it's because jQuery modifies the DOM during its support feature tests, and this triggers this behavior in IE that tells it to go look for other ready-to-execute scripts.

That same behavior could explain why you are seeing this. I'm not 100% positive, but I'm like 99.9% positive it's the same culprit.

Problem is, there's no super-simple solution/work-around. It's a fairly complex issue.