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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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>
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.
ProculopsisCommented:
/try this with currentoffice defined beforehand:

$('#sel1').append( $( "<option />" ).val(col).text(col).prop( {selected: col == currentoffice }));

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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.
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

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.