missing : after property id drop-filter: {\n

[johnmerlino]

Hey all,

I have a script below, which I hope will generate query strings passed back to server using ajax depending on whether user selects an option from dropdown or enters content in a text field. Nevertheless, the issue I'm having at the moment is the firebug error:
missing : after property id drop-filter: {\n

It's telling me something is syntactically wrong with the drop-filter constructed in object notation below. But to me it looks correct:

<script>
(function($){
	
	var listview = $('#listview');
	
	var lists = (function(){
		var criteria = {
			drop-filter: {
				insert: function(value){
					if(value)
						return handleFilter("filter", value); 
				},
				msg: "Filtering..."
			},
			search-filter: {
				insert: function(value){
					if(value)
						return handleFilter("search", value);
				},
				msg: "Searching..."
			}
			
		}
		var handleFilter = function(key,value){
				return {key: value};
		}
		return {  
			 create: function(component){
				var component = component.href.substring(component.href.lastIndexOf('#') + 1); 
				return component;
			},
			 setDefaults: function(component){
				var parameter = {};
				switch(component){
					case "sites":
						parameter = {
							'order': 'site_num',
							'per_page': '20',
							'url': '/sites'
						}
				}
				return parameter;
			},
			getCriteria: function(criterion){
				return criteria[criterion];   
				
 			},
			addCriteria: function(criterion, method){
				criteria[criterion] = method;  
			}
		}
	})(); 
	
	var Form = function(form){
		var fields = [];
		$(form[0].elements).each(function(){  
			var field = $(this);
			if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field)); 
		})
	}
	
	Form.prototype = {
		initiate: function(){
			for(field in this.fields){
				this.fields[field].calculate(); // THIS DOESN"T MAKE SENSE WHY WE CALL CALCULATE HERE WHEN WE DIDN"T EVEN CALL ATTACH YET AND HENCE DONT KNOW WHAT TYPE OF EVENT TO RESPOND TO 
			}
		},
		 isCalculable: function(){    
			for(field in this.fields){ 
				if(!this.fields[field].alterData){ 
					return false; 
				}
			} 
			return true; 
		} 
	}
	
	var Field = function(field){ 
		this.field = field; 
		this.alterData = false;  
		this.attach("change"); 
		this.attach("keyup"); 
	}
	
	Field.prototype = { 
		attach: function(event){
			var obj = this;  
			if(event == "change"){
				obj.field.bind("change", function(){ 
					return obj.calculate();
				})
			}
			if(event == "keyup"){
				obj.field.bind("keyup", function(e){  
					return obj.calculate();
				})
			}
		},
		calculate: function(){
			var obj = this,  
				field = obj.field,  
				msgClass = "msgClass",
				msgList = $(document.createElement("ul")).addClass("msgClass"), 
				types = field.attr("alter-data").split(" "),
				container = field.parent(), 
				messages = [];
				
			field.next(".msgClass").remove();  
			for(var type in types){  
				var criterion = lists.getCriteria(types[type]);
				if(field.val()){ 
					var result = criterion.insert(field.val()); 
					
					container.addClass("waitingMsg"); 
					messages.push(criterion.msg);  
					
					obj.alterData = true; 
					
					initializeTable(result);  
					
				}
				else {  
					return false; 
					obj.alterData = false;  
				}
			}
			if(messages.length){
				for(msg in messages){
					msgList.append("<li>" + messages[msg] + "</li");  
				}
			}
			else{
				msgList.remove();  
			}
		}
	}
	
	$('#dashboard a').click(function(){
		var currentComponent = lists.create(this);
		var defaults = lists.setDefaults(currentComponent);
		initializeTable(defaults);
	});
	
	var initializeTable = function(custom){
		var defaults = {}
		var custom = custom || {};
		
		var query_string = $.extend(defaults, custom);
		
		var params = [];
		$.each(query_string, function(key,value){
			params += key + ': ' + value; 
		})
		
		$.ajax({
			type: 'GET',
			url: '/' + url,
			data: params,
	      	dataType: 'html',
			error: function(){},
			beforeSend: function(){},
			complete: function() {},
	      	success: function(response) { 
				listview.html(response);
			}
		})
	}
	
	$.extend($.fn, {  
		calculation: function(){
		var formReady = new Form($(this));  
			
		if(formReady.isCalculable) {
			formReady.initiate();   
		}
		
	})
	
	var form = $(listview + ' fieldset');
	form.calculation();
	
})(jQuery)
</script>

Thanks for response.

[johnmerlino]

From my understanding, it's ok to nest object literals:

// nesting is no problem.
var rectangle = { 
	upperLeft : { x : 2, y : 2 },
	lowerRight : { x : 4, y : 4}
}

So I don't know why I am getting firebug error when I am clearly nesting object literals.

[johnmerlino]

It was the '-' in the key name of the key/value pair for the variable criteria causing this error.