Solved

Filter

Posted on 2011-09-14
16
349 Views
Last Modified: 2012-05-12
Hi,

I have three dropdown list that list the states, cities and churches.  Any idea on how to do a filter?

here's my code

 
This is for the state

<input id="TxtState" name="TxtState" style="width: 176px" type="text" />

			 <select name="DispStateBox" style="width: 180px;height:200px;" size="8"  onChange="getSelOptions('getOptCityName.cfm?selval='+this.value,this.form.GetCity);">
			 <cfoutput>
			 <cfloop query="DispState">
			   <option value="#StateID#">#StateName#</option>
			 </cfloop>
			 </cfoutput>
			</select>

<select>
 <option value="22">Michigan (MI)</option>
 <option value="35">Ohio (OH)</option>
</select>


_________________________________________________
this is for the cities

 <input id="TxtCity" name="TxtCity" style="width: 176px" type="text" />

			<select name="GetCity" style="width: 180px;height:200px;" size="8" 
				onChange="getSelOptions('getOptChurchName.cfm?selval='+this.value,this.form.GetChurch);"/> </select>

<select>
 <option value="222">Acme</option>
 <option value="322">Ada</option>
 <option value="32">Addison</option>
</select>
_________________________________________________

this is for the churches

<input id="TxtChurch" name="TxtChurch" style="width: 250px" type="text" />

 <select name="GetChurch" style="width: 250px; height: 200px;" size="8" multiple>
            </select>

_________________________________________________

Open in new window

0
Comment
Question by:lulu50
  • 8
  • 8
16 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 36541298
I have a solution for you :-)

You need now this onChange event handlers for the parent select dropdowns:
<select name="DispStateBox" style="width: 180px;height:200px;" size="8" onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');">

Open in new window

And this one:
<select name="GetCity" style="width: 180px;height:200px;" size="8" onChange="setChurchOptions(this,'TxtChurch','GetChurch');"/> </select>

Open in new window

To make ir realy neat you need for Filter fields this onKeyUp event handlers:
<input id="TxtCity" name="TxtCity" style="width: 176px" type="text" onKeyUp="this.form.DispStateBox.onchange()" />

Open in new window

And for Church:
<input id="TxtChurch" name="TxtChurch" style="width: 250px" type="text" onKeyUp="this.form.GetCity.onchange()" />

Open in new window

You need also two additional JavaScript functions:
function setCityOptions(theSel,fldNameFilter,fldNameTarget,fldNameTargetChild){
  var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  theForm[fldNameTargetChild].options.length=0;
  var theFilter = escape(theForm[fldNameFilter].value.replace(/(^\s*|\s*$)/g,""));
  var theRequest = 'getOptCityName.cfm?selval='+theSel.value+'&filter='+theFilter;
  getSelOptions(theRequest,theForm[fldNameTarget]);
}

function setChurchOptions(theSel,fldNameFilter,fldNameTarget){
  var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  var theFilter = escape(theForm[fldNameFilter].value.replace(/(^\s*|\s*$)/g,""));
  var theRequest = 'getOptChurchName.cfm?selval='+theSel.value+'&filter='+theFilter;
  getSelOptions(theRequest,theForm[fldNameTarget]);
}

Open in new window

And the CFQUERY in your AJAX pages need small CFIF extention:
<CFQUERY DATASOURCE="chBase" NAME="GetCities" cachedwithin="#createTimeSpan(0,0,0,-1)#">
  SELECT distinct CityID, CityName FROM CityTbl
         WHERE StateID = #URL.selval# 
		 <cfif isDefined("URL.filter") AND URL.filter GT "" >
		    AND LCASE(CityName) LIKE '%#LCase(URL.filter)#%'
		 </cfif>
        order by CityName ASC
</CFQUERY>

Open in new window

And also for Church:
<CFQUERY DATASOURCE="chBase" NAME="GetChurch" cachedwithin="#createTimeSpan(0,0,0,-1)#">
  SELECT distinct ChurchID, ChurchName FROM ChurchTbl
         WHERE ChCityID = #URL.selval# and ChurchName <> 'null' and ChurchStatus = 1
		 <cfif isDefined("URL.filter") AND URL.filter GT "" >
		    AND LCASE(ChurchName) LIKE '%#LCase(URL.filter)#%'
		 </cfif>
        order by ChurchName ASC
</CFQUERY>

Open in new window


Anjoy it <|:-)
0
 

Author Comment

by:lulu50
ID: 36542121
hello Zvonko,

it will take me century to write code like you.

I did all the steps that are above.  I don't see my list of states? where did it go?



this is my previous select to get the states


                   <select name="DispStateBox" style="width: 180px;height:200px;" size="8"  onChange="getSelOptions('getOptCityName.cfm?selval='+this.value,this.form.GetCity);">
                   <cfoutput>
                   <cfloop query="DispState">
                     <option value="#StateID#">#StateName#</option>
                   </cfloop>
                   </cfoutput>
                  </select>


I replace it with this (is this correct?)

<select name="DispStateBox" style="width: 180px;height:200px;" size="8" onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');">
                  </select>   (I put the end of the select)

_________________________________________________________________

