www.webdeveloper.com
Results 1 to 3 of 3

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

  1. #1
    Join Date
    Apr 2010
    Posts
    26

    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
    Join Date
    Apr 2010
    Posts
    26
    No one has any clue why firebug reports this error?

  3. #3
    Join Date
    Apr 2010
    Posts
    213
    Removed... obviously wrong (*sheepish grin*)
    Last edited by Chipzzz; 10-05-2010 at 08:08 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles