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

[Subash Maharjan]

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:

[Puritan Paul]

I think you’ll need to use the renderData function to send something back, otherwise the framework is just going to look for a view to render.  Most of my api calls like this end with some version of this:

variables.fw.renderData('json', insertDataToReturnHere);

--
FW/1 documentation: http://framework-one.github.io
FW/1 source code: http://github.com/framework-one/fw1
FW/1 chat / support: https://gitter.im/framework-one/fw1
FW/1 mailing list: http://groups.google.com/group/framework-one
---
You received this message because you are subscribed to the Google Groups "framework-one" group.
To unsubscribe from this group and stop receiving emails from it, send an email to framework-on...@googlegroups.com.
Visit this group at http://groups.google.com/group/framework-one.
For more options, visit https://groups.google.com/d/optout.

[Nando Breiter]

Subash,

I'll post a working example below. Form submission and rendering any change are separated.

// use the jquery validate plugin to validate and submit

$( '#childForm' ).validate( {

// ignore: "",

rules: {

lastName: "required",

firstName: "required",

amountPerMonth: {

required: true,

number: true

},

startDateFamilyAssistanceDisplay: {

required: true,

dateEU: true

},

expirationDateFamilyAssistanceDisplay: {

required: false,

dateEU: true

}

},

messages: {

lastName: "",

firstName: "",

amountPerMonth: "",

startDateFamilyAssistanceDisplay: "",

expirationDateFamilyAssistanceDisplay: ""

},

submitHandler: function(form) {

// console.log('submitted ....');

var values = $('#childForm').serialize();

console.log(values);

// console.log(values);

$.post('index.cfm?p=emp.saveChild', values,

function(data,status) {

if(status == 'success'){

$("#children").trigger('refreshChildren');

$('#childDialog').dialog('close');

};

});

}

});

function renderChildren() {

var employeeId = $("#employeeIdMain").val();

$.post('index.cfm?p=emp.renderChildren',{employeeId:employeeId},

 function(data,status) {

 $("#children").html(data);

});

};

        $("#children").bind('refreshChildren', renderChildren);

$("#children").trigger('refreshChildren');

emp.saveChild renders a blank view

emp.renderChildren renders the html needed to render the children

Hope that might help you.

Aria Media Sagl
Via Rompada 40
6987 Caslano
Switzerland

+41 (0)91 600 9601
+41 (0)76 303 4477 cell
skype: ariamedia

[Subash Maharjan]

Thank you Jonathan. I fixed the problem. I just had to add "event.preventDefault();". I think the default submit and the jQuery function both were being fired. So the there was no response. I have added the full code below.

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){

if(response.recordCount != 0)

{

console.log(response);

$('#submitForm').append('<div class="alert alert-success">' + response.recordCount + '</div>');

}

else{

$('#submitForm').append('<div class="alert alert-danger">Error: Try Again !!</div>');

}

})

.fail(function(response) {

console.log(response);

});

event.preventDefault();

});

});

[Subash Maharjan]

Thank you Nando. Though I have found the solution, this code will be useful for me.