Mura, Submitting a form asynchronously.

dspAjaxForm.cfm

!--- 
  This page displays the contact form with ajax powers!
--->
<cfset frmBody = $.event('formbean').getBody() />
<cfset frmBody = reReplaceNoCase(frmBody, "</?form(.[^>])*>", "", "all") />

<cfoutput>
  <cfset formId = "frm#replace($.event('formbean').getContentId(), '-', '', 'all' )#" />
  <form id="#formId#" name="#$.event('formbean').getTitle()#" action="#$.siteConfig('themeAssetPath')#/display_objects/remote/submitAjaxForm.cfm" method="post">
    <input type="hidden" name="formId" value="#$.event('formbean').getContentId()#" />
    <input type="hidden" name="siteId" value="#$.event('siteId')#" />
    <div class="feedback"></div>
    <div class="fBody">
      #frmBody#
    </div>
    #$.dspInclude('display_objects/dsp_form_protect.cfm')#
    #$.dspInclude('display_objects/dsp_ajax_script.cfm')# <!--- Insert your own preffered js library to submit the form --->
  </form>
</cfoutput>

eventHandler.cfc

<cffunction name="onFormAjaxBodyRender" access="public" output="true">
  <cfargument name="$" hint="mura scope" />
  
  <cfsavecontent variable="returnStr">
    <cfoutput>#$.dspThemeInclude('display_objects/dspAjaxForm.cfm')#</cfoutput>
  </cfsavecontent>
  
  <cfreturn returnStr />
</cffunction>

<cffunction name="onFormSubmitResponseRender" access="public" output="true" >
  <cfargument name="$" hint="mura scope" />
  <cfif $.event('formDataBean').getSubType() is NOT 'ajax'>
    <!--- If its not the subtype 'ajax' return an empty string which will tell Mura to carry on with its defaults --->
    <cfreturn '' />
  </cfif>
  
  <!--- Defer to external file to prevent application reloading when changing event logic. --->
  <cfsavecontent variable="returnStr">
    <cfoutput>#$.dspThemeInclude('display_objects/events/onAjaxFormSubmitResponseRender.cfm')#</cfoutput>        
  </cfsavecontent>
  <cfreturn returnStr />
</cffunction>

<cffunction name="onFormSubmitErrorRender" access="public" output="true" >
  <cfargument name="$" hint="mura scope" />
  <cfif $.event('formDataBean').getSubType() is NOT 'ajax'>
    <!--- If its not the subtype 'ajax' return an empty string which will tell Mura to carry on with its defaults --->
    <cfreturn '' />
  </cfif>
  <!--- Defer to external file to prevent application reloading when changing event logic. --->
  <cfsavecontent variable="returnStr">
    <cfoutput>#$.dspThemeInclude('display_objects/events/onAjaxFormSubmitErrorRender.cfm')#</cfoutput>        
  </cfsavecontent>
  <cfreturn returnStr />
</cffunction>

onAjaxFormSubmitErrorRender.cfm

<!--- On Error, spit out a JSON response containing the form errors --->
<cfparam name="$" />
<cfset formDataBean = $.event('formDataBean') />
<cfset response = { 'status':'failure', 'reasons':formDataBean.getErrors() }/>   
<cfoutput>#serializeJson( response )#</cfoutput>

onAjaxFormSubmitResponseRender.cfm

<!--- On respone render, spit out a JSON happy message to output to the user! --->
<cfparam name="$" />
<cfset formDataBean = $.event('formDataBean') />

<cfif formDataBean.get('acceptData') >
    <cfset response = { 'status':'success', 'message':formDataBean.getFormBean().get('responseMessage') }/>        
    <cfoutput>#serializeJson( response )#</cfoutput>
</cfif>

submitAjaxForm.cfm

<cfparam name="FORM.formId" default='' />
<cfparam name="FORM.siteId" default='' />

<cfif FORM.formId IS '' OR FORM.siteId IS '' >
    <cfheader statuscode="404" statustext="File not found" />
    <cfabort />
</cfif>

<!--- Otherwise try and get Mura to submit it --->
<cfset $ = application.serviceFactory.getBean('$').init( FORM.siteId ) />
<cfset bean = $.getBean('content').loadBy( contentId = FORM.formId, siteID=FORM.siteID, type='Form' ) >

<!--- This keeps Mura happy, it uses the values internally during the save and render --->
<cfset $.getContentRenderer().set('rsForm', bean.getAllValues() ) />
<cfset $.getEvent().setValue('formBean', bean) />    

<!--- Load a data collection bean with all the values from the event. --->
<cfset dataBean = $.getBean('dataCollectionBean').set( $.getEvent().getAllValues() ) />    
<!--- Render the dataBean to trigger the Mura events contained within --->
<cfcontent reset="true" type="application/json" />
<cfoutput>#dataBean.render( $ )#</cfoutput>