Filter my select box

Hi,

I need your help please!!!!

Not sure why I can't do the filter

I need to be able to filter my Group multi select box.

please see the attached file
filter.txt
lulu50Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Corrected :
<script>

	$(".TxtGroup").keyup(function(evt) {

		console.log("key pressed :"+ evt.which);

		var textbox = $(this);
		var form = textbox.closest("form");
		var dropdown = $("#"+textbox.data("dropdown"));
		console.log("textbox,form,dropdown", [ textbox.length, form.length, dropdown.length ]);

		function success(data) {
			console.log("inside success", data);
			var options = [];
			$.each(data, function(i, option) {
				options.push("<option value='" + option[0] + "'>" + option[1] + "</option>");
			});
			console.log("options built", options);
			dropdown.html( options.join("") );
		}

		function error(jqXHR, textStatus, errorThrown) { 
			console.log("Error!!!\nMessage from the server :\n" + textStatus + "\n" + errorThrown);
		}

		var params = { 
			t: new Date().getTime(),
			selval: $(this).val(),
			filter: dropdown.val().join(",")
		}
		console.log("params are :" JSON.stringify(params) );

		$.ajax({ url:"getGroupName.cfm", data:params, success:success, error:error });
	});

</script>

Open in new window

0
 
leakim971PluritechnicianCommented:
Try this :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
	pre {
		word-wrap: break-word;
		white-space: pre-wrap;
	}
	.TxtGroup {
		width:500px;
	}
	.SearchBySelect5 {
		height:100px;
		width:500px;
		background-color:#f8fafc;
	}
</style>
<script type="text/javascipt" src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
<script>

	// http://zeptojs.com/
	Zepto(function($) {

		$(".TxtGroup").keyup(function() {
			var textbox = $(this);
			var form = textbox.closest("form");
			var dropdown = textbox.data("dropdown");
			function success(data) {
				var options = [];
				$.each(data, function(i, option) {
					options.push("<option value='" + option[0] + "'>" + option[1] + "</option>");
				});
				dropdown.html( options.join("") );
			}
			// http://zeptojs.com/#$.get
			var params = { 
				t: new Date().getTime(),
				selval: $(this).val(),
				filter: dropdown.val().join(",")
			}
			$.get("getGroupName.cfm", params, success);
		});

	});

</script>
</head>
<body>
	<form action="xxx.cfm" method="GET">
		<pre>Here is my code:</pre>
		<input id="TxtGroup" name="TxtGroup" class="TxtGroup" data-dropdown="DispGroupBox" type="text" />
		<select name="DispGroupBox" id="DispGroupBox" size="180" multiple="multiple" class="SearchBySelect5"></select>
	</form>
</body>
</html>

Open in new window

0
 
lulu50Author Commented:
Hi leakim971,

Thank you for helping me.  

I tried the code above and I got an error that says:

