I have some code that I am using to filter some user selections however I would like to use an existing html table as the datasource for the igcombo box. I need some jquery to select the "products" and "chargetypes" from the table and put them in an array to be used as a datasource for the igcombobox. Here is my code:
<html>
<head>
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<title>WebFOCUS Report</title>
<style type="text/css"></style>
<style type="text/css">
<!--
TABLE { border-collapse:collapse; }
TD { vertical-align:top; padding-left:6pt; padding-right:6pt; }
.x4 { font-family:TAHOMA; font-size:9pt; color:#424649; background-color:#FFFFFF;
border-style: NONE; }
.x9 { font-family:TAHOMA; font-size:9pt; color:#424649; background-color:#FFFFFF;
border-top: 1.00pt SOLID #FFFFFF; border-bottom: NONE; border-right: NONE; border-left: NONE; }
.x7_0 { font-family:TAHOMA; font-size:9pt; color:#424649; background-color:#FFFFFF;
border-top: 1.00pt SOLID #FFFFFF; border-bottom: NONE; border-right: NONE; border-left: 1.00pt SOLID #FFFFFF; }
.x7_1 { font-family:TAHOMA; font-size:9pt; color:#424649; background-color:#EAEBEC;
border-top: 1.00pt SOLID #FFFFFF; border-bottom: NONE; border-right: NONE; border-left: 1.00pt SOLID #FFFFFF; }
.x8_0 { font-family:TAHOMA; font-size:9pt; color:#424649; background-color:#FFFFFF;
border-top: 1.00pt SOLID #FFFFFF; border-bottom: NONE; border-right: 1.00pt SOLID #FFFFFF; border-left: 1.00pt SOLID #FFFFFF; }
.x8_1 { font-family:TAHOMA; font-size:9pt; color:#424649; background-color:#EAEBEC;
border-top: 1.00pt SOLID #FFFFFF; border-bottom: NONE; border-right: 1.00pt SOLID #FFFFFF; border-left: 1.00pt SOLID #FFFFFF; }
.x5 { font-family:TAHOMA; font-size:10pt; font-weight:bold; color:#FFFFFF; background-color:#56A0D3;
border-top: 1.00pt SOLID #FFFFFF; border-bottom: NONE; border-right: NONE; border-left: 1.00pt SOLID #FFFFFF; }
.x6 { font-family:TAHOMA; font-size:10pt; font-weight:bold; color:#FFFFFF; background-color:#56A0D3;
border-top: 1.00pt SOLID #FFFFFF; border-bottom: NONE; border-right: 1.00pt SOLID #FFFFFF; border-left: 1.00pt SOLID #FFFFFF; }
.x1 { font-family:TAHOMA; font-size:9pt; color:#424649; background-color:#FFFFFF; text-align:left;
border-style: NONE; }
.x2 { font-family:TAHOMA; font-size:11pt; font-weight:bold; color:#424649; background-color:#FFFFFF; text-align:center;
border-style: NONE; }
.x3 { font-family:TAHOMA; font-size:9pt; color:#424649; background-color:#FFFFFF; text-align:left;
border-style: NONE; }
-->
</style>
<script>
$(function() {
var dsCountry, dsCascTowns, dsCountryCascading,
dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;
dsCountry = [{
txtCountry: "3Delta Level 3",
valCountry: "Ta"
}, {
txtCountry: "Account Updater",
valCountry: "Au"
}, {
txtCountry: "DCC",
valCountry: "Dc"
}];
dsCascDistrict = [{
keyCountry: "Ta",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Ta",
txtDistrict: "3336",
valDistrict: "3336"
}, {
keyCountry: "Ta",
txtDistrict: "6064",
valDistrict: "6064"
}, {
keyCountry: "Ta",
txtDistrict: "6980",
valDistrict: "6980"
}, {
keyCountry: "Ta",
txtDistrict: "6081",
valDistrict: "6081"
}, {
keyCountry: "Au",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Au",
txtDistrict: "3345",
valDistrict: "3345"
}, {
keyCountry: "Au",
txtDistrict: "3346",
valDistrict: "3346"
}, {
keyCountry: "Au",
txtDistrict: "6214",
valDistrict: "6214"
}, {
keyCountry: "Dc",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Dc",
txtDistrict: "40",
valDistrict: "40"
}];
dsCascTowns = [{
keyDistrict: "NJ",
textTown: "Atlantic City",
valTown: "AtlanticCity"
}, {
keyDistrict: "NJ",
textTown: "Dover",
valTown: "Dover"
}, {
keyDistrict: "CA",
textTown: "Los Angeles",
valTown: "LosAngeles"
}, {
keyDistrict: "CA",
textTown: "San Francisco",
valTown: "San Francisco"
}, {
keyDistrict: "CA",
textTown: "San Diego",
valTown: "SanDiego"
}, {
keyDistrict: "IL",
textTown: "Chicago",
valTown: "Chicago"
}, {
keyDistrict: "NY",
textTown: "New York",
valTown: "NewYork"
}, {
keyDistrict: "NY",
textTown: "Buffalo",
valTown: "Buffalo"
}, {
keyDistrict: "FL",
textTown: "Miami",
valTown: " Miami"
}, {
keyDistrict: "FL",
textTown: "Orlando",
valTown: "Orlando"
}, {
keyDistrict: "SA",
textTown: "Sofia",
valTown: "Sofia"
}, {
keyDistrict: "SA",
textTown: "Pernik",
valTown: "Pernik"
}, {
keyDistrict: "PV",
textTown: "Plovdiv",
valTown: "Plovdiv"
}, {
keyDistrict: "PV",
textTown: "Asenovgrad",
valTown: "Asenovgrad"
}, {
keyDistrict: "V",
textTown: "Varna",
valTown: "Varna"
}, {
keyDistrict: "V",
textTown: "Kavarna",
valTown: "Kavarna"
}, {
keyDistrict: "V",
textTown: "Balchik",
valTown: "Balchik"
}, {
keyDistrict: "Y",
textTown: "Yambol",
valTown: "Yambol"
}, {
keyDistrict: "Y",
textTown: "Kermen",
valTown: "Kermen"
}, {
keyDistrict: "Y",
textTown: "Elhovo",
valTown: "Elhovo"
}, {
keyDistrict: "Y",
textTown: "Bolyarovo",
valTown: "Bolqrovo"
}, ];
$(function() {
$("#comboCountry").igCombo({
textKey: "txtCountry",
valueKey: "valCountry",
dataSource: dsCountry,
selectionChanged: function(evt, ui) {
var filteredCascDistrict = [];
if (ui.items && ui.items[0]) {
var itemData = ui.items[0].data;
if (itemData.valCountry == "US") {
$("#state").css("display", "none");
$("#district").css("display", "block");
} else {
$("#state").css("display", "none");
$("#district").css("display", "block");
}
filteredCascDistrict = dsCascDistrict.filter(function(district) {
return district.keyCountry == itemData.valCountry;
});
}
var $comboDistrict = $("#comboDistrict");
$comboDistrict.igCombo("deselectAll", {}, true);
$comboDistrict.igCombo("option", "dataSource", filteredCascDistrict);
$comboDistrict.igCombo("dataBind");
var disableChildCombo = filteredCascDistrict.length == 0;
$comboDistrict.igCombo("option", "disabled", disableChildCombo);
},
itemsRendered: function(evt, ui) {
ui.owner.deselectAll();
}
});
$("#comboDistrict").igCombo({
valueKey: "valDistrict",
textKey: "txtDistrict",
dataSource: [],
disabled: true,
filteringCondition: "startsWith",
multiSelection: {
enabled: true
},
selectionChanged: function(evt, ui) {
var filteredCascTown = [];
if (ui.items && ui.items[0]) {
var itemData = ui.items[0].data;
var filteredCascTown = dsCascTowns.filter(function(town) {
return town.keyDistrict == itemData.valDistrict;
});
}
var $comboTown = $("#comboTown");
$comboTown.igCombo("deselectAll");
$comboTown.igCombo("option", "dataSource", filteredCascTown);
$comboTown.igCombo("dataBind");
var disableChildCombo = filteredCascTown.length == 0;
$comboTown.igCombo("option", "disabled", disableChildCombo);
}
});
$("#comboTown").igCombo({
valueKey: "valTown",
textKey: "textTown",
disabled: true
});
});
});
</script>
</head>
<body>
<table cellpadding=1 style='margin-left:21pt;margin-right:18pt;margin-top:18pt;margin-bottom:18pt'>
<col>
<col>
<col>
<col>
<tr><td style='padding-left:0pt' colspan=4 class='x1'>
<table border=0 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td class='x2'>
PRODUCT AND CHARGE TYPES</td>
</tr>
<tr>
<td NOWRAP class='x3'>
<a style='color:#424649'href="/ibi_apps/WFServlet.ibfs?IBIF_webapp=/ibi_apps&IBIC_server=EDASERVE&IBIWF_msgviewer=OFF&&IBIMR_drill=IBFS,RUNFEX,IBIF_ex,true&IBIF_ex=/WFC/Repository/Dillon/PRODUCT/Product_Charge_Type_Report.fex&CLICKED_ON=&WFFMT=EXL2K" TARGET="_new"><IMG SRC="/approot/epos/images/excel.png" border=0></a>
</td>
</tr>
</table></td></tr>
<tr>
<td colspan=4 class='x4'>
</td>
</tr>
<tr>
<td NOWRAP style="vertical-align:bottom" class='x5'>
PRODUCT</td>
<td NOWRAP align=RIGHT style="vertical-align:bottom" class='x5'>
CHARGE TYPE</td>
<td NOWRAP style="vertical-align:bottom" class='x5'>
SHORT DESCRIPTION</td>
<td NOWRAP style="vertical-align:bottom" class='x6'>
LONG DESCRIPTION</td>
</tr>
<tr>
<td NOWRAP class='x7_0'>
3Delta Level 3</td>
<td NOWRAP align=RIGHT class='x7_0'>
3336</td>
<td NOWRAP class='x7_0'>
3DELT AUTH</td>
<td NOWRAP class='x8_0'>
3DELTA PER AUTH FEE</td>
</tr>
<tr>
<td NOWRAP class='x7_0'>
Account Updater</td>
<td NOWRAP align=RIGHT class='x7_0'>
6214</td>
<td NOWRAP class='x7_0'>
AU MNTHLY</td>
<td NOWRAP class='x8_0'>
ACCOUNT UPDATER MONTHLY</td>
</tr>
<tr>
<td NOWRAP class='x7_1'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_1'>
5037</td>
<td NOWRAP class='x7_1'>
ACS PLUS S</td>
<td NOWRAP class='x8_1'>
ACS PLUS SALE</td>
</tr>
<tr>
<td NOWRAP class='x7_0'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_0'>
6146</td>
<td NOWRAP class='x7_0'>
ACS SETUP</td>
<td NOWRAP class='x8_0'>
ACS SETUP FEE</td>
</tr>
<tr>
<td NOWRAP class='x7_1'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_1'>
5613</td>
<td NOWRAP class='x7_1'>
ACS SALE</td>
<td NOWRAP class='x8_1'>
ACS SOFTWARE - SALE</td>
</tr>
<tr>
<td NOWRAP class='x7_0'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_0'>
6147</td>
<td NOWRAP class='x7_0'>
ACS MO FEE</td>
<td NOWRAP class='x8_0'>
ACS MONTHLY FEE</td>
</tr>
<tr>
<td NOWRAP class='x7_1'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_1'>
5613</td>
<td NOWRAP class='x7_1'>
ACS SALE</td>
<td NOWRAP class='x8_1'>
ACS SOFTWARE - SALE</td>
</tr>
<tr>
<td NOWRAP class='x7_0'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_0'>
6146</td>
<td NOWRAP class='x7_0'>
ACS SETUP</td>
<td NOWRAP class='x8_0'>
ACS SETUP FEE</td>
</tr>
<tr>
<td NOWRAP class='x7_1'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_1'>
6147</td>
<td NOWRAP class='x7_1'>
ACS MO FEE</td>
<td NOWRAP class='x8_1'>
ACS MONTHLY FEE</td>
</tr>
<tr>
<td NOWRAP class='x7_0'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_0'>
6147</td>
<td NOWRAP class='x7_0'>
ACS MO FEE</td>
<td NOWRAP class='x8_0'>
ACS MONTHLY FEE</td>
</tr>
<tr>
<td NOWRAP class='x7_1'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_1'>
5037</td>
<td NOWRAP class='x7_1'>
ACS PLUS S</td>
<td NOWRAP class='x8_1'>
ACS PLUS SALE</td>
</tr>
<tr>
<td NOWRAP class='x7_0'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_0'>
5613</td>
<td NOWRAP class='x7_0'>
ACS SALE</td>
<td NOWRAP class='x8_0'>
ACS SOFTWARE - SALE</td>
</tr>
<tr>
<td NOWRAP class='x7_1'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_1'>
6943</td>
<td NOWRAP class='x7_1'>
ACS FEE</td>
<td NOWRAP class='x8_1'>
ACS FEE</td>
</tr>
<tr>
<td NOWRAP class='x7_0'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_0'>
6146</td>
<td NOWRAP class='x7_0'>
ACS SETUP</td>
<td NOWRAP class='x8_0'>
ACS SETUP FEE</td>
</tr>
<tr>
<td NOWRAP class='x7_1'>
Automated Customer Service</td>
<td NOWRAP align=RIGHT class='x7_1'>
5614</td>
<td NOWRAP class='x7_1'>
ACS RENT</td>
<td NOWRAP class='x8_1'>
ACS SOFTWARE - RENTAL</td>
</tr>
<tr>
<td class='x9'> </td>
<td class='x9'> </td>
<td class='x9'> </td>
<td class='x9'> </td>
</tr>
</table>
<div class="group-container overHidden" id="before">
<IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
<form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
<div class="overHidden">
<div class="comboGroup">
<div>Product</div>
<span id="comboCountry"></span>
</div>
<div class="comboGroup2">
<div id="state">
<br />
</div>
<div id="district">ChargeType</div>
<span id="comboDistrict"></span>
</div>
<!-- <div class="comboGroup">
<div>Town</div>
<span id="comboTown"></span>
</div> -->
</div>
<br>
<br>
<INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
</form>
<!-- frame goes here -->
</div>
<div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
<!-- Some Content After the form. -->
<script language="JavaScript">
function _submit_form(){
/* document.getElementById('before').style.display = 'none'; */
/* document.getElementById('after').style.display = 'block'; */
var text1 = $("#comboCountry").igCombo("text");
var text2 = $("#comboDistrict").igCombo("text");
/* To handle text for one or multiple chargetypes */
if (text2.indexOf(',') >= 0) {
document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeTypes are " + text2;
} else {
document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeType is " + text2;
}
return true
}
</script>
</body>
</html>