CODEWITHSUNDEEP
jquerycoldfusion
j-p
j-p

Reputation: 3818

jquery - form data not being passed in ajax call

I've used this exact code before - with PHP as the processing page but now in coldfusion (regardless if I uses a cfc or just a cfm to process) the jQuery doesn't seem to pass the form object - well... if I look at the firebug response, the 'post' tab DOES show all the field and their values.. application/x-www-form-urlencoded HOWEVER the page responsible in the URL attribute doesn't get it.. and (in the example delow) the console log( data ) shows an empty string.

Heres what I have....

$( '#create_client' ).on( 'click', function( event ) {

    //form validation
    var bValid = true;

    if ( bValid ) {
        // AJAX Post data
        $.ajax({
            type: 'POST',
            dataType: 'html',
            cache: false,
            url: '/cfc/clent.cfc?method=put',
            data: $( '#client-form' ).serialize(),
            success: function( data ){
                console.log(data);
                loadClientTable();
            },
            error: function(){
                // tell user there was a problem
                $( '#clients-message' ).html( '<p>There was a problem submitting your request... Doh!</p>' );
            }
        });
    }

}

and here's the form

<form name="client-form" id="client-form" class="singleLineForm" >
<label for="firstname">First Name: </label>
<input type="text" name="firstname" id="firstname" value="" maxlength="15" class="text ui-widget-content ui-corner-all" />
<label for="lastname">Last Name: </label>
<input type="text" name="lastname" id="lastname" value="" maxlength="15" class="text ui-widget-content ui-corner-all" />
<label for="email">Email: </label>
<input type="text" name="email" id="email" value="" maxlength="50" class="text ui-widget-content ui-corner-all" />
<label for="password">Password: </label>
<input type="text" name="password" id="password" value="" maxlength="20" class="text ui-widget-content ui-corner-all" />
<label for="isActive">Active? </label>
<input type="checkbox" name="isActive" id="isActive" value="1" class="checkbox ui-widget-content ui-corner-all" />
<input type="button" name="create_client" id="create_client" value="Create Client" class="button ui-widget-content ui-corner-all" />
</form>

the put in the cfc looks like this (for now)

<cffunction name="put" access="public" returntype="structure" hint="PUT method, handles data transfering." >
    <cfargument name="email" type="string" required="yes" >
    <cfargument name="password" type="string" required="yes" >
    <cfargument name="firstname" type="string" required="yes" >
    <cfargument name="lastname" type="string" required="yes" >
    <cfargument name="isActive" type="numeric" required="yes" >

    <cfset _return = '' />

    <cfquery name="insertClient" datasource="#application.DSNwrite#" >
        INSERT INTO clients
        ( 
            email
            ,password
            ,firstname
            ,lastname
            ,isActive
        )
        VALUES
        ( 
            <cfqueryparam cfsqltype="cf_sql_varchar" value="#trim( arguments.email )#" />
            ,<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim( arguments.password )#" />
            ,<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim( arguments.firstname )#" />
            ,<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim( arguments.lastname )#" />
            ,<cfqueryparam cfsqltype="cf_sql_bit" value="#val( arguments.isActive )#" />
        )
    </cfquery>

    <cfreturn _return />
</cffunction>

Upvotes: 3

Views: 1329

Answers (2)

Bhushan
Bhushan

Reputation: 595

You can do like below to pass form data in ajax call.

var formData = $('#client-form').serialize();
$.ajax({
    url: '/cfc/clent.cfc?method=put&' + formData,
    type: 'POST',
    data:{
    },
    success: function(data){},
    error: function(data){},
})

Upvotes: 0

Scott Stroz
Scott Stroz

Reputation: 7519

Your CFC method is returning an empty string.

You have this:

<cfset _return = '' />

and at the end of the method, you have this:

<cfreturn _return />

Yet, you never set _return to a different value. To test is this is the problem, try this:

 <cfset _return = 'moo' />

If you get 'moo' returned, everything is working as expected.

Upvotes: 5

Related Questions