JS: Prototype Framework messing with my code.

Seachmall · 26-07-2010 5:58pm #1

So I have this JS function that turns input names and values into "x=y&a=b" for get or post requests. It works fine but I also use the prototype framework elsewhere on the page which causes problems. Despite the fact the function doesn't need the framework the framework insists on screwing with it.

Here's code that demonstrates the problem,

<html>
<head>

<title></title>

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript">

post_array = new Array();

function searchDetails(name,value){
	
	post_value = "";

	array_length = 0;
	
	count = 0;

	post_array[name] = value;


	for(x in post_array){ array_length++; }	//	HAVE TO DO IT THIS WAY BECAUSE JS DOESN'T LIKE ASSOCIATIVE ARRAYS :(


	for(key in post_array){

		post_value += key + "=" + post_array[key];
		
		count++;
		
		count < array_length ? post_value += "&" : null;

	}

	
	alert(post_value);

}
</script>

</head>
<body>
		<form>
				
			Surname: <input type="text" name="surname" onchange="searchDetails(this.name,this.value);" />
			First Name: <input type="text" name="first_name" onchange="searchDetails(this.name,this.value);" />
		
		</form>

</body>
</html>

It works fine if you removed the Prototype include but if Prototype is included it messes everything up and I've no idea how it's doing this nor how to stop it.

Here's an example of what the alert() pop-ups,

Prototype NOT included:

surname=Griffen&first_name=Peter

Prototype IS included:

surname=Griffen&first_name=Peter&each=function each(iterator, context) { var index = 0; try { this._each(function (value) {iterator.call(context, value, index++);}); } catch (e) { if (e != $break) { throw e; } } return this; }&eachSlice=function eachSlice(number, iterator, context) { var index = - number, slices = [], array = this.toArray(); if (number < 1) { return array; } while ((index += number) < array.length) { slices.push(array.slice(index, index + number)); } return s [etc.etc]

Anyone have any ideas as to why it's doing it or how to stop it? Any help appreciated.

Webmonkey · 26-07-2010 6:07pm

I'm guessing it's because they both use the $ alias and you get a conflict.

Try adding

<script>var $j = jQuery.noConflict();</script>

after your include of the Jquery script and use $j instead of $ when ever you want to call JQuery.

Actually I'm not sure if that's related at all. I'll check it later.

Seachmall · 26-07-2010 9:58pm

After reading through the Prototype docs (something I should have done straight away) I came across,

Why you should stop using for…in to iterate (or never take it up)

Many JavaScript authors have been misled into using the for…in JavaScript construct to loop over array elements. This kind of code just won’t work with Prototype.

You see, the ECMA 262 standard, which defines ECMAScript 3rd edition, supposedly implemented by all major browsers including MSIE, defines numerous methods on Array (§15.4.4), including such nice methods as concat, join, pop and push, to name but a few among the ten methods specified.

This same standard explicitely defines that the for…in construct (§12.6.4) exists to enumerate the properties of the object appearing on the right side of the in keyword. Only properties specifically marked as non-enumerable are ignored by such a loop. By default, the prototype and the length properties are so marked, which prevents you from enumerating over array methods when using for…in. This comfort led developers to use for…in as a shortcut for indexing loops, when it is not its actual purpose.

However, Prototype has no way to mark the methods it adds to Array.prototype as non-enumerable. Therefore, using for…in on arrays when using Prototype will enumerate all extended methods as well, such as those coming from the Enumerable module, and those Prototype puts in the Array namespace (described in this section, and listed further below).

Still, thanks for the reply WebMonkey.

JS: Prototype Framework messing with my code.

Comments