Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

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

    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:
    Code:
    <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.

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    From my understanding, it's ok to nest object literals:
    Code:
    // 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.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    It was the '-' in the key name of the key/value pair for the variable criteria causing this error.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •