Its JSON, I swear

I am mostly bogging this so I don't forget this stupid mistake I made. I am using jQuery to make an ajax call to a CFC. The CFC returns json data that I am using to populate a form.

The call worked just find and data was returned. However, for some reason, in JavaScript the JSON data was not being treated as JSON. I spent ages searching for solutions and doing trial and error.

This is the JavaScript call I was making:

view plain print about
1function getDetail(item){
2 $.ajax({
3 url: '/components/packages.cfc?method=getPackageByID',
4 cache: false,
5 type: "get",
6 data: {
7 packageid: item
8 },
9 success: function(data){
10 console.log(data.DATA);
11 }
12 });
13 }

This is the CFC that returned JSON.

view plain print about
1<cffunction name="getPackageByID" access="remote" returnformat="JSON" >
2        <cfargument name="packageid" required="true" type="numeric" >
3        
4        <cfset var getdata = "">
5        
6        <cfquery name="getdata" datasource="#request.dsn#" >
7            select * from package
8            where packageid = <cfqueryparam value="#arguments.packageid#" cfsqltype="cf_sql_integer" >
9        </cfquery>
10    
11        <cfreturn getData>
12    </cffunction>

Knowing what I know (which I started to question) I should have been able to use "data.DATA" to get to the JSON data in the result. However, when I output it to the console I would get "undefined". I also tried, among other things, "data[0]" which got me "{".

The lovely kicker was that the Chrome debugger network tab showed the call return as JSON.

I continued to try anything I could think of to get JavaScript to understand the return as JSON. All I ended up doing was finding a ton of ways to not process JSON.

Finally, I figured something out. It finally dawned on me that JavaScript was processing the data as a string not JSON. The "Intelligent Guess" feature of $.ajax() in jQuery was apparently failing to see the data as JSON.

I then added " dataType: 'json' " to the ajax call. Once I did that everything started working as expected.

If there is a moral here I would say it is to not expect data types to be auto assigned correctly. If you can, define what the data types will be. this will save you pain and anguish later.

Till next time...

--Dave

jQuery dialog with loaded content

I am working on a project where I wanted to load a dialog with detail on the selected item. This seemed fairly straight forward since jQuery is so awesome. However, I had a little trouble digging up a good example. So, after some research and combining multiple examples I got it working.

It is actually very easy to accomplish. Here is how...

First, the div that will become the dialog box. I just stuck this at the bottom of the page.

view plain print about
1<div id="dialog-detail" title="Item Detail">
2</div>

Then the JS code to open the dialog...

view plain print about
1function doDetail(itemID){
2    $("#dialog-detail").load('./eventDetail.cfm?id=' + itemID).dialog({modal: true});
3};

I have a link that calls the "doDetail" function and passes in the id of the selected item. The eventDetail.cfm file processes the id and returns the necessary info into the dialog.

One thing I found that was interesting that was the dialog auto sized to fit the content. Well kinda, it would auto grow the height but not the width. The width stayed the default and a horizontal scroll appeared.

Till next time...

--Dave

Javascript try/catch does not supress ColdFusion error message

While working with some ajax stuff this morning I can across an interesting issue. I have a dynamic form where fields could or could not be defined based on user action. So the function that processed the form was nimble in the fact that it could account for missing fields. Well, it was supposed to be. I kept getting an error message alert that said a field did not exist. I found this strange since the try/catch should have prevented the alert. Here is a strip down of the code I was using:

view plain print about
1<script language="javascript">    
2    try {
3        t = ColdFusion.getElementValue('user_eml');
4    } catch (err){
5        t = '';
6    }
7</script>

Since the form field with an id of "user_eml" did not exist ColdFusion.getElementValue threw an alert that the field did not exist. The try/catch did nothing to suppress the alert. I ended up changing the code to use getElementById and the try/catch worked as expected.

Till next time,

--Dave