Question

Firebug没有给我任何错误消息，但它无法正常工作。这个想法无论用户是从下拉列表中选择一个选项还是在搜索框中键入某些内容，我都希望下面定义的alert（）消息提醒变量结果的值是什么（例如{filter：Germany}）。它没有。我认为当一个新的Form实例被实例化时，javascript会崩溃，因为我尝试在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（身体标签下方）

 <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

在实例化Form时，为什么没有触发alert（）的初始问题是因为，正如您所看到的，elements属性属于Form对象，而不是fieldset对象。正如您在html中看到的那样，我将字段放置为fieldset对象的后代，而不是form。

我的表单中没有调用alert（）消息

1 个答案: