alert() message isn't being called in javascript

[johnmerlino]

Firebug is giving me no error messages, but alert() message is never triggered. I want the alert() message defined below to alert what the value of the variable result is (e.g. {filter: Germany}). And it doesn't. I think the javascript breaks down right when a new Form instance is instantiated because I tried putting an alert in the Form variable and it was never triggered. Note that everything that pertains to this issue occurs when form.calculation() is called:

markup:

        <fieldset> 
        <select name="filter" alter-data="dropFilter"> 
            <option>Germany</option> 
            <option>Ukraine</option> 
            <option>Estonia</option> 
        </select>    
        <input type="text" alter-data="searchFilter" /> 
    </fieldset>

javascript (below the body tag)

<script> 
(function($){ 
 
var listview = $('#listview'); 
 
var lists = (function(){ 
    var criteria = { 
        dropFilter: { 
            insert: function(value){ 
                if(value) 
                    return handleFilter("filter", value);   
            }, 
            msg: "Filtering..." 
        }, 
        searchFilter: { 
            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();  
        } 
    }, 
     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;   
 
                alert(result); 
                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 custom = lists.setDefaults(currentComponent); 
    initializeTable(custom); 
}); 
 
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;  
    }) 
    var url = custom['url']; 
 
    $.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 = $('fieldset'); 
    form.calculation(); 
})(jQuery)

Thanks for response.

[johnmerlino]

The initial problem as to why the alert() was not being triggered when Form is instantiated is because, as you can see, the elements property belongs to the Form object, not fieldset object. And as you can see in the html, I place the fields as descendents of the fieldset object, not form.

[johnmerlino]

Issue no. 2:

For my insert function, if I leave it likes this:

				insert: function(value){
					if(value)

						return {"filter" : value}; 
				}

It correct returns the object of key/value pairs.

However, when I do this:

				insert: function(value){
					if(value)
						return handleFilter("filter", value);
				}

		var handleFilter = function(key,value){
				return {key: value};
		}

Despite the fact that the function returns an object, javascript does not treat it as a returned object. Because later when I call this:

var result = criterion.insert(field.val()); 
alert(result['filter']);

it will alert "undefined". However, when I used the first example, it correctly returns "Estonia", should I choose the Estonia option from the dropdown.

Any reason why the handleFilter() function is not returning an object, even though it clearly is? Perhaps, it has something to do with the fact that I am technically returning a function, even though that function in turn returns an object:

return handleFilter("filter", value);

Thanks for response.

[Shaka Zorba]

okay tou are using jQuerie but your question is about javascript
javascript does something wierd here its well known and not a bug

key = 'a'
val = 'b'
c = {key:val}
alert(c['key'])

go figure ?