homepage Welcome to WebmasterWorld Guest from 54.205.144.54
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Include javascript file not accessible to other included files
Avoid conflicts between functions
krazykarter




msg:4338627
 6:36 pm on Jul 12, 2011 (gmt 0)

From within my html I include 3 files. All files are successfully loaded:

<script type="text/javascript" language="javascript" src="functions.js"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/>
<script type="text/javascript" language="javascript" src="Menu.js"/>

Menu.js is reliant on jquery.min.js.
Within functions.js, there is this code segment:

function foo(id) {
var fldid = id;
var fld = $(id);
...
}

With the inclusion of jquery.min.js, calling foo (with a valid id) causes fld to incorrectly contain an empty array instead of the field itself. If jquery.min.js is not included, foo works correctly. I am guessing that the inclusion of jquery.min.js is causing a conflict in the way $() gets handled.
Yes, changing $(id) to document.getElementById(id) works, but this syntax is used in numerous places withing functions.js, and the file is a fairly important file to the project and I am not about to change it.

My question is this:
Is there a way to include a javascript file so that it can be used by one javascript file, and ignored by the rest? i.e. Menu.js can see and use jquery.min.js, while at the same time functions.js completely ignores jquery.min.js?
If that is not possible, is there a work around?

Thanks in advance.

 

Fotiman




msg:4338631
 7:11 pm on Jul 12, 2011 (gmt 0)

The problem is likely that your functions.js file defines a $ method. From the sound of it, that method probably expects an ID string only, whereas jQuery's $ method expects a selector, meaning if the element has an ID of "foobar", then you would need to pass "#foobar" to jQuery whereas your method takes just "foobar".

jQuery provides a way to not conflict with other libraries that may define a $ function:
[docs.jquery.com...]

However, if your Menu.js file uses the $ form of jQuery, then that will break.

JavaScript will load into the global namespace, which means that if you define a method "$" in multiple files, the last one defined will overwrite the previous one. That's way it's a good idea to create pseudo "namespaces" in JavaScript. Essentially, you create only 1 global object, and then all of your functions are defined within that object. So instead of doing this:
functions.js

function $(id) {
return document.getElementById(id);
}
function foo(id) {
var fld = $(id);
}
...

You would create a single object that contained your functions. There are many ways to do this, but here's one:


var MyNamespace = {
$: function (id) {
return document.getElementById(id);
},
foo: function (id) {
var fld = MyNamespace.$(id);
},
...
}

Note how method foo changed to call MyNamespace.$

With that said, you might be able to do something like this in your functions.js file:


(function () {
function $(id) {
return document.getElementById(id);
}
function foo(id) {
var fld = $(id);
}
...
})();


In that code, the entire contents are wrapped in an anonymous function which is executed immediately. This will prevent you from contaminating the global namespace, but the methods within the anonymous block can only be called from within the anonymous block. You couldn't, for example, call foo from outside of the anonymous block.

Fotiman




msg:4338632
 7:12 pm on Jul 12, 2011 (gmt 0)

Also, I would suggest searching for "namespacing javascript" to get more info on these techniques.

krazykarter




msg:4338635
 7:21 pm on Jul 12, 2011 (gmt 0)

Thank you! Thank you! Thank you! Thank you! hehe

I did find a namespace solution, but there were way too many changes to be made to make it doable quickly.

The jQuery.noConflict(); line on the link you provided was much simpler to implement, and it worked like a charm.

Once again, thank you!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved