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
Solved

Strange result with Jquery getJSON from CFC query

Posted on 2012-03-14
5
787 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
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 500 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

839 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