Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
COURSE of the MONTH
12 days, 2 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Dependent Select Issues
Posted on 2013-05-30
Working with inherited code, i am having some issue with jquery not loading the data and populatin the dependant select:
Code:
Code:
<script type="text/javascript">
$(document).ready(function() {
//first, detect when initial DD changes
$("#parent_select").change(function() {
//get what they selected
var selected = $("option:selected",this).val();
//no matter what, clear the other DD
$("#child_select").children().remove().end().append("<option value=\"\">Select Option</option>");
//now load in new options if I picked a state
if(selected == "") return;
$.getJSON("categories.cfc?method=getContactSubCategory&returnformat=json",{"ccatID":selected}, function(res,code) {
var newoptions = "";
for(var i=0; i<res.length; i++) {
//In our result, ID is what we will use for the value, and NAME for the label
newoptions += "<option value=\"" + res[i].csubid + "\">" + res[i].contact_subcategory + "</option>";
}
$("#child_select").children().end().append(newoptions);
});
});
});
</script>
<select id="parent_select" name="parent_select">
<option value="">--</option>
<cfoutput query="getContactCategory">
<option value="#ccatID#">#contact_category#</option>
</cfoutput>
</select>
<br><br>
<b>Select issue details:</b><br>
<select id="child_select" name="child_select">
<option value="">Select Option</option>
</select>
JSON:
{"COLUMNS":["CSUBID","CONTACT_SUBCATEGORY","CATID"],"DATA":[[3,"Tracking shows delivered but shipment not received",1],[2,"Shipment is late",1],[4,"Product stuck in a courier",1],[5,"Other order issues",1],[1,"Check Status of my order",1]]}
[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
4-
4
2
10 Comments
This i see in chrome's console
COLUMNS: [CSUBID, CONTACT_SUBCATEGORY, CATID]
0: "CSUBID"
1: "CONTACT_SUBCATEGORY"
2: "CATID"
DATA: [[7, Received wrong product, 2], [6, Received damaged product, 2],…]
0: [7, Received wrong product, 2]
1: [6, Received damaged product, 2]
2: [10, Missing product or part of it, 2]
3: [9, Denied a tampered box, 2]
4: [8, Defective item, 2]
COLUMNS: [CSUBID, CONTACT_SUBCATEGORY, CATID]
0: "CSUBID"
1: "CONTACT_SUBCATEGORY"
2: "CATID"
DATA: [[7, Received wrong product, 2], [6, Received damaged product, 2],…]
0: [7, Received wrong product, 2]
1: [6, Received damaged product, 2]
2: [10, Missing product or part of it, 2]
3: [9, Denied a tampered box, 2]
4: [8, Defective item, 2]
I cannot help you further until I get to a real computer tomorrow.
Have a look at the generated code. Javascript is case sensitive.
There should be some errors in the error console in chrome or Firefox with firebug installed
Have a look at the generated code. Javascript is case sensitive.
There should be some errors in the error console in chrome or Firefox with firebug installed
Active 2 days ago
try:
for(var i=0; i<res.DATA.length; i++) {
//In our result, ID is what we will use for the value, and NAME for the label
newoptions += "<option value=\"" + res.DATA[i][0] + "\">" + res.DATA[i][1] + "</option>";
}
Active 2 days ago
go to jsbeautifier.org and paste your JSON data. You will end up with:
The code above is what the "rs" variable has. Clearly the id and description you need for the <option> tags are in the "DATA" element. rs.DATA is an array that contains 5 elements/items. Thus,
rs.DATA[0] has the array
[3, "Tracking shows delivered but shipment not received", 1]
rs.DATA[1] has the array
[2, "Shipment is late", 1]
etc. Notice that on each of these arrays, the first element (index 0) has the ID for the value of the <option>. Also, the second element (index 1) has the text/description for the <option> tag.
Knowing this, if you want the id (3) for the first array, you need to use rs.DATA[0][0]. Likewise, to get the description "Tracking ...received", then you need to "access" it as rs.DATA[0][1].
On the code I posted, the variable "i" varies between 0 through 4 (inclusive), that's why you see:
If that still doesn't help you, I suggest you read up a little on JSON:
http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29
Hielo
{
"COLUMNS": ["CSUBID", "CONTACT_SUBCATEGORY", "CATID"],
"DATA": [
[3, "Tracking shows delivered but shipment not received", 1],
[2, "Shipment is late", 1],
[4, "Product stuck in a courier", 1],
[5, "Other order issues", 1],
[1, "Check Status of my order", 1]
]
}
The code above is what the "rs" variable has. Clearly the id and description you need for the <option> tags are in the "DATA" element. rs.DATA is an array that contains 5 elements/items. Thus,
rs.DATA[0] has the array
[3, "Tracking shows delivered but shipment not received", 1]
rs.DATA[1] has the array
[2, "Shipment is late", 1]
etc. Notice that on each of these arrays, the first element (index 0) has the ID for the value of the <option>. Also, the second element (index 1) has the text/description for the <option> tag.
Knowing this, if you want the id (3) for the first array, you need to use rs.DATA[0][0]. Likewise, to get the description "Tracking ...received", then you need to "access" it as rs.DATA[0][1].
On the code I posted, the variable "i" varies between 0 through 4 (inclusive), that's why you see:
rs.DATA[i][0] //(the id)
//and
rs.DATA[i][1] //(the description).
If that still doesn't help you, I suggest you read up a little on JSON:
http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29
Hielo
Featured Post
Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses
Course of the Month12 days, 2 hours left to enroll
752 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.