Submit form via AJaX to CFC

LEGEND ,
Mar 02, 2015 Mar 02, 2015

Copy link to clipboard

Copied

Hello, everyone,

I have a form (NOT a CFFORM - those are evil) that I am attempting to submit the data to a CFC.

Right now, all the CFC is supposed to do (for testing purposes) is to display the form data in a DIV on the same page as the form.

Every time I submit the data, I get a 500 error message stating that the page cannot be displayed.

Here is pseudo-code for what I've got, now.

<form name="subOpp" id="subOpp" enctype="application/x-www-form-urlencoded">

  <!--- a couple of inputs, shortened for brevity --->

  <input type="text" name="company_name" id="company_name" />

  <input type="text" name="company_address" id="company_address" />

...

  <input type="button" name="submitBtn" id="submitBtn" value="Submit" onclick="submitForm(this.form,'so');" />

</form>

<script type="text/javascript">

  function submitForm(formObj,whichForm){

    XHR = new XMLHttpRequest();

    XHR.open("post","../../components/public.cfc?method=submitData",true);

    XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    XHR.onreadystatechange = function(){

        if(XHR.readyState === 4) && (XHR.status === 200){

            document.getElementById('result').innerHTML = XHR.responseText;

            }

        }

    XHR.send(formObj);

    }

</script>

<cfcomponent>

  <cffunction name="submitData" output="yes" returntype="any">

    <cfargument name="form" type="struct" required="yes" />

    <cfreturn "HEY!" />

  </cffunction>

</cfcomponent>

Firebug is showing:

POST http://localhost/public/components/public.cfc?method=submitData 500 Internal Server Error

The page you are trying to access cannot be displayed.  Please try again or notify the administrator.

Am I missing a step??

V/r,

^_^

Views

2.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Mar 09, 2015 Mar 09, 2015
A crucial point I mentioned:
The argument of the function, submitData, is required. Since you are invoking the CFC by URL, ColdFusion expects you to pass a value for form_fields parameter.
In other words, send('form_fields=.......')

Likes

Translate

Translate
Engaged ,
Mar 02, 2015 Mar 02, 2015

Copy link to clipboard

Copied

Change you function to this.  The access needs to be set to remote.

  <cffunction name="submitData" output="yes" returntype="any" access="remote"

    <cfargument name="form" type="struct" required="yes" /> 

    <cfreturn "HEY!" /> 

  </cffunction> 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 02, 2015 Mar 02, 2015

Copy link to clipboard

Copied

Thanks for your reply!

Added

access="remote"

, no change.  Tried

access="public"

, also no change.   Still getting error that page cannot be displayed.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 02, 2015 Mar 02, 2015

Copy link to clipboard

Copied

Sorry, I didn't look to closely at the code you originally posted. Take out the argument and it should work.

By having <cfargument name="form" type="struct" required="yes" />


The function is expecting to be passed in a var named form.  For example.... http://localhost/public/components/public.cfc?method=submitData&form=123

The form scope will be available inside the function.  You don't need to declare an argument for it.


HTH,

--Dave

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 03, 2015 Mar 03, 2015

Copy link to clipboard

Copied

Removing the attribute made no difference.

If I'm declaring a CFARGUMENT for the form scope, then anything passed to the function would be considered ARGUMENTS.FORM to the function.  If the form isn't being passed, I should be getting a different error message.

What could cause the page to not be accessible?

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 04, 2015 Mar 04, 2015

Copy link to clipboard

Copied

Anyone else have any ideas what might be causing this to happen?

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2015 Mar 07, 2015

Copy link to clipboard

Copied

WolfShade wrote:

Anyone else have any ideas what might be causing this to happen?

Yes, WolfShade. The argument of the function, submitData, is required. Since you are invoking the CFC by URL, ColdFusion expects you to pass a value for form_fields parameter.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 05, 2015 Mar 05, 2015

Copy link to clipboard

Copied

Could it be a setting in CFAdmin, maybe?  If it is, I can't think of where that setting would be.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 05, 2015 Mar 05, 2015

Copy link to clipboard

Copied

If you are getting an 500 error then you should have something in the CF logs to tell you why. Check the application.log and/or the coldfusion-out.log.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 05, 2015 Mar 05, 2015

Copy link to clipboard

Copied

