Dependent Select Issues

Working with inherited code, i am having some issue with jquery not loading the data and populatin the dependant select:

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]]}

Open in new window

LVL 16
Gurpreet Singh RandhawaWeb DeveloperAsked:
Who is Participating?
 
hieloCommented:
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>";
            }

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Anything in the console? Load in chrome and see in the net tab if the Json is correctly received
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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]
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Download your Guide
 
Michel PlungjanIT ExpertCommented:
csubid is all uppercase
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
hmm! let me try that
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
That did not made any difference though
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
This worked, But please explain me how
0
 
hieloCommented:
go to jsbeautifier.org and paste your JSON data.  You will end up with:
{
    "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]
    ]
}

Open in new window


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).

Open in new window


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
0
 
Michel PlungjanIT ExpertCommented:
And apologies for not being able to decipher what you needed on my iPhone
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.

Advertise Here