Cutter's Crossing

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

• #1 by henryho167 on 5/3/12 - 8:09 PM

  

  FYI there's SerializeJSON(queryObj, true) that will output an easier data structure for consumption. http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef...

• #2 by Cutter on 5/3/12 - 9:12 PM

  

  Henry,
  
  While that is true, it's not relevant for our use case. In this use case, adding returnFormat=true to the ajax request forces ColdFusion to serialize the JSON, rather than having it as part of the method. the SerializeJSON() ColdFusion method has it's uses, but in this use case you are able to write CFC methods that return standard CF data types, and therefore be reusable across your application, server-side or remote request.
  
  For further info, see the blog post I referenced above about nesting your query inside a larger object.

• #3 by Julian Halliwell on 5/6/12 - 9:56 AM

  

  Very smart idea to handle this quirk of CF on the client side, Steve, and still get the benefit of the smaller JSON it produces.
  
  I couldn't get your plugin to work though until I realised it is actually designed to handle the alternative JSON format that CF produces if you use the queryFormat="column" parameter (or the function + arg Henry mentions), rather than the default format for a query returned as JSON, which is what you describe in your post and docs.

• #4 by Julian Halliwell on 5/6/12 - 2:09 PM

  

  I was wrong about your function, Steve. It *does* work with the default JSON format for queries, but your function seems to be expecting the query object to be part of a higher level struct/object (presumably because of the recursion you've built in). If you just pass the query object on its own it doesn't work. So the following won't work:
  
  var data   = {
  "COLUMNS":["ID","NAME","EMAIL"],
  "DATA":[[1,"Ed Spencer","ed@sencha.com"],[2,"Abe Elias","abe@sencha.com"],[3,"Cutter","no@address.giv"]]
  };
  console.log( $.serializeCFJSON( q ) );
  
  But if I create another object, attach the query data to it and then pass that to your function, it does work:
  
  var data   = {
  "COLUMNS":["ID","NAME","EMAIL"],
  "DATA":[[1,"Ed Spencer","ed@sencha.com"],[2,"Abe Elias","abe@sencha.com"],[3,"Cutter","no@address.giv"]]
  };
  var temp   =   new Object();
  temp.data   =   data;
  console.log( $.serializeCFJSON( temp ) );

• #5 by Julian Halliwell on 5/6/12 - 3:45 PM

  

  Typo in the previous comment, sorry:
  
  console.log( $.serializeCFJSON( q ) );
  
  in the first example should have been
  
  console.log( $.serializeCFJSON( data ) );

• #6 by Cutter on 5/8/12 - 9:09 AM

  

  @Julian,
  
  Thanks for the heads up. I must've missed that in testing. I've just loaded v0.2 to the GitHub repository, which addresses the issue.

• #7 by Erik on 5/29/12 - 1:18 AM

  

  Hi,
  
  I have been trying to implement this plugin but I get every character of my json as an individual element. Are there any more examples for the use of thisplugin apart from the github?
  
  Looks like a fantastic plugin.
  
  Erik

• #8 by Cutter on 5/29/12 - 8:15 AM

  

  Erik,
  
  I'm sure there are, but I couldn't tell you off the top of my head. Can you send me some sample code? Copy and paste your ajax response out of Firebug? If you can do that (through the contact form) I'll see what I can do to help you.

• #9 by Franc on 11/14/12 - 10:06 PM

  

  I was also unable to get it working out of the box and had to put the json object in a structure before I figured it out. See below
  
  success: function (json) {
  console.log($.serializeCFJSON({data:json}));
  }

• #10 by Cutter on 11/16/12 - 10:10 AM

  

  @Franc,
  
  Sounds like your ajax config is missing something. Can you hit the contact form, and send me an example of your full ajax request? It might be something simple. (might want to send a sample of your request return as well)

• #11 by Scott on 12/21/12 - 9:43 AM

  

  Hi, Im having problems getting data to show using the plugin with jqgrid - javascript is as such:
  
  var populateGrid = function (postdata) {
  $.ajax({
  url:'/components/orders.cfc',
  data: postdata,
  method:'POST',
  dataType:"json",
  success:function(d,r,o){
  var s;
  if(d.success){
  grid[0].addJSONData($.serializeCFJSON(d));
  } else {
  console.log('didnt load data');
  }
  }
  })
  };
     
  grid.jqGrid({
  autowidth: true,
  height: 250,
  loadui: 'block',
  altRows: true,
  deepempty: true,
  pager:'##pager',
  toppager: false,
  pagerpos:'left',
  rowNum:50,
  rowList:[10,20,30,40,50],
  viewrecords: true,
  colModel: [
  {name:'date_placed'},
  {name:'id_order'},
  {name:'po'},
  {name:'totalparts'},
  {name:'total'}
  ],
  postData {method:"getOrdersProxy",returnFormat:"JSON",customerId:"2851"},
  datatype: populateGrid,
  jsonReader: {
  id: "id_order",
  root: function(obj){return obj.data;},
  page: function (obj) { return 1; },
  total: function (obj) { return 1; },
  records: function (obj) { return obj.recordCount; },
  cell:""
  }
  });
  });
  
  My cfc is just returning a simple nested query as in you examples.

• #12 by Michael Sumner on 2/24/13 - 2:15 AM

  

  Steve,
  
  I tried your serializeCFJSON but got this error
  TypeError: invalid 'in' operand obj
  [Break On This Error]    
  
  typeof length === "number" && length > 0 && ( length - 1 ) in obj );
  
  jquery.js (line 965
  
  I got the json that cf sent logged to the console, I included the
  jquery.serializecfjson-0.2.js right after jquery
  
  Your function is being called in the success of a form submit
  
  $.ajax({
           type: "POST",
        url: "/cfc/show_specials_Service.cfc?method=submitSS",
     data: dataString,
        dataType: "xml",
        success: function(data){
              console.log(this.data);
              /*alert('this works');*/
              $.ajax({
                 url: "/cfc/show_specials_service.cfc?method=getSSS",
                 success: function(response){
                  console.log(response);
                 
                 
                 var ret = $.serializeCFJSON(response);
                 
                 console.log(ret);
  
  Maybe you can see something I missed.