Jump to content

Recommended Posts

This should be really simple... basically its a class which generates a search / filter form for a list. If I just use it once this works fine, but when I try to do two implementations the second form uses the information from the first form.

 

See in the "this.view_recalc" function in the "GET SELECT OPTION" part:

 

 

 

<!doctype html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<style>
td{vertical-align:top;}
.myform{border:1px solid black;}

.mylist{border:1px solid red;}
.mylist .nub_items_title,.mylist .nub_items{}
.mylist .nub_items_title:after,.mylist .nub_items:after{content:'';display:block;clear:both;}

.mylist span[itemprop="title"]{width:100px;float:left;font-weight:bold;}
.mylist span[itemprop="name"]{width:100px;float:left;}
.mylist span[itemprop="type"]{width:100px;float:left;}
.mylist span[itemprop="logo"]{width:100px;float:left;}

}
</style>
<script>

var listfilter = function (id_form,id_list,v) {
    var self = this;
    this.idname = id_form;
    this.idlist = id_list;
    //this.vals = v;
    var vals = v;
    
    this.init = function(){
        console.log('Initialising list: '+this.idname);
        
        this.add_form();
    }
    
    this.add_form = function(){
        //console.log('Initialising list: '+this.idname);
        
        //    CREATE FORM
        var data = "<form class='nub_list_form'>";
        for(i=0;i<vals.length;i++){
            data += "<select class='target_nublist' name='"+vals[i][0]+"' />";
        }
        data += "</form>";
        
        //    ADD FORM
        $("#"+this.idname+"").each(function(i){
            $(this).html("hello: "+data);
        });
        
        //    GET FORM HANDLE
        var obj_form = $("#"+this.idname+" form")[0];
        
        //    LOOP ITEMS
        for(i=0;i<vals.length;i++){
            
            //    GET & FILL SELECT
            var o = $(obj_form).children("select[name='"+vals[i][0]+"']");//[0];    //    [0];
            for (j = 0; j < v[i][2].length; j++){
                $(o).append($('<option/>', {    value: vals[i][2][j][0], text : vals[i][2][j][1]        }));
            }
            
            //    SET DEFAULT / SELECTED
            $(obj_form).children("select[name='"+vals[i][0]+"']").val(vals[i][1]);
        }
        
        //    ADD CHANGE HANDLERS
        $(obj_form).children("select").change(function(){
            //    REDRAW
            self.view_recalc();
        });
        
        
        
    }
    
    this.view_recalc = function(){
        
        var vt = vals;
        //alert("#"+self.idlist+" .nub_items");
        //    LOOP ITEMS
        $("#"+self.idlist+" .nub_items").each(function(i){
            var o=this;
            
            var flag = 0;
            for(i=0;i<vt.length;i++){
                //    GET SELECT OPTION
                //var v = $("#"+this.idlist+" select[name='"+this.vals[i][0]+"']").val();
                //var v = $("#"+self.idlist+" select[name='"+vt[i][0]+"']").val();
                //var v = $("#"+self.idlist+" select[name='"+vt[i][0]+"']").val();
                //var v = $(o+" select[name='"+vt[i][0]+"']").val();
                var v = $("select[name='"+vt[i][0]+"']").val();
                /*var v = "Any";
                $(this).find("select[name='"+vt[i][0]+"']").each(function(ii){
                    v=$(o).val();
                });*/
                /*var v = "Any";
                $(this).children("select[name='"+vt[i][0]+"']").each(function(ii){
                    v=$(this).val();
                });*/
                
                if(v!="Any"){
                    //    SEARCH
                    $(this).find('span').each(function(ii){
                        if($(this).attr('itemprop')==vt[i][0]){
                            if($(this).text()==v){
                                flag+=1;
                                //return false;    //    break;
                            }
                        }
                    });
                }else{
                    //    PASS
                    flag+=1;
                }
            }
            
            //    DECIDE
            if(flag==vt.length){
                $(this).css("display","block");
            }else{
                $(this).css("display","none");
            }
        });
        
    }
};