the query that populate my state select is this:

      <CFQUERY DATASOURCE="XXXXX" NAME="DispState" cachedwithin="#createTimeSpan(0,0,0,-1)#">
            SELECT distinct StateTbl.StateID, StateTbl.StateName
            FROM StateTbl
            LEFT JOIN CityTbl ON CityTbl.StateID = StateTbl.StateID
            LEFT JOIN ChurchTbl ON ChurchTbl.ChCityID = CityTbl.CityID
            WHERE ChurchTbl.ChurchName <> "null" and ChurchTbl.ChurchStatus = 1
            and CityTbl.CityStatus = 1 and StateTbl.StateStatus = 1
            order by StateTbl.StateName ASC
      </CFQUERY>      

                   <select name="DispStateBox" style="width: 180px;height:200px;" size="8"  onChange="getSelOptions('getOptCityName.cfm?selval='+this.value,this.form.GetCity);">
                   <cfoutput>
                   <cfloop query="DispState">
                     <option value="#StateID#">#StateName#</option>
                   </cfloop>
                   </cfoutput>
                  </select>

hmmm what I am doing wrong!!!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36542418
Let the States as it is now.
I am currently in the office and can make you the states Filter first when I am at home this evening.

But the other parts should already work. Do they work?

I mean you have to load the States as before and only use the new onChane event handler.
0
 

Author Comment

by:lulu50
ID: 36542667
I will wait for you Zvonko


I put my my select back for my state list for testing.  the city filter does not work but the church filter it works but it respond after the sesond letter I enter

so, if I enter in the church filter

(b)    nothing happen

(ba)  it start to filter

I would like it to start filter on the first letter user enter.

the city filter does not work I am not sure why.

Please, take a look at the site
http://www.churchesbulletin.com/

Zvonko  this is a great help!!! thank you so much.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36542691
Id does start with (b) but it occures in nearly every record.
Start with (z) and you will see what I mean.

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36542707
And City is NOT filtered because you have to change the State select onChange to this:
<select name="DispStateBox" style="width: 180px;height:200px;" size="8" 
  onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');">

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36543084
0
 

Author Comment

by:lulu50
ID: 36543281
I like it and love it this is great!!!!!!!   oh this is is what it is just great!!!!!

I changed LIKE '%#LCase(URL.filter)#%'  

to this

LIKE '#LCase(URL.filter)#%'  

because I want to filter anything from the begnning of the word but not before and after.

It looks great!!!!!

now I just have to get the filter for the state and that's it.  



0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:lulu50
ID: 36543359
setCityOptions  

when I change from state to state I need to clear the city filter textbox and the church filter textbox

is it something like this in this function  setCityOptions

fldNameFilter this is my TxtCity set the value to nothing.

function setCityOptions(theSel,fldNameFilter,fldNameTarget,fldNameTargetChild){
  var theForm = theSel.form;

  theForm[fldNameTarget].options.value='';

I am trying but no luck here
0
 

Author Comment

by:lulu50
ID: 36543367
or maybe this

theForm[fldNameTarget].value='';

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36543730
theForm[fldNameFilter].value="";
0
 

Author Comment

by:lulu50
ID: 36544555
function setCityOptions(theSel,fldNameFilter,fldNameTarget,fldNameTargetChild)

onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');

so the txtcity is the value of fldNameFilter  

I did put this code in my setCityOptions but it did not work.
theForm[fldNameFilter].value="";

I tested, it would not allow me to enter two didgit only one didgit.  

I need when the user change the state selection for
fldNameFilter to be .value="";
for the city and church and state


theForm[TxtState].value="";
theForm[TxtCity].value="";
theForm[TxtChurch].value="";

the function does not know what is the TxtState or  TxtCity or TxtChurch it know fldNameFilter the parameter that is passing so, maybe I have pass the value of these text to the function and say to clear it.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36545767
Stop. You are right. That cannot never work.
You cannot clear the Filter and enter two digits at same time.
Look, what the filter does is that on every kay up event it does reread itself and filters the results acordenly.
What you now want is that at every State change the City filter is reset.
But the City filter triggers the State onChange event handler.
So the only way would be that you change the City filter event handler binding from onKeyUp to onChange. Then you could enter three or four filter characters and when you leave the filter input field the filter would be triggered and the input would be reset. But in my opinion that is not an adantage in convenience.
I woudl recommand to let the current behavior.

In a complicated extention we could implement in filter event handler to act like it does now but to keep a flag where the initial input was doen: from State selet option change or from Filter input key. Do you want that?



0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36545865
Sorry, it is too simple.
Look at this:
 <select name="DispStateBox" style="width: 180px;height:200px;" size="8" 
  onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
  onFocus="this.form.TxtCity.value='';" > 

Open in new window

Instead onFocus you can use also onClick event handler.
0
 

Author Comment

by:lulu50
ID: 36546070
Zvonko

this is great!!!  

I added to clear the txtchurch textbox once the user change a state and it works great!!!!!

 <select name="DispStateBox" style="width: 180px;height:200px;" size="8"
  onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
  onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';" >

this is a great idea to have it clear the textbox in the select.  I know it could not work in the function like you said in your early post.  

now I need to open a new question for filtering the state.  

I hope you will answer my next question.

I just want to thank you very much for all your help and that I would not have done it without you.


0
 

Author Closing Comment

by:lulu50
ID: 36546074
Excellent job Thank you
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now