Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Filter my select box

Posted on 2014-02-26
80
Medium Priority
?
416 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 47
  • 33
80 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39890912
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
ID: 39891885
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
ID: 39891895
Did you add line 19? Or Maybe you already have jQuery in your box so just replace Zepto by jQuery.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:lulu50
ID: 39891897
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
ID: 39891902
I think that mean you've jQuery
0
 

Author Comment

by:lulu50
ID: 39891904
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
ID: 39891905
yes
I do
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39891907
so it work now?
0
 

Author Comment

by:lulu50
ID: 39891914
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
ID: 39891915
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
ID: 39891922
yes, good, which errordo you get now?
0
 

Author Comment

by:lulu50
ID: 39891932
object
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39891948
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
ID: 39891960
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
ID: 39891964
so what is the error now? the jquery you have is a good one
0
 

Author Comment

by:lulu50
ID: 39892138
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
ID: 39892150
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
ID: 39892173
I attached the documents

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

Author Comment

by:lulu50
ID: 39892178
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
ID: 39892181
Still seeing Zepto in your code...
0
 

Author Comment

by:lulu50
ID: 39892196
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
ID: 39892198
do I have to change anything else than this

I removed
      Zepto(function($) {
0
 

Author Comment

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

Expert Comment

by:leakim971
ID: 39892208
Do you get your alert now?
0
 

Author Comment

by:lulu50
ID: 39892212
but I am not able to update the dropdown list
0
 

Author Comment

by:lulu50
ID: 39892219
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
ID: 39892233
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
ID: 39892244
Please, see the two attached files
getGroupName.txt
LogEntry.txt
0
 

Author Comment

by:lulu50
ID: 39892285
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
ID: 39892292
nah, like this :
alert( JSON.stringify(params) );
0
 

Author Comment

by:lulu50
ID: 39892314
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
ID: 39892367
go to chrome instead IE
0
 

Author Comment

by:lulu50
ID: 39892418
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
ID: 39892420
it says anonumous function

>      JScript anonymous function      JScript


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

Expert Comment

by:leakim971
ID: 39892424
for the development phase, use chrome
0
 

Author Comment

by:lulu50
ID: 39892443
I installed Chrome

the error says

Object DispGroupBox has no method 'val'
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39892454
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
ID: 39892465
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
ID: 39892505
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
ID: 39892532
next error in:

jquery-1.10.2.min.js

event.returnValue is deprecated.  Please use the standard event.preventDefault() instead
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39892536
error or WARNING?
0
 

Author Comment

by:lulu50
ID: 39892563
oh it is Warning
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39892568
ok so it work now?
0
 

Author Comment

by:lulu50
ID: 39892574
$.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
ID: 39892589
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
ID: 39892635
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
ID: 39892641
your server is talking to you, not jQuery
0
 

Author Comment

by:lulu50
ID: 39892681
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
ID: 39892695
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
ID: 39892711
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
ID: 39892717
please, see the attached files
getGroupName.txt
LogEntry.txt
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39892747
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
ID: 39892759
it is still not able to filtering my DispGroupBox list
0
 
LVL 82

Expert Comment

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

Author Comment

by:lulu50
ID: 39892786
I see this

error
0
 

Author Comment

by:lulu50
ID: 39892792
Can you please see the above error
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39892855
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
ID: 39892889
Error errorLogEntry.txt
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 39892909
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
ID: 39895429
leakim971 I'm back!!!!!

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

error
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39895432
console.log("params are :" + JSON.stringify(params) );

Open in new window

0
 

Author Comment

by:lulu50
ID: 39895514
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
ID: 39895524
Copy/Paste what you get in the console.
0
 

Author Comment

by:lulu50
ID: 39895542
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
ID: 39895549
I did copied and paste what's in the console!

Where?
0
 

Author Comment

by:lulu50
ID: 39895606
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
ID: 39895658
of course

now answer mine
0
 

Author Comment

by:lulu50
ID: 39895667
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
ID: 39895675
you should see that class on my first post :(
0
 

Author Comment

by:lulu50
ID: 39895688
lol sorry,

can you remind me of what was your question?

error
0
 

Author Comment

by:lulu50
ID: 39895699
yes, you are correct

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

Author Comment

by:lulu50
ID: 39895765
leakim971,

ERROR error
0
 
LVL 82

Expert Comment

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

Author Comment

by:lulu50
ID: 39895783
I am using the HTML provided
0
 

Author Comment

by:lulu50
ID: 39895789
leakim971,

let me send you the most recent one.
0
 

Author Comment

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

Expert Comment

by:leakim971
ID: 39895801
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
ID: 39895829
Still have the same error

Cannot call method 'join' of undefined
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39895834
please post your latest now, thanks
0
 

Author Closing Comment

by:lulu50
ID: 39903254
It's working now!!!!

Thank you for all your help
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn how to dynamically set the form action using jQuery.
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)

604 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