Filter

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

lulu50Asked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
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
 
lulu50Author Commented:
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
 
ZvonkoSystems architectCommented:
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
lulu50Author Commented:
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
 
ZvonkoSystems architectCommented:
Id does start with (b) but it occures in nearly every record.
Start with (z) and you will see what I mean.

0
 
ZvonkoSystems architectCommented:
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
 
ZvonkoSystems architectCommented:
0
 
lulu50Author Commented:
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
 
lulu50Author Commented:
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
 
lulu50Author Commented:
or maybe this

theForm[fldNameTarget].value='';

0
 
ZvonkoSystems architectCommented:
theForm[fldNameFilter].value="";
0
 
lulu50Author Commented:
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
 
ZvonkoSystems architectCommented:
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
 
ZvonkoSystems architectCommented:
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
 
lulu50Author Commented:
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
 
lulu50Author Commented:
Excellent job Thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.