Post form data to Fw/1(Coldfusion) controller function using AJAX

Question

I am new to FW1. I have got the basics but whenever I try to make it work it some other libraries its a pain. Its hard to figure whats going wrong.

I want to post the form data in newServer.cfm into a controller function in main.cfc using AJAX and jQuery(submitForm.js). The controller function sends the data to service(submit.cfc) which sends the data to DAO(submit.cfc) to be inserted into the database. Then returns the status if succeeded or not.

Folder Strucuture

submitForm.js

$(document).ready(function() {
    $("#submitForm").submit(function(){
        dataString = $("#submitForm").serialize();
        $.ajax({
        type: "POST",
        url: "index.cfm?action=main.submit",
        dataType: "json",
        data: dataString,
        success: function(response) {

            $("#result").html(response);

        },
                error: function(xhr, status, e) {
                    $("#result").html(status);
                }

        });

    });
});

main.cfc (Controller)

<cfcomponent accessors="true" output="false">

    <cfproperty name="submitService">

    <cfscript>

        function init( fw ) {
            variables.fw = fw;
            return this;
        }

            public function submit(rc){
            json = deserializeJson(rc);
            rc.status = submitService.submitForm(json);
            }

    </cfscript>

</cfcomponent>

submit.cfc (Service)

<cfcomponent accessors="true">

    <cfproperty name="submitDAO">

    <cffunction name="submitForm" returnType="boolean" access="public" output="false" hint="I return a list of blog entries">
        <cfargument name="json" type="struct" required="true" hint="" displayname="rc" />

        <cfset status = "">
        <cfset status = submitDAO.submitForm(json)>
        <cfreturn status>

    </cffunction>

</cfcomponent>

Just for checking I am returning a boolean value from DAO.

submit.cfc(DAO)

<cfcomponent accessors="true">

    <cffunction name="init" hint="I return an instance of myself">
        <cfreturn this>
    </cffunction>

    <cffunction name="submitForm" returntype="boolean" hint="I return a list of blog entries">
        <cfargument name="json" type="struct" required="true" hint="" displayname="rc" />
        <cfset var status = true>
        <cfreturn status>

    </cffunction>

</cfcomponent>

The form data is being posted but after that there is no response. Firebug shows error in jQuery line 8630:

xhr.send( options.hasContent && options.data || null );

I tried changing the URL in the ajax function to "controllers/main.cfc?method=submit" but still no avail.

Firebug console error:

Answer 1

I finally found the solution. There were many mistakes in my program. I will post it so that if somebody runs into similar problems, they can reference the code. I will include the main changes in the comments.

submitForm.js

$(document).ready(function() {
    $('#submitForm').submit(function(event){
        var dataString = $('#submitForm').serialize();
        $.ajax({
        type: 'POST',
        url: 'index.cfm?action=main.submit',
        data: dataString,
        dataType: 'json'
        })
        .done(function(response){

            console.log(response);

        })
        .fail(function(response) {

            console.log(response);

        });

    //I didnt prevent the default event from firing
    event.preventDefault();

    });
});