How can I work with a struct returned from a cfc in jquery

Question

I have a cfc

<cffunction name="addEditPerson" access="remote" returntype="struct">
a bunch of cfarguments

<cfscript>
            var returnThis = structNew();
            var error = '';
            structInsert(returnThis,'success',0,true);
            structInsert(returnThis,'error','',true);
            structInsert(returnThis,'personID',arguments.personID,true);
            if (trim(arguments.fname) == ''){error=error&'<li>Enter a First Name</li>';}
            if (trim(arguments.lname) == ''){error=error&'<li>Enter a Last Name</li>';}
            if (len(trim(arguments.username)) lt 5){error=error&'<li>Enter a User Name (at least five(5) characters long)</li>';}
            if (trim(arguments.password) == ''){arguments.canLogin = false;}
            if (error != ''){
            structUpdate(returnThis,'error',error);
            return returnThis;
        }
</cfscript>

There is obviously more to the cfc but I can't seem to get the error to return from the structure.
I am using this jquery statement:

$("#addNewPerson").click(function(){
            var fName = $("#newPersonFname").val();
            var lName = $("#newPersonLname").val();
            var companyName = $("#newPersonCompanyName").val();
            var userName = $("#newPersonUserName").val();
            var roleID = $("#newPersonRole").val();
            var dataStr = 'fName='+fName+'&lName='+lName+'&companyName='+companyName+'&userName='+userName+'&roleID='+roleID;
              $.ajax({
                  type:"POST",
                  url:"/cfc/people.cfc?method=addEditPerson&returnformat=json",
                  data: dataStr,
                  cache:false,
                  success: function(msg) {
                  $("#newPersonError").html(msg.ERROR);
                  }
              });

        });

But in the success statement I am not sure how to get to the structure returned from the cfc. I would think I could call msg.error and get the info but I can't. I am using firebug in firedox and I can see that the POST request it being made but the response is complete empty. I don't know if it will make a difference but here is the form:

<div id="personForm">

    <div class="pageHeader">Add New Person</div>
    <div id="newPersonError"></div>
    First Name : <input id="newPersonFname" type="text" name="newPersonFname" value=""><br/>
    Last Name : <input id="newPersonLname" type="text" name="newPersonLname" value=""><br/>
    User Name : <input id="newPersonUserName" type="text" name="newPersonUserName" value=""><br/>
    Company Name : <input id="newPersonCompanyName" type="text" name="newPersonCompanyName" value=""><br/>
    Role : <select id="newPersonRole" name="newPersonRole">
                <option value="0">Select person's role<cfoutput query="roleList"><option value="#roleID#">#role#</cfoutput>
            </select><br/>
    <input id="addNewPerson" type="button" name="addPerson" value="Add New Person">
</div>

Any help is greatly apprieciated, Lance

Answer 1

First, use JSON (default is WDDX, which is deader than dead)! There're two way to do it. Either add returnformat="json" in the cffunction, or in the $.ajax(url="...?returnformat=json"

Then it should be the matter of using jQuery $.post or $.ajax, and set up the call back function right.

Answer 2

I'd use a form tag around the inputs with an id.

<div id="container">
<form id="personForm">
    ...
</form>
</div>

Make sure you have Coldfusion debugging turned off or suppressed for that CFC. Debugging will mangle the return json data.

Also, create a standard CFM page, init the cfc, and cfdump a call to the function in the body of the page. Make sure that you're happy with the output. If there are any errors with the struct, it will be easier to debug it this way than with jQuery and firebug. Once it is working, then call it from jQuery.

You can simplify your jQuery statement:

var peopleUrl = '/cfc/people.cfc?method=addEditPerson';

$.post(peopleUrl, $('#personForm').serialize(), function (msg) {
    $("#newPersonError").html(msg.ERROR);       
}, "json");

jQuery's .serialize() method will greatly simplify your javascript since you have named your form vars the same as your url params.

Remember that javascript is case sensitive whereas Coldfusion is not. I believe that Coldfusion returns everything upper case via remote. I think you have it correct by putting 'ERROR' in all caps.