Solved

Dependent Select Issues

Posted on 2013-05-30
10
286 Views
Last Modified: 2013-06-01
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

0
Comment
  • 4
  • 4
  • 2
10 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39210414
Anything in the console? Load in chrome and see in the net tab if the Json is correctly received
0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39211864
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39211908
csubid is all uppercase
0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39212420
hmm! let me try that
0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39212423
That did not made any difference though
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39212534
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
 
LVL 82

Accepted Solution

by:
hielo earned 400 total points
ID: 39213387
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
 
LVL 15

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 39213417
This worked, But please explain me how
0
 
LVL 82

Expert Comment

by:hielo
ID: 39213737
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39213917
And apologies for not being able to decipher what you needed on my iPhone
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now