Find solution
How To Resolve these Javascript Conflicts?

Whats the best way to resolve name conflicts in javascript?

  • I recently wrote some javascript code that filled a drop down list based on some XML, pretty simple stuff. The problem was I had to write similar code to do almost the same thing on a different page. Because the code was almost identical I named most of the functions the same, thinking that they would never be included in the same page. However, naming conflicts arose because both javascript files were eventually included in the same HTML page. When I had to go back and change the names I simply added first_ or second_ to the method's names. This was a pain and it doesn't seem very elegant to me. I was wondering if there is a better way to resolve name conflicts in javascript?

  • Answer:

    Try the JavaScript http://yuiblog.com/blog/2007/06/12/module-pattern/ (or namespaces) used in various libraries. Try to be DRY (don't repeat yourself) so you can avoid name collisions. If the code is almost the same you better avoid code duplication by creating a function which can handle both cases. The function can take two parameters: which dropdown to populate and with what data. This helps maintainability as well. update: I assume that you take the XML from an AJAX request. In this case you can create on-the-fly anonymous functions with the appropriate parameters for callback inside a loop.

ForYourOwnGood at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

Going slightly object oriented and using http://www.lixo.org/archives/2007/09/14/javascript-put-everything-in-a-namespace/ should prevent such conflicts IMHO. I'm not much of a web developer, so there might be better ways to do it specifically for Javascript, but this is generally what's done.

codelogic

I would look at how I could merge the two pieces of code (functions?) into a single function. If you need to populate a list box, then pass the list box id into the function, so you are not hard-coded to operate on one single control only... I did this on my rocket business's web site where I sold rocket motors with different delay values, but in essence, they were the same product, just a different delay value. Perhaps this might try and explain what I'm trying to say... I use this if an image file happens to be missing, it will display a "no image" image in place of the real image. function goBlank(image) { if(image) { var imgobj = document[image]; imgobj.src="/images/blank.gif"; } } In this case, you call it with: <img src="/images/aerotech.gif" name="header" onError="goBlank('header');"> If you need more example with things like list boxes used, let me know. Perhaps even post some sample code of yours.

LarryF

Another option (if possible) is to carefully tie the code to the element itself. e.g. <input type="text" name="foo" id="foo" value="World" onchange="this.stuff('Hello ' + this.value);"/> <script> document.getElementById('foo').stuff = function(msg){ //do whatever you want here... alert('You passed me: ' + msg); }; </script>

scunliffe

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.