#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4

    Postdata with ajax using JSONUtil component


    Hi peers,
    iam having some difficulties on resolving may be an easy issue for you ..

    So i'am using the handsontable plugin (handsontable.com) to load or save data using ajax. So for loading data everything works just fine.. but i do not know how to deal with the save part as i want the data to be saved into a database. Any help will be much appreciated.
    Also to add that iam using CF-MX 7 , so means that iam using a proxy cfm file to call my cfc component (JSONUtil created by Raymond Cadmen)

    Thanks

    below is my code on the :

    on the cfm side calling ajax :

    Code:
    $.ajax({ url: "save_proxy.cfm", data: {"data": handsontable.getData()}, //returns all cells' data dataType: 'json', type: 'POST', success: function (res) { if (res.result === 'ok') { $console.text('Data saved'); } else { $console.text('Save error'); } }, error: function () { $console.text('Save error. POST method is not allowed on GitHub Pages. Run this example on your own server to see the success message.'); } }); // stop propagation of the save button click event return false; });
    the save_proxy.cfm file has the following code :

    PHP Code:
    <cfinvoke component="JSONUtil" method="deserializeFromJSON" returnVariable="rtrnresult"> <cfinvokeargument name="JSONVar" value="#data#"> <cfinvokeargument name="strictMapping" value="true"> </cfinvoke> <cfoutput>#rtrnresult#</cfoutput> 
    and JSONUTil cfc can be found at Riaforge.org.

    i think my issue is on the save_proxy.cfm but need you to confirm with me

    Thanks guys
  2. #2
  3. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,281
    Rep Power
    968
    I'm not sure what you're actually asking. If the data is being posted to your save_proxy.cfm file, can't you just use cfquery to insert the data into your database?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    Hi kiteless,
    thnaks for your reply . i need to validate the data first and display it first to make sure.

    1- i so not know how to call the data into my componenet in order to deserializefrom json
    2- my data looks like below in the response tab in the debuger :
    data[0][] 175
    data[0][] project1
    data[10][] 252
    data[10][] Wproject2

    So how can i proceed with an update for pproject 1 for example where ID = 175.

    BUt before everything i need to displya my data..so how i can call that ?
    thanks


    Originally Posted by kiteless
    I'm not sure what you're actually asking. If the data is being posted to your save_proxy.cfm file, can't you just use cfquery to insert the data into your database?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    It is not posted in the save_proxy.cfm.
    i just see it in the debugger window but not as an output in save_proxy.cfm. So, i want to see my json posted data.

    thanks Kiteless

    Originally Posted by kiteless
    I'm not sure what you're actually asking. If the data is being posted to your save_proxy.cfm file, can't you just use cfquery to insert the data into your database?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    Any thoughts Kitless ?

    Originally Posted by korssane
    It is not posted in the save_proxy.cfm.
    i just see it in the debugger window but not as an output in save_proxy.cfm. So, i want to see my json posted data.

    thanks Kiteless
  10. #6
  11. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,281
    Rep Power
    968
    You need to deserialize the JSON into a CF data structure, and then use that to populate a cfquery to insert it into the database.

    I've never used the JSONUtil CFC so I have no idea how it works. Have you read the docs or looked at the tests in the SVN repository?
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    Hi Kiteless,
    I have read the doc but there is no test. only the readme. I tired to follow that but nothing happen. i thinkk i need to know how to create that CF data structure that takes the data posted from ajax. here is the readme for that cfc method :

    Code:
    deserializeJSON: Converts a JSON (JavaScript Object Notation) string data representation into CFML data, such as a CFML structure or array. -Arguments- JSONVar: A string that contains a valid JSON construct, or variable that represents one. strictMapping: A Boolean value that specifies whether to convert the JSON strictly, as follows: true: (Default) Convert the JSON string to ColdFusion data types that correspond directly to the JSON data types. false: Determine if the JSON string contains representations of ColdFusion queries, and if so, convert them to queries.


    and here is my cfm file that calls the cfc :


    Code:
    <cfinvoke component="JSONUtil" method="deserializeFromJSON" returnVariable="rtn_result"> <cfinvokeargument name="JSONVar" value="data"> <cfinvokeargument name="strictMapping" value="true"> </cfinvoke> <cfoutput>#rtn_result#></cfoutput>





    Originally Posted by kiteless
    You need to deserialize the JSON into a CF data structure, and then use that to populate a cfquery to insert it into the database.

    I've never used the JSONUtil CFC so I have no idea how it works. Have you read the docs or looked at the tests in the SVN repository?
  14. #8
  15. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,281
    Rep Power
    968
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    Hi Kiteless,
    i have tried the following (JSON.stringify) :

    Code:
    $.ajax({ url: "save_proxy.cfm", //data: {"data": handsontable.getData()}, //returns all cells' data data: {"data": JSON.stringify(handsontable.getData())}, dataType: 'json', type: 'POST', success: function (res) { if (res.result === 'ok') { $console.text('Data saved'); } else { $console.text('Save error'); } }, error: function () { $console.text('Save error. POST method is not allowed on GitHub Pages. Run this example on your own server to see the success message.'); } }); // stop propagation of the save button click event return false; });
    Now i get the following in my response tab in firebug :

    [[175,"Project1"],
    [176,"Project 2"],
    [183,"Project 3"],
    [196,"Project 4"]


    which great.. so i want you to help me on how i create a cfstructure to be able to update each record like the following :
    update project_name where project_id =175
    update project_name where project_id =176
    update project_name where project_id =183
    ......

    same thing for the other records..


    How can this be processed.


    Thanks

    Originally Posted by kiteless
  18. #10
  19. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,281
    Rep Power
    968
    I'm not really sure how many times you want me to tell you the same thing, but I'll try it one more time:

    1. In your save_proxy.cfm file (which is receiving the JSON data sent by the browser), use JSONUtil's deserialize() method to transform the JSON string into a CF array.
    2. Then loop over that array and do whatever database updates you need to do.


    I really can't make it any more clear than this. I even linked to the unit tests for JSONUtil, which has an entire test case just for testing the deserialization. Have you even looked at that? I've broken it down for you into two steps...so I don't know what else you're asking me to explain to you.
    Last edited by kiteless; November 26th, 2012 at 04:57 PM.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    60
    Rep Power
    4
    Thanks for the help.

    Originally Posted by kiteless
    I'm not really sure how many times you want me to tell you the same thing, but I'll try it one more time:

    1. In your save_proxy.cfm file (which is receiving the JSON data sent by the browser), use JSONUtil's deserialize() method to transform the JSON string into a CF array.
    2. Then loop over that array and do whatever database updates you need to do.


    I really can't make it any more clear than this. I even linked to the unit tests for JSONUtil, which has an entire test case just for testing the deserialization. Have you even looked at that? I've broken it down for you into two steps...so I don't know what else you're asking me to explain to you.
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep Power
    0
    In addition to the content-type, we also have to think about the content value itself; or rather, the "data" value of the jQuery.ajax() invocation. If we set the data value to an Object, jQuery will serialize the object into name-value query-string pairs which will then be appending the URL. To prevent this from happening, we have to manually serialize our post data and pass it in as a string. If the data value is already a string, jQuery will not apply any additional processing.

IMN logo majestic logo threadwatch logo seochat tools logo