<select name="SelectDepartmentImpacted" class="SearchBySelect5" id="SelectDepartmentImpacted" style="width: 250px; height: 100px; background-color: rgb(248, 250, 252);" size="180" multiple="" sizzle-1400165879525="[object Object]">
<OPTION value=4 data-DepartmentName="BCN – Commons Customer Service">BCN – Commons Customer Service</OPTION>
<OPTION value=3 data-DepartmentName="BCN">BCN</OPTION>
<OPTION value=7 data-DepartmentName="Customer Service">Customer Service</OPTION>
</select>
function ResetDepartment ()
{
var ResetDept = 'Clear Department';
var dropdown = $("#DispDepartmentBox");
var SelDept = $("#SelectDepartmentImpacted option");
var listDept = "";
$.each(SelDept, function(index, value) {
if ($('#SelDept').length > 0)
{
//I want to have a list of all my value so I can send it to the URL
listDept = ? //I want all the list value from the dropdown list like this listDept = (4,3,2,5)
}
});
$('#TxtDepartment').val('');
$.get( "getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "filter=" + encodeURIComponent(ResetDept), function (data) {
dropdown.html( data );
});
}
$("#TxtDepartment").keyup(function(evt) {
var SelDept = $("#SelectDepartmentImpacted option");
var listDept = '(';
$.each(SelDept, function (index, value) {
if ($('#SelectDepartmentImpacted').length > 0) {
listDept += $(value).val() + ',' ;
}
});
listDept = listDept.substring(0,listDept.length-1) + ')';
//URL encoded encodeURIComponent(myUrl)
$.get("getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "filter=" + encodeURIComponent($(this).val()), function (data) {
dropdown.html(data);
});
});
function ResetDepartment ()
{
var ResetDept = 'Clear Department';
var dropdown = $("#DispDepartmentBox");
var SelDept = $("#SelectDepartmentImpacted option");
var listDept = '(';
$.each(SelDept, function (index, value) {
if ($('#SelectDepartmentImpacted').length > 0) {
listDept += $(value).val() + ',' ;
}
});
listDept = listDept.substring(0,listDept.length-1) + ')';
alert(listDept);
$('#TxtDepartment').val('');
$.get("getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "filter=" + encodeURIComponent(ResetDept), function (data) {
dropdown.html(data);
});
}
My Keyup event is not working
am I missing something?
$("#TxtDepartment").keyup(function(evt) {
alert('Inside kepup event');
// you remaining code
...
});
$("#TxtDepartment").keyup(function(evt) {
alert('1. Key up Event fired');
var SelDept = $("#SelectDepartmentImpacted option");
var listDept = '(';
$.each(SelDept, function (index, value) {
if ($('#SelectDepartmentImpacted').length > 0) {
listDept += $(value).val() + ',' ;
}
});
listDept = listDept.substring(0,listDept.length-1) + ')';
alert('2. Dropdown List Values : ' + listDept);
alert('3. Text Entered, Filter : ' + $(this).val());
//URL encoded encodeURIComponent(myUrl)
$.get("getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "filter=" + encodeURIComponent($(this).val()), function (data) {
alert('4. GET function on success : ' + data);
dropdown.html(data);
});
});
I have kept 4 ALERTS in the code, now run & let me know what you can see when you enter filter value in TxtDepartment
I think the problem is with this (encodeURIComponent)
Can I do that to a list?
<cfset UlistDept = urlDecode(URL.listDept, "utf-8")>
$.get( "getDepartmentName.cfm?listDept=" + encodeURIComponent(listDept) + "&filter=" + encodeURIComponent($(this).val()), function (data) {
dropdown.html( data );
$.get( "getDepartmentName.cfm?listDept=" + listDept + "&filter=" + $(this).val(), function (data) {
dropdown.html( data );
Let me know what this results in ???Happy That I have been useful..
Good Luck for further coding :)
Open in new window
Play here - http://jsfiddle.net/mdshahHope that helps :)
Shah