SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Hey all,
    I get the error message mentioned in the title in this script:
    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>
    By the way, there is another problem I'm having some difficulty figuring out. Notice when the calculate() method is called, it bypasses the calling of the attach() method, which checks what kind of event is being triggered by the form fields. Any suggestions so that depending on whether it's change event or keyup, I can call obj.calculate() as soon as event happens? Thanks for response.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No one has any clue why firebug reports this error?


Tags for this Thread

Bookmarks

Posting Permissions

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