Object expected
on this line
Zepto(function($) {

It cannot find Zepto function
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
leakim971PluritechnicianCommented:
Did you add line 19? Or Maybe you already have jQuery in your box so just replace Zepto by jQuery.
0
 
lulu50Author Commented:
I have all this

<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js" ></script>
 <script type="text/javascript" src="js/jquery.chained.min.js" ></script>  
   <script type="text/javascript" src="js/jquery.cookie.js" ></script>
0
 
leakim971PluritechnicianCommented:
I think that mean you've jQuery
0
 
lulu50Author Commented:
I updated this
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>


to this
<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
0
 
lulu50Author Commented:
yes
I do
0
 
leakim971PluritechnicianCommented:
so it work now?
0
 
lulu50Author Commented:
no it still giving me the error


this is what I have for JQuery

<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js" ></script>
<script type="text/javascript" src="js/jquery.chained.min.js" ></script>  
<script type="text/javascript" src="js/jquery.cookie.js" ></script>
0
 
lulu50Author Commented:
I removed this

<script type="text/javascipt" src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
0
 
leakim971PluritechnicianCommented:
yes, good, which errordo you get now?
0
 
lulu50Author Commented:
object
0
 
leakim971PluritechnicianCommented:
you did you let Zepto?
Did you add line 19? Or Maybe you already have jQuery in your box so just replace Zepto by jQuery.
0
 
lulu50Author Commented:
I removed line 19 because I have these Jquery

<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js" ></script>
<script type="text/javascript" src="js/jquery.chained.min.js" ></script>  
<script type="text/javascript" src="js/jquery.cookie.js" ></script>  

is there a different Jquery that I need to include in-order for this to work?
0
 
leakim971PluritechnicianCommented:
so what is the error now? the jquery you have is a good one
0
 
lulu50Author Commented:
leakim971,

I don't have an error right now but, it's not calling zepto function when I type in the TxtGroup textbox
0
 
leakim971PluritechnicianCommented:
please provide a link to see your page
why are you talking about Zepto? It's jQuery now, you said you remove it
0
 
lulu50Author Commented:
I attached the documents

the LogEntry has the code
header.txt
LogEntry.txt
0
 
lulu50Author Commented:
Do I have to put the Zepto function in document ready?

because right now when I type in something in the TxtGroup I am not getting the alert

as if it is not calling this function
0
 
leakim971PluritechnicianCommented:
Still seeing Zepto in your code...
0
 
lulu50Author Commented:
I just have this now


<script>

            $(".TxtGroup").keyup(function() {
                  alert("hello");
                  var textbox = $(this);
                  var form = textbox.closest("form");
                  var dropdown = textbox.data("dropdown");
                  function success(data) {
                        var options = [];
                        $.each(data, function(i, option) {
                              options.push("<option value='" + option[0] + "'>" + option[1] + "</option>");
                        });
                        dropdown.html( options.join("") );
                  }
                  // http://zeptojs.com/#$.get
                  var params = {
                        t: new Date().getTime(),
                        selval: $(this).val(),
                        filter: dropdown.val().join(",")
                  }
                  $.get("getGroupName.cfm", params, success);
            });

</script>


I removed
      Zepto(function($) {
0
 
lulu50Author Commented:
do I have to change anything else than this

I removed
      Zepto(function($) {
0
 
lulu50Author Commented:
I put it in the document ready now it's calling it
0
 
leakim971PluritechnicianCommented:
Do you get your alert now?
0
 
lulu50Author Commented:
but I am not able to update the dropdown list
0
 
lulu50Author Commented:
yes I have my hello alert but I want to see what's in params and success

I tried this but did not work:
alert(params);
alert(success);
0
 
leakim971PluritechnicianCommented:
Without seeing your page in live I can't help you more because I don't have your server so I don't know what is send back

because you get an error

replace : $.get("getGroupName.cfm", params, success);
by : $.ajax({ url:"getGroupName.cfm", data:params, success:success, error:function(jqXHR, textStatus, errorThrown) { alert(textStatus + "\n" + errorThrown); } });
0
 
lulu50Author Commented:
Please, see the two attached files
getGroupName.txt
LogEntry.txt
0
 
lulu50Author Commented:
can I do the alert like this? to see what's being passed.  

alert(data:params);
                  $.ajax({ url:"getGroupName.cfm", data:params, success:success, error:function(jqXHR, textStatus, errorThrown) { alert(textStatus + "\n" + errorThrown); } });
            
            });
0
 
leakim971PluritechnicianCommented:
nah, like this :
alert( JSON.stringify(params) );
0
 
lulu50Author Commented:
I have an error on this line:
                  var params = {
                        t: new Date().getTime(),
                        selval: $(this).val(),
                        filter: dropdown.val().join(",")
                  }

Microsoft JScript runtime error: Object doesn't support this property or method
0
 
leakim971PluritechnicianCommented:
go to chrome instead IE
0
 
lulu50Author Commented:
the company uses IE so, I have to use it

Microsoft JScript runtime error: Object doesn't support this property or method
I am not sure why it's giving me this error:

Microsoft JScript runtime error: Object doesn't support this property or method

 Var params = {

      t: new Date().getTime(),
     selval: $(this).val(),
0
 
lulu50Author Commented:
it says anonumous function

>      JScript anonymous function      JScript


is that means there is two var params = {
0
 
leakim971PluritechnicianCommented:
for the development phase, use chrome
0
 
lulu50Author Commented:
I installed Chrome

the error says

Object DispGroupBox has no method 'val'
0
 
leakim971PluritechnicianCommented:
Thank you, I found that more comprehensive than the IE error message, isn't it?
So replace :
var dropdown = textbox.data("dropdown");
by :
var dropdown = $("#"+ textbox.data("dropdown") );

hope you change your HTML to match with what I propose to you in my code
0
 
lulu50Author Commented:
Yes, I started to like Chrome  hmmm not bad!!!!

ok

now I have this error:

Cannot call method join of null
filter: dropdown.val().join(",")
0
 
leakim971PluritechnicianCommented:
you get this because you did not select anything

so let we prevent this, replace the faulty line by :
filter: dropdown.val() && dropdown.val().join(",")
0
 
lulu50Author Commented:
next error in:

jquery-1.10.2.min.js

event.returnValue is deprecated.  Please use the standard event.preventDefault() instead
0
 
leakim971PluritechnicianCommented:
error or WARNING?
0
 
lulu50Author Commented:
oh it is Warning
0
 
leakim971PluritechnicianCommented:
ok so it work now?
0
 
lulu50Author Commented:
$.ajax({ url:"getGroupName.cfm", data:params, success:success, error:function(jqXHR, textStatus, errorThrown) { alert(textStatus + "\n" + errorThrown); } });


the getGroupName.cfm file should get a URL of filter passed in

//var theRequest = 'getGroupName.cfm?filter='+theFilter;


<cfsetting showDebugOutput="yes">

<cfif isDefined("URL.filter") AND URL.filter GT "" >
<cfquery name = "QGroupName"  datasource='#strDSN#' username='#strUID#' password='#strPWD#'>
  SELECT distinct DepartmentImpactedID, Department FROM DepartmentImpacted
         WHERE Status = 1
                AND Department LIKE '#LCase(URL.filter)#%'
        order by Department ASC
</CFQUERY>

  <cfset arrSep="">
  [<cfoutput query="QGroupName" >
    #arrSep#["#DepartmentImpactedID#","#Department#"]
      <cfset arrSep=",">
  </cfoutput>]
</cfif>
0
 
lulu50Author Commented:
I have error

in jquery-1.10.2.min.js

Cannot use 'in' operator to search for '3059' in
0
 
leakim971PluritechnicianCommented:
You know what you're talking about because you've data and the page in your browser...
I don't see anything :) So I did not understood your last message
0
 
leakim971PluritechnicianCommented:
your server is talking to you, not jQuery
0
 
lulu50Author Commented:
leakim971

oh really are you making fun of me?

if i know what i'm doing i would not be here
0
 
leakim971PluritechnicianCommented:
no, no, it's a message from your server

replace this :
<cfquery name = "QGroupName"  datasource='#strDSN#' username='#strUID#' password='#strPWD#'>
  SELECT distinct DepartmentImpactedID, Department FROM DepartmentImpacted
         WHERE Status = 1
                AND Department LIKE '#LCase(URL.filter)#%'
        order by Department ASC
</CFQUERY>

Open in new window

by :
<cfquery name = "QGroupName"  datasource='#strDSN#' username='#strUID#' password='#strPWD#'>
  SELECT distinct DepartmentImpactedID, Department FROM DepartmentImpacted
</CFQUERY>

Open in new window


Yes just for testing....
0
 
lulu50Author Commented:
I have an error when I type in the textbox

and

the error says that "Cannot use 'in' operator to search for '3059' in

what is that mean?
0
 
lulu50Author Commented:
please, see the attached files
getGroupName.txt
LogEntry.txt
0
 
leakim971PluritechnicianCommented:
somewhere you've this :
alert(textStatus + "\n" + errorThrown);
replace by :
alert("Error!!!\nMessage from the server :\n" + textStatus + "\n" + errorThrown);
0
 
lulu50Author Commented:
it is still not able to filtering my DispGroupBox list
0
 
leakim971PluritechnicianCommented:
And what did you see in the message? Don't forget you're my eye.
0
 
lulu50Author Commented:
I see this

error
0
 
lulu50Author Commented:
Can you please see the above error
0
 
leakim971PluritechnicianCommented:
Go for this :
<script>

	$(".TxtGroup").keyup(function(evt) {

		console.log("key pressed :"+ evt.which);

		var textbox = $(this);
		var form = textbox.closest("form");
		var dropdown = $("#"+textbox.data("dropdown"));
		console.log("textbox,form,dropdown", { textbox.length, form.length, dropdown.length });

		function success(data) {
			console.log("inside success", data);
			var options = [];
			$.each(data, function(i, option) {
				options.push("<option value='" + option[0] + "'>" + option[1] + "</option>");
			});
			console.log("options built", options);
			dropdown.html( options.join("") );
		}

		function error(jqXHR, textStatus, errorThrown) { 
			console.log("Error!!!\nMessage from the server :\n" + textStatus + "\n" + errorThrown);
		}

		var params = { 
			t: new Date().getTime(),
			selval: $(this).val(),
			filter: dropdown.val().join(",")
		}
		console.log("params are :" JSON.stringify(params) );

		$.ajax({ url:"getGroupName.cfm", data:params, success:success, error:error });
	});

</script>

Open in new window


Copy/Paste what you get in the console.
0
 
lulu50Author Commented:
Error errorLogEntry.txt
0
 
lulu50Author Commented:
leakim971 I'm back!!!!!

I have an error!!!!! Isn't that great!!!!!

error
0
 
leakim971PluritechnicianCommented:
console.log("params are :" + JSON.stringify(params) );

Open in new window

0
 
lulu50Author Commented:
I don't have any error but, when I Keyup event is not getting called when I put something in the TxtGroup.


I can see my alert message only when the page is onload but not when I put something in the TxtGroup
LogEntry.txt
0
 
leakim971PluritechnicianCommented:
Copy/Paste what you get in the console.
0
 
lulu50Author Commented:
I did copied and paste what's in the console!


Question: Does this script   (.TxtGroup).Keyup    function have to be in the
$(document).ready(function () {  

I have it in the document ready is this correct?




$(".TxtGroup").keyup(function(evt) {
      
      alert("hello");
    debugger;
            console.log("key pressed :"+ evt.which);

            var textbox = $(this);
            var form = textbox.closest("form");
            var dropdown = $("#"+textbox.data("dropdown"));
            console.log("textbox,form,dropdown", [ textbox.length, form.length, dropdown.length ]);

            function success(data) {
                  console.log("inside success", data);
                  var options = [];
                  $.each(data, function(i, option) {
                        options.push("<option value='" + option[0] + "'>" + option[1] + "</option>");
                  });
                  console.log("options built", options);
                  dropdown.html( options.join("") );
            }

            function error(jqXHR, textStatus, errorThrown) {
                  console.log("Error!!!\nMessage from the server :\n" + textStatus + "\n" + errorThrown);
            }

            var params = {
                  t: new Date().getTime(),
                  selval: $(this).val(),
                  filter: dropdown.val().join(",")
            }
            console.log("params are :" + JSON.stringify(params) );

            $.ajax({ url:"getGroupName.cfm", data:params, success:success, error:error });
      });
0
 
leakim971PluritechnicianCommented:
I did copied and paste what's in the console!

Where?
0
 
lulu50Author Commented:
leakim971

please answer my question.  

do I have to put this keyup function in my document ready event?
0
 
leakim971PluritechnicianCommented:
of course

now answer mine
0
 
lulu50Author Commented:
I couldn't call it because you have it as class

$(".TxtGroup").keyup(function(evt) {

it should be ID

$("#TxtGroup").keyup(function(evt) {
0
 
leakim971PluritechnicianCommented:
you should see that class on my first post :(
0
 
lulu50Author Commented:
lol sorry,

can you remind me of what was your question?

error
0
 
lulu50Author Commented:
yes, you are correct

Sorry, I changed it let's use # instead my fault on this. :)
0
 
lulu50Author Commented:
leakim971,

ERROR error
0
 
leakim971PluritechnicianCommented:
you should follow instruction before changing anything, no?
please confirm you're using the HTML provided
0
 
lulu50Author Commented:
I am using the HTML provided
0
 
lulu50Author Commented:
leakim971,

let me send you the most recent one.
0
 
lulu50Author Commented:
This is the most recent HTML that I am using
LogEntry.txt
0
 
leakim971PluritechnicianCommented:
don't do that, I don't understand your code
what is that :

                   
<td colspan="3" valign="top"><select name="DispGroupBox" id="DispGroupBox" size="180" multiple="multiple" class="SearchBySelect5"  style="height:100px; width:500px;background-color:#f8fafc;">
                    
                    </select>

Open in new window


please just use my HTML, thanks
0
 
lulu50Author Commented:
Still have the same error

Cannot call method 'join' of undefined
0
 
leakim971PluritechnicianCommented:
please post your latest now, thanks
0
 
lulu50Author Commented:
It's working now!!!!

Thank you for all your help
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.