$(function() {
    
    var listfilter1 = new listfilter('myform1','mylist1',
            [
                ["type","Female",[["Any","All"],["Male","Men"],["Female","Woman"]]],
                ["name","Bob",[["Any","All"],["Alice","Alice"],["Bob","Bob"]]],
                ["logo","Logo B",[["Any","All"],["Logo A","Logo aa"],["Logo B","Logo bb"],["Logo C","Logo cc"]]]
            ]);
    var listfilter2 = new listfilter('myform2','mylist2',
            [
                ["type","Female",[["Any","All"],["Male","Men"],["Female","Woman"]]],
                ["name","Bob",[["Any","All"],["Alice","Alice"],["Bob","Bob"]]],
                ["logo","Any",[["Any","All"],["Logo A","Logo aa"],["Logo B","Logo bb"],["Logo C","Logo cc"]]]
            ]);
    
    
    listfilter1.init();
    listfilter2.init();
    
    
    
});


</script>

</head>
<body>

<table><tr><td style='width:240px;'>

    <div id='myform1' class='myform'>
    
    </div>

    <div id='myform2' class='myform'>
    
    </div>
    
</td>
<td style=''>

    <div id='mylist1' class='mylist'>
    
        <div class='nub_items_title'>
            <span itemprop='title'>Title</span>
            <span itemprop='name'>Name</span>
            <span itemprop='type'>Type</span>
            <span itemprop='logo'>Logo</span>
            </div>
        
        <div class='nub_items'>
            <span itemprop='title'>Miss</span>
            <span itemprop='name'>Alice</span>
            <span itemprop='type'>Female</span>
            <span itemprop='logo'>Logo A</span>
            </div>
        
        <div class='nub_items'>
            <span itemprop='title'>Mr</span>
            <span itemprop='name'>Bob</span>
            <span itemprop='type'>Male</span>
            <span itemprop='logo'>Logo B</span>
            </div>
        
        <div class='nub_items'>
            <span itemprop='title'>Mz</span>
            <span itemprop='name'>Eve</span>
            <span itemprop='type'>Female</span>
            <span itemprop='logo'>Logo C</span>
            </div>
        
    </div>

    <div id='mylist2' class='mylist'>
    
        <div class='nub_items_title'>
            <span itemprop='title'>Title</span>
            <span itemprop='name'>Name</span>
            <span itemprop='type'>Type</span>
            <span itemprop='logo'>Logo</span>
            </div>
        
        <div class='nub_items'>
            <span itemprop='title'>Miss</span>
            <span itemprop='name'>Alice</span>
            <span itemprop='type'>Female</span>
            <span itemprop='logo'>Logo A</span>
            </div>
        
        <div class='nub_items'>
            <span itemprop='title'>Mr</span>
            <span itemprop='name'>Bob</span>
            <span itemprop='type'>Male</span>
            <span itemprop='logo'>Logo B</span>
            </div>
        
        <div class='nub_items'>
            <span itemprop='title'>Mz</span>
            <span itemprop='name'>Eve</span>
            <span itemprop='type'>Female</span>
            <span itemprop='logo'>Logo C</span>
            </div>
        
    </div>

</td>
</tr>
</table>

<div style='clear:both;'></div>
<br /><br />
<a href='index.html'>INDEX</a>
<br /><br />
</div>
</body>
</html>

 

 

Thanks

So what you're saying is that

var v = $("select[name='"+vt[i][0]+"']").val();
is getting you the wrong value? Remember that vt[0] will be like "type" or "name" which means you're doing

$("select[name='type']").val()

After you create your form, save a reference to it onto this/self, then use jquery's find method to search for elements within that form.

 

//    GET FORM HANDLE
var obj_form = $("#"+this.idname+" form")[0];
self.form = obj_form;
var v = self.form.find("select[name='"+vt[i][0]+"']").val();
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.