Strange result with Jquery getJSON from CFC query

ScreenshotI'm populating a select with JSON data called from a CFC.  I've simplified the CFC below, so everything can be clearly seen.

After populating the select options using jQuery, I want to set the selected option value to a specific default.  However this does NOT work with the select populated by the JSON (shown on the left) and this is my problem.

When I manually code an identical select (except for its id) with the same data I can see with Firefox, the same jQuery code DOES work with that select (shown on the right).

I am lost for a solution and any guidance would be appreciated!

The code files are as follows:

test.cfc

<cfcomponent output="false">

 <cffunction name="getoffices" access="remote" output="no" returntype="query">
  <cfquery name="q">
   SELECT 'Beijing' AS Office
   UNION 
   SELECT 'Dalian' AS Office
   UNION 
   SELECT 'Guangzhou' AS Office
   UNION 
   SELECT 'Shanghai' AS Office
   UNION 
   SELECT 'Tianjin' AS Office
  </cfquery>
  <cfreturn q>
 </cffunction>

</cfcomponent>

Open in new window


testing.cfm:

<!DOCTYPE html>   
<head>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<div id="pagecontent">
<select id="sel1" style="width:120px;"></select>
<select id="sel2" style="width:120px;">
 <option value="Beijing">Beijing</option>
 <option value="Dalian">Dalian</option>
 <option value="Guangzhou">Guangzhou</option>
 <option value="Shanghai">Shanghai</option>
 <option value="Tianjin">Tianjin</option>
</select>
</div>
<!-- !Javascript - at the bottom for fast page loading -->
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 $('#sel1').children().remove();
 $.getJSON('cfc/test.cfc?method=getoffices&returnformat=JSON&queryformat=column', function(json) {
  $.each(json.DATA.OFFICE, function(i,col) {
   $('#sel1').append('<option value="' + col + '">' + col + '</option>');
  });
 });
 currentoffice = 'Shanghai';
 $('#sel1 option[value=' + currentoffice + ']').attr('selected', 'selected');
 $('#sel2 option[value=' + currentoffice + ']').attr('selected', 'selected');
		
});	

</script>
</body>
</html>

<!---
This is the JSON returned by the CFC used to populate $('#sel1'):

{"ROWCOUNT":5,"COLUMNS":["OFFICE"],"DATA":{"OFFICE":["Beijing","Dalian","Guangzhou","Shanghai","Tianjin"]}}

--->

Open in new window

The result in the browser:

ShanghaiDAsked:
Who is Participating?
 
ProculopsisConnect With a Mentor Commented:
/try this with currentoffice defined beforehand:

$('#sel1').append( $( "<option />" ).val(col).text(col).prop( {selected: col == currentoffice }));
0
 
ProculopsisCommented:
<!-- There doesn't seem to be anything wrong with your code -->

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 
 
<script type='text/javascript'>//<![CDATA[
$(function(){

var json = {
    "ROWCOUNT": 5,
    "COLUMNS": ["OFFICE"],
    "DATA": {
        "OFFICE": ["Beijing", "Dalian", "Guangzhou", "Shanghai", "Tianjin"]
    }
};

$('#sel1').children().remove();
// $.getJSON('cfc/test.cfc?method=getoffices&returnformat=JSON&queryformat=column', function(json) {
$.each(json.DATA.OFFICE, function(i, col) {
    $('#sel1').append('<option value="' + col + '">' + col + '</option>');
});
// });
currentoffice = 'Shanghai';
$('#sel1 option[value=' + currentoffice + ']').attr('selected', 'selected');
$('#sel2 option[value=' + currentoffice + ']').attr('selected', 'selected');
});//]]>  

</script>


</head>
<body>
 
<div id="pagecontent">
<select id="sel1" style="width:120px;"></select>
<select id="sel2" style="width:120px;">
 <option value="Beijing">Beijing</option>
 <option value="Dalian">Dalian</option>
 <option value="Guangzhou">Guangzhou</option>
 <option value="Shanghai">Shanghai</option>
 <option value="Tianjin">Tianjin</option>
</select>
</div>

</body>
</html>
0
 
ProculopsisCommented:
Oh! It's a timing problem, you are attempting to set the default before the success event handler has populated the select.  Try setting the default in the event handler.
0
 
ShanghaiDAuthor Commented:
It works!

Thanks a million for your techncial insight -- I'm still a newbie with jQuery (but loving it).

I had been going around in circles on this problem (there are in fact three interlinked selects in my real application).

I will study in more detail your alternative syntax (which is more elegant than mine -- and which also works!) to see how I can use that style in my other code.
0
 
ShanghaiDAuthor Commented:
A quick follow on comment/query:

When I look at the HTML in Firebug, although both selects now correctly show "Shanghai" as being selected, there is no ' selected="selected" ' in the sel1 select (from your solution) but there is for the sel2 (the hard coded option values).

How can the browser (correctly) show the sel1 Shanghai as selected when the HTML code does not show any selected item?

<select id="sel1" style="width:120px;">
<option value="Beijing">Beijing</option>
<option value="Dalian">Dalian</option>
<option value="Guangzhou">Guangzhou</option>
<option value="Shanghai">Shanghai</option>
<option value="Tianjin">Tianjin</option>
</select>
<select id="sel2" style="width:120px;">
<option value="Beijing">Beijing</option>
<option value="Dalian">Dalian</option>
<option value="Guangzhou">Guangzhou</option>
<option value="Shanghai" selected="selected">Shanghai</option>
<option value="Tianjin">Tianjin</option>
</select>

Open in new window

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.