Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Strange result with Jquery getJSON from CFC query

Posted on 2012-03-14
5
Medium Priority
?
800 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
[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
  • 3
  • 2
5 Comments
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37723587
<!-- 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
ID: 37723602
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 2000 total points
ID: 37723617
/try this with currentoffice defined beforehand:

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

Author Closing Comment

by:ShanghaiD
ID: 37723833
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
ID: 37723881
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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
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…

598 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