jQuery not posting - (jQuery - ColdFusion)

Question

I have a small function that deletes records from my database using ColdFusion 9 and jQuery

The function exists in 3 other locations and it is identical and functioning as it supposed to but it seems to have an error with this page.

Html Form code

<form name="devRatingCat" method="post" action="" >
    <table  class="table table-bordered table-striped" >
        <tr>
            <th>&nbsp;</th>
            <th>ID</th>
            <th>Category Name</th>
        </tr>
        <cfloop query="categories">
            <tr>
                <td><input class="checkbox" type="checkbox" name="mark" value="#recID#"></td>
                <td>#recID#</td>
                <td>#categoryname#</td>
            </tr>
        </cfloop>
    </table>
    <hr />
    <div class="pull-left">
        <button class="btn btn-danger" type="button" onClick="dlteCatR(mark);" >Delete</button>      
</form>

jQuery

function dlteCatR(field)
{               
    var $srt = $(field);
    var r = confirm("Are you sure you want to delete this Category? \n You will not be able to revert this change!")
    if(r==true){
        for(i=0; i<$srt.length; i++){   
            if($srt[i].checked == true){
                var url="surveyAdmin.cfc?wsdl&method=deleteRateCat&recId="+$srt[i].value;
                $.post(url);
            }
        }
        window.location.reload();
    }else{
        return false;
    }
}

surveyAdmin.cfc method

<cffunction name="deleteRateCat" access="remote" returntype="void" output="no"  hint="Delete Rating Categories.">
    <cfargument name="recID" type="string" required="true" hint="The id of the rating category to delete.">
    <cfquery datasource="#dsn#">
        delete from rating_categories
        where id = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.recID#">
    </cfquery>
</cffunction>

I'm using firebug to track the calls but it doesn't give me any good explanation as to why it is not working.

Also, when I copy the link in firebug and run it by itself in a browser the transaction is happening as it should

Answer 1

$.post() sends an asynchronous request. If you reload the page before that request is complete, the request will be aborted.

In your case, you are sending out n requests all at once in the for loop, and then immediately reloading the page (with this line window.location.reload();) before any of them have time to complete. To solve this, you can either consolidate them all into one $.post request and use the success callback, or you can store each promise object returned from $.post() in an array and pass it to $.when.

I suggest using the first solution of consolidating all of the requests into one request and using the success callback, however that will require you to either modify your current cfc method to accept multiple records to delete at once, or to create a new cfc method that can handle it.

One way would be to have your method capable of handling a list of id's rather than a single id.

<cffunction name="deleteRateCat" access="remote" returntype="void" output="no"  hint="Delete Rating Categories.">
    <cfargument name="recID" type="string" required="true" hint="The id of the rating category to delete.">
    <cfquery datasource="#dsn#">
        delete from rating_categories
        where id in (<cfqueryparam cfsqltype="cf_sql_integer" value="#ListAppend(arguments.recID, 0)#" list="yes">)
    </cfquery>
</cffunction>

And the js to go with it:

function dlteCatR(field){               
    var r = confirm("Are you sure you want to delete this Category? \n You will not be able to revert this change!")
    if(r==true){
        var recIdList = $("[name=" + field + "]:checked").map(function(){
            return this.value;
        }).get().join(",");
        var url="surveyAdmin.cfc?wsdl&method=deleteRateCat&recId="+recIdList;
        $.post(url).done(function(){
            window.location.reload();
        });        
    }
}