Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    alert() message isn't being called in javascript

    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:

    Code:
            <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)
    Code:
    <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.

  • #2
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Issue no. 2:

    For my insert function, if I leave it likes this:
    Code:
    				insert: function(value){
    					if(value)
    
    						return {"filter" : value}; 
    				}
    It correct returns the object of key/value pairs.

    However, when I do this:
    Code:
    				insert: function(value){
    					if(value)
    						return handleFilter("filter", value);
    				}
    Code:
    		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:
    Code:
    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:
    Code:
    return handleFilter("filter", value);
    Thanks for response.

  • #4
    New Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    92
    Thanks
    0
    Thanked 17 Times in 17 Posts
    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 ?


  •  

    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
    •