The coldfusion-out log ONLY ever says that the log initialised.  I've never seen anything else in there.  Ever.

Ditto for coldfusion-error log.

After having done a "submit" five times in a row, the application log has only one entry for that timestamp: Session rotated successfully.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 05, 2015 Mar 05, 2015

Copy link to clipboard

Copied

Follow up:

When looking at the logs from within CFAdmin, nothing ever changes.  It's always "the log has initialized".

When opening the .log file directly from within Windows Explorer, it's a different story.

coldfusion-error.log is appending data.  Why it's not appearing in CFAdmin is beyond me.  I won't copy/paste the entries, but I'll manually type the basic gist.

org.apache.catalina.core.StandardWrapperValve invoke

SEVERE: Servlet.service() for servlet [CFServlet] in context with path [/] threw exception [java.lang.IllegalArgumentException] with root cause

Followed by about thirty lines of gibberish (to me).  Does this help, any?  It's not giving me a template or line number.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 06, 2015 Mar 06, 2015

Copy link to clipboard

Copied

Are you running CF 10?

Also, archive the coldfusion-out.log and then rerun your tests and let us now what gets output in that log file. What is the "gibberish" you talk of? Might make sense to someone to help debug...

The coldfusion-out.log should give you a condensed error. Sometimes these errors don't ever appear in the coldfusion-error.log

Oddly the coldfusion-error.log never seems to display correctly when just viewing in browser. I always tend to open the file directly as the result is better.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 06, 2015 Mar 06, 2015

Copy link to clipboard

Copied

I am running CF10, but the production environment is CF9 (at least, for now.)

I did archive the coldfusion-out log and re-ran - again, nothing visible added when using CFAdmin to view the log, but opening the coldfusion-out.log file directly does show new entries.  Output is what I posted in my previous post.

The "gibberish" is about 30 lines of "at blah blah blah (java:line number)" entries.  None of them are any of the .cfm documents I am working with.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 06, 2015 Mar 06, 2015

Copy link to clipboard

Copied

Can you post the full log because this "gibberish" is the trace log and can be helpful. Confirm the log as well because coldfusion-out.log should show correctly in the cf admin where as coldfusion-error.log doesn't.

I have only experienced this error on CF 10. Which update are you running?

Do you have this tested  / working in CF9?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 06, 2015 Mar 06, 2015

Copy link to clipboard

Copied

My dev system is isolated from the internet, so I have to copy/paste to a txt file, burn it to CD, 'sneaker-net' it to this system.

Mar 06, 2015 1:30:20 PM org.apache.catalina.core.StandardWrapperValve invoke

SEVERE: Servlet.service() for servlet [CFCServlet] in context with path [/] threw exception [java.lang.IllegalArgumentException] with root cause

java.lang.IllegalArgumentException

    at coldfusion.filter.FormScope.parseQueryString(FormScope.java:497)

    at coldfusion.filter.FormScope.parsePostData(FormScope.java:468)

    at coldfusion.filter.FormScope.fillForm(FormScope.java:414)

    at coldfusion.filter.FusionContext.SymTab_initForRequest(FusionContext.java:466)

    at coldfusion.filter.GlobalsFilter.invoke(GlobalsFilter.java:33)

    at coldfusion.filter.DatasourceFilter.invoke(DatasourceFilter.java:22)

    at coldfusion.xml.rpc.CFCServlet.invoke(CFCServlet.java:155)

    at coldfusion.xml.rpc.CFCServlet.doPost(CFCServlet.java:331)

    at javax.servlet.http.HttpServlet.service(HttpServlet.java:646)

    at javax.servlet.http.HttpServlet.service(HttpServlet.java:727)

    at coldfusion.bootstrap.BootstrapServlet.service(BootstrapServlet.java:89)

    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:303)

    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)

    at coldfusion.monitor.event.MonitoringServletFilter.doFilter(MonitoringServletFilter.java:42)

    at coldfusion.bootstrap.BootstrapFilter.doFilter(BootstrapFilter.java:46)

    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:241)

    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)

    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:220)

    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:122)

    at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:501)

    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:171)

    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)

    at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:950)

    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:116)

    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:422)

    at org.apache.coyote.ajp.AjpProcessor.process(AjpProcessor.java:199)

    at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:607)

    at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:314)

    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)

    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)

    at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)

    at java.lang.Thread.run(Thread.java:745)

