Solved

Filter my select box

Posted on 2014-02-26
80
390 Views
Last Modified: 2014-03-04
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
Comment
Question by:lulu50
  • 47
  • 33
80 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Did you add line 19? Or Maybe you already have jQuery in your box so just replace Zepto by jQuery.
0
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
I think that mean you've jQuery
0
 

Author Comment

by:lulu50
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
yes
I do
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
so it work now?
0
 

Author Comment

by:lulu50
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
I removed this

<script type="text/javascipt" src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
yes, good, which errordo you get now?
0
 

Author Comment

by:lulu50
Comment Utility
object
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
so what is the error now? the jquery you have is a good one
0
 

Author Comment

by:lulu50
Comment Utility
leakim971,

I don't have an error right now but, it's not calling zepto function when I type in the TxtGroup textbox
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
please provide a link to see your page
why are you talking about Zepto? It's jQuery now, you said you remove it
0
 

Author Comment

by:lulu50
Comment Utility
I attached the documents

the LogEntry has the code
header.txt
LogEntry.txt
0
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Still seeing Zepto in your code...
0
 

Author Comment

by:lulu50
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
do I have to change anything else than this

I removed
      Zepto(function($) {
0
 

Author Comment

by:lulu50
Comment Utility
I put it in the document ready now it's calling it
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Do you get your alert now?
0
 

Author Comment

by:lulu50
Comment Utility
but I am not able to update the dropdown list
0
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
Please, see the two attached files
getGroupName.txt
LogEntry.txt
0
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
nah, like this :
alert( JSON.stringify(params) );
0
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
go to chrome instead IE
0
 

Author Comment

by:lulu50
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
it says anonumous function

>      JScript anonymous function      JScript


is that means there is two var params = {
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
for the development phase, use chrome
0
 

Author Comment

by:lulu50
Comment Utility
I installed Chrome

the error says

Object DispGroupBox has no method 'val'
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
next error in:

jquery-1.10.2.min.js

event.returnValue is deprecated.  Please use the standard event.preventDefault() instead
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).

 
LVL 82

Expert Comment

by:leakim971
Comment Utility
error or WARNING?
0
 

Author Comment

by:lulu50
Comment Utility
oh it is Warning
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
ok so it work now?
0
 

Author Comment

by:lulu50
Comment Utility
$.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
 

Author Comment

by:lulu50
Comment Utility
I have error

in jquery-1.10.2.min.js

Cannot use 'in' operator to search for '3059' in
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
your server is talking to you, not jQuery
0
 

Author Comment

by:lulu50
Comment Utility
leakim971

oh really are you making fun of me?

if i know what i'm doing i would not be here
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
please, see the attached files
getGroupName.txt
LogEntry.txt
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
somewhere you've this :
alert(textStatus + "\n" + errorThrown);
replace by :
alert("Error!!!\nMessage from the server :\n" + textStatus + "\n" + errorThrown);
0
 

Author Comment

by:lulu50
Comment Utility
it is still not able to filtering my DispGroupBox list
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
And what did you see in the message? Don't forget you're my eye.
0
 

Author Comment

by:lulu50
Comment Utility
I see this

error
0
 

Author Comment

by:lulu50
Comment Utility
Can you please see the above error
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
Error errorLogEntry.txt
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
leakim971 I'm back!!!!!

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

error
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
console.log("params are :" + JSON.stringify(params) );

Open in new window

0
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Copy/Paste what you get in the console.
0
 

Author Comment

by:lulu50
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
I did copied and paste what's in the console!

Where?
0
 

Author Comment

by:lulu50
Comment Utility
leakim971

please answer my question.  

do I have to put this keyup function in my document ready event?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
of course

now answer mine
0
 

Author Comment

by:lulu50
Comment Utility
I couldn't call it because you have it as class

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

it should be ID

$("#TxtGroup").keyup(function(evt) {
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
you should see that class on my first post :(
0
 

Author Comment

by:lulu50
Comment Utility
lol sorry,

can you remind me of what was your question?

error
0
 

Author Comment

by:lulu50
Comment Utility
yes, you are correct

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

Author Comment

by:lulu50
Comment Utility
leakim971,

ERROR error
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
you should follow instruction before changing anything, no?
please confirm you're using the HTML provided
0
 

Author Comment

by:lulu50
Comment Utility
I am using the HTML provided
0
 

Author Comment

by:lulu50
Comment Utility
leakim971,

let me send you the most recent one.
0
 

Author Comment

by:lulu50
Comment Utility
This is the most recent HTML that I am using
LogEntry.txt
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:lulu50
Comment Utility
Still have the same error

Cannot call method 'join' of undefined
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
please post your latest now, thanks
0
 

Author Closing Comment

by:lulu50
Comment Utility
It's working now!!!!

Thank you for all your help
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

772 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

14 Experts available now in Live!

Get 1:1 Help Now