CODEWITHSUNDEEP
jquerycoldfusion
Rob M
Rob M

Reputation: 1031

Select box filled by json response using jquery and coldfusion

Let me preface this question. I have just started using jquery, so please be kind.

I have searched for this answer, and I cannot seem to find anything that works, so I'm asking the question here.

I am going to have a page that contains a group of select boxes that will populate a list of check boxes based on which option in the select is chosen. I haven't got that far yet. All I got so far is using the $.ajax to retrieve the data from the server. If I view the firebug console I see my JSON string.

{"DESCRIPTION":"Global Alpha I Benchmark","INCEPTION_DATE":"2004-02-29 00:00:00.0","DISCLOSURE":"","BENCHMARK_ID":"EBDVGA1INDEX"}

Here is the javascript:

    $(document).ready(function(){
    $(':input:visible:enabled:first').focus();
    $(function(){
        $("select#benchmarks").change(function(){
            var formval = {benchmarks:$(this).val()}
            $.ajax({
                type:"POST",
                data: formval,
                url: "request_processor.cfm",
                datatype: "json",
                success:$(function(response){alert(response);})

            });
        });
    });
});

HTML:

<cfform name="testForm">
<div align="center" id="databox">
    <cfselect id="benchmarks" name="benchmarks" query="getBenchmarks" queryPosition="below" value="benchmark_id" display="benchmark_id">
        <option value="">Please Select an ID...</option>
    </cfselect>
    <cfselect id="myselect" name="myselect"></cfselect>
</div>
<div id="contentdiv"></div>

I have mucked something up, and now I can't even get data to show on the screen, so I don't know what to do. Any help would be appreciated. \

UPDATE:

@Rob

I have added the following to the success portion of the ajax call.

$.each(response,function(index){
options = "<option value='"+ response.description + "'>" + response.description + "</option>"
});
$("select#myselect").html(options);

Now nothing happens! No javascript error, no errors in the firebug console.

Upvotes: 1

Views: 1235

Answers (2)

Dan A.
Dan A.

Reputation: 2924

I see a few issues with your "each" code. First of all, based on your JSON string originally posted, you have a single object. Unless you wrap it in [], .each will iterate over each property, such as description and inception date. If it's wrapped in brackets, it will iterate over it as if it is an array, once for each item in the collection.

So, assuming you pass it an array, your code should look like:

var options = '';
$.each(response, function(){
    options += "<option value='"+ this.DESCRIPTION + "'>" + this.DESCRIPTION + "</option>";
});
$("select#myselect").html(options);

I've made two changes. First, I concatenate to the options string, so all options are collected. I'm also using "this" to point to the correct item within the loop.

Edit: I've also changed the case of DESCRIPTION. I believe it's case-sensitive.

Upvotes: 1

Robert Beuligmann
Robert Beuligmann

Reputation: 1444

success:$(function(response){alert(response);})

should be

success:function(response){alert(response);}

$(function) is a shortcut for $(document).ready(function), so your not actually binding a real function for the ajax success callback.

Update: just noticed you have another un-needed $()

$(function(){
  $("select#benchmarks").change(function(){
  ...
)

You are already inside a document ready event, there is no need to add another callback to document ready at this point.

Upvotes: 2

Related Questions