Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

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
0
lulu50
Asked:
lulu50
  • 47
  • 33
1 Solution
 
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
 
leakim971PluritechnicianCommented:
Did you add line 19? Or Maybe you already have jQuery in your box so just replace Zepto by jQuery.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
leakim971PluritechnicianCommented:
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
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 47
  • 33
Tackle projects and never again get stuck behind a technical roadblock.
Join Now