сообщение alert () не вызывается в моей форме

Question

Firebug не выдаёт мне сообщений об ошибках, но не работает. Идея заключается в том, что независимо от того, выбирает ли пользователь вариант из раскрывающегося списка или вводит что-то в поле поиска, я хочу, чтобы определенное ниже сообщение alert () сообщало о значении результата переменной (например, {filter: Germany}) , И это не так. Я думаю, что javascript ломается, когда создается новый экземпляр Form, потому что я пытался поместить предупреждение в переменную Form, но оно никогда не срабатывало. Обратите внимание, что все, что относится к этой проблеме, происходит при вызове form.calculation ().

разметка:

        <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 (ниже тега body)

 <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)  

Спасибо за всех, кто откликнулся. Я потратил много времени, пытаясь сделать эту работу.

Answer 1

Первоначальная проблема, связанная с тем, почему alert () не срабатывал при создании экземпляра Form, заключается в том, что, как вы можете видеть, свойство elements принадлежит объекту Form, а не объекту fieldset. И как вы можете видеть в html, я помещаю поля как потомки объекта fieldset, а не формы.