conflict between prototype and another js

This has been resolved - just works maybe needed a good refresh - no idea!




Hi all,

I have this script, it creates a list of files that the user browses for and adds a delete button.

though when I add the prototype.js file it no longer works.
can anyone tell me where the conflict is? maybe i can rename something...


function Selector( list_target, max ){

// Where to write the list
this.list_target = list_target;
// How many elements?
this.count = 0;
// How many elements?
this.id = 0;
// Is there a maximum?
if( max ){
this.max = max;
} else {
this.max = -1;
};

/**
* Add a new file input element
*/
this.addElement = function( element ){

// Make sure it's a file input element
if( element.tagName == 'INPUT' && element.type == 'file' ){

// Element name -- what number am I?
element.name = 'file_' + this.id++;

// Add reference to this object
element.multi_selector = this;

// What to do when a file is selected
element.onchange = function(){

// New file input
var new_element = document.createElement( 'input' );
new_element.type = 'file';

// Add new element
this.parentNode.insertBefore( new_element, this );

// Apply 'update' to element
this.multi_selector.addElement( new_element );

// Update list
this.multi_selector.addListRow( this );

// Hide this: we can't use display:none because Safari doesn't like it
this.style.position = 'absolute';
this.style.left = '-1000px';


};
// If we've reached maximum number, disable input element
if( this.max != -1 && this.count >= this.max ){
element.disabled = true;
};

// File element counter
this.count++;
// Most recent element
this.current_element = element;

} else {
// This can only be applied to file input elements!
alert( 'Error: not a file input element' );
};

};

/**
* Add a new row to the list of files
*/
this.addListRow = function( element ){

// Row div
var new_row = document.createElement( 'div' );

// Delete button
var new_row_button = document.createElement( 'input' );
new_row_button.type = 'button';
new_row_button.id = 'delete';


// References
new_row.element = element;

// Delete function
new_row_button.onclick= function(){

// Remove element from form
this.parentNode.element.parentNode.removeChild( this.parentNode.element );

// Remove this row from the list
this.parentNode.parentNode.removeChild( this.parentNode );

// Decrement counter
this.parentNode.element.multi_selector.count--;

// Re-enable input element (if it's disabled)
this.parentNode.element.multi_selector.current_element.disabled = false;

// Appease Safari
// without it Safari wants to reload the browser window
// which nixes your already queued uploads
return false;
};

// Set row value
new_row.innerHTML = element.value;

// Add button
new_row.appendChild( new_row_button );

// Add it to the list
this.list_target.appendChild( new_row );

};

};

The most probable reason is that you have created some functions/methods which happen to have the same name with some of the prototype's functions or custom methods. This is the main inconvenience of using the same time different codes/frameworks from different sources. Try changing the name of your function Selector(), or the name of some of your custom properties or arguments (list_target, max [by the way, I think max is a reserved javascript word]...) or methods (addElement(), addListRow()...).

I'll bet o dime on addElement() or addListRow() to be "duplicates" of some prototype's methods named the same :)
=====
A note:
use nodeName instead of tagName. The former has the advantage of returning everytime something defined, no matter the nodeType.

Oh great thanks for the tips =]