Solved

Strange result with Jquery getJSON from CFC query

Posted on 2012-03-14
5
784 Views
Last Modified: 2012-03-15
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:

0
Comment
Question by:ShanghaiD
  • 3
  • 2
5 Comments
 
LVL 20

Expert Comment

by:Proculopsis
Comment Utility
<!-- 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
 
LVL 20

Expert Comment

by:Proculopsis
Comment Utility
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
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
Comment Utility
/try this with currentoffice defined beforehand:

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

Author Closing Comment

by:ShanghaiD
Comment Utility
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
 

Author Comment

by:ShanghaiD
Comment Utility
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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
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…

728 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

10 Experts available now in Live!

Get 1:1 Help Now