Solved

Dependent Select Issues

Posted on 2013-05-30
10
290 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
[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
 
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 16

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
Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

 
LVL 16

Author Comment

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

Author Comment

by:Gurpreet Singh Randhawa
ID: 39212423
That did not made any difference though
0
 
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 16

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

738 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