CF10 Update 15; Tomcat 7.0.54; Java 1.8.0_31; Windows 7 Professional

No, this isn't tested / working anywhere; it currently only exists on my dev system.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2015 Mar 07, 2015

Copy link to clipboard

Copied

WolfShade wrote:

    <form name="subOpp" id="subOpp" enctype="application/x-www-form-urlencoded">

      

    ...

      <input type="button" name="submitBtn" id="submitBtn" value="Submit" onclick="submitForm(this.form,'so');" />

    </form> 

    <script type="text/javascript">

      function submitForm(formObj,whichForm){

        XHR = new XMLHttpRequest();

        XHR.open("post","../../components/public.cfc?method=submitData",true);

        XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        XHR.onreadystatechange = function(){

            if(XHR.readyState === 4) && (XHR.status === 200){

                document.getElementById('result').innerHTML = XHR.responseText;

                }

            }

        XHR.send(formObj);

        }

    </script> 

There are at least 2 problems with this.

1) With this.form a child element (a form input field) attempts to reference its parent (the form);

2) The argument of the AJAX send function should be a string whereas, here, it is a form object.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 09, 2015 Mar 09, 2015

Copy link to clipboard

Copied

BKBK wrote:

2) The argument of the AJAX send function should be a string whereas, here, it is a form object.

So instead of sending the form object, itself, I should send a JSON stringified form object?  I tried that, and I'm still getting "page cannot be displayed."

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 09, 2015 Mar 09, 2015

Copy link to clipboard

Copied

Could you show us what you tried?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 09, 2015 Mar 09, 2015

Copy link to clipboard

Copied

I've tried both just formObj and stringified formObj.

XHR.send(formObj);

and

XHR.send(JSON.stringify(formObj));

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2015 Mar 07, 2015

Copy link to clipboard

Copied

A suggestion for a solution:

  <form name="subOpp" id="subOpp" enctype="application/x-www-form-urlencoded" action="ex">

      <!--- a couple of inputs, shortened for brevity --->

      <input type="text" name="company_name" id="company_name" />

      <input type="text" name="company_address" id="company_address" />

    <input type="button" name="submitBtn" id="submitBtn" value="Submit" onClick="submitForm('subOpp','so');"/>

    </form>

    <script type="text/javascript">

      function submitForm(formID,whichForm){

          var responseStr ="";

       var XHR = new XMLHttpRequest();

        XHR.open("post","public.cfc?method=submitData",true);

        XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        XHR.onreadystatechange = function(){

            if(XHR.readyState == 4 && XHR.status == 200){

                document.getElementById('result').innerHTML = XHR.responseText;

                }

            }

            /* Create response string. Note that it starts with the name of the argument of public.cfc's function, submitData */

             responseStr = 'form_fields=company_details:';

            // add company name to response

            responseStr = responseStr + 'company_name=' + document.getElementById(formID).company_name.value;

              /* add company address to response, using non-special character | to separate the values */

            responseStr = responseStr + '|' + 'company_address=' + document.getElementById(formID).company_address.value;

            XHR.send(responseStr);

      }

    </script>

public.cfc

<cfcomponent>

  <cffunction name="submitData" output="yes" returntype="any" access="remote">

    <cfargument name="form_fields" type="string" required="yes" />

    <cfreturn "HEY! " & arguments.form_fields />

  </cffunction>

</cfcomponent>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 09, 2015 Mar 09, 2015

Copy link to clipboard

Copied

Another thing that I _just_ now noticed.


It doesn't matter if the method exists, or not - both cases give the exact same error message: "Page cannot be displayed".

This makes me think it might be a CFAdmin setting.  But where?

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 09, 2015 Mar 09, 2015

Copy link to clipboard

Copied

A crucial point I mentioned:

The argument of the function, submitData, is required. Since you are invoking the CFC by URL, ColdFusion expects you to pass a value for form_fields parameter.
In other words, send('form_fields=.......')

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 11, 2015 Mar 11, 2015

Copy link to clipboard

Copied

LATEST

I find it odd that if only one argument is being passed to the CFC, it has to be "introduced" by appending "varName=" to the string/object that is being passed.

But, I did as you suggested, and it's working.

Thank you,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines