2

I'm trying to fetch a checkin.cfm file from within my index.cfm using the fetch api. All I'm getting is a 500 Server Error. Is there something different I need to do with ColdFusion?

JavaScript

fetch("./src/checkin.cfm")
    .then(function (response) {
        return response.text();
    })
    .then(function (body) {
        document.querySelector("#checkin").innerHTML = body;
    });

index.cfm

<cfoutput>
  <div id="checkin"></div>

  <script src="js/app.js"></script>
</cfoutput>

checkin.cfm

<cfoutput>

    <cfset session_valid =  application.lib.check_session_valid()>

    <h1>Hello World</h1>
</cfoutput>
Millhorn
  • 2,953
  • 7
  • 39
  • 77
  • 1
    To resolve a 500 Server Error, we need some server-side code. – Teemu Nov 04 '20 at 19:17
  • This isn't a server-side application. It's client-side. The only interaction with the server I have are some database queries. I don't get the error when I place my code in an .html file and call it. This error only happens with the .cfm file. Are there any syntax errors or something I should do differently because I'm in ColdFusion? – Millhorn Nov 04 '20 at 19:23
  • 1
    ??? The request is going to a server, and that error message is coming from a server. Your server somehow fails to handle the request. – Teemu Nov 04 '20 at 19:24
  • I just don't have anything to show you regarding that. Is there something unique I need to do with a .cfm file? Like I said, it doesn't happen if I reference an .html file. – Millhorn Nov 04 '20 at 19:27
  • You're fetching "checkin.cfm", fetch("./src/checkin.cfm"), but showing us the code of 'index.cfm'? What's in the 'checkin.cfm'? – CFMLBread Nov 04 '20 at 19:47
  • @PMascari - I've added the content of checkin.cfm in the OP. It's very basic. I just need to see some evidence of a response. – Millhorn Nov 04 '20 at 20:01
  • 2
    If you're getting a 500 error, I imagine the error is happening in that function call: application.lib.check_session_valid(). Remove that line and see if your fetch works. – CFMLBread Nov 04 '20 at 21:21
  • A 500 error is basically "Uh oh. Sothing broke." What is the actual error that is being masked? Maybe check your web server log. – Shawn Nov 06 '20 at 19:09

2 Answers2

2

You need to Serialise your data in the ‘CFML’ template:

checkin.cfm

OPTION 1:

<cfset data = StructNew()>

<cfset data['session_valid'] =  application.lib.check_session_valid()>

<cfset data['html'] = '<h1>Hello World</h1>'>

<cfoutput>
#SerializeJSON(data)#
</cfoutput>

OPTION 2:

<cfset data = StructNew()>
    
<cfset data['session_valid'] =  application.lib.check_session_valid()>

<cfsavecontent variable="html">
<h1>I am a whole page of HTML</h1>
</cfsavecontent>
    
<cfset data['html'] = html>
    
<cfoutput>
#SerializeJSON(data)#
</cfoutput>

Also, please make sure that you have set the correct:

Access-Control-Allow-Origin

If your client side code is on a different server/port to your CFML template. In production, this probably isn't an issue, but, if like me, you use Angular, which runs locally on port 4200, and your Coldfusion Application Server runs on port 8500, then this header becomes very important.

In your JavaScript, you need to parse the JSON response:

fetch("./src/checkin.cfm")
.then(function (response) {
    return response.text();
})
.then(function (json) {
    var response = JSON.parse(json);
    console.log('response: ',response);
    if('html' in response){
        document.querySelector("#checkin").innerHTML = response['html'];
    }
});

I have tested this, and it works 100%, so if you are still getting an error, I would suggest you look at the response using:

Firefox Dev Tools -> Network -> XHR -> Response

And see if Coldfusion is throwing an error in checkin.cfm, due to a problem with:

application.lib.check_session_valid()
Charles Robertson
  • 1,760
  • 16
  • 21
  • 1
    But, if I'm trying to fetch an entire HTML page, it will all get placed inside that `data['html']` variable? – Millhorn Nov 04 '20 at 23:40
  • Yes. That's correct. Place it inside data['html'] & serialize to JSON. Most XHR API's expect JSON to be returned from the server... – Charles Robertson Nov 05 '20 at 10:39
  • 1
    @JaredNewnam I have added a second option, above, if you want to send back a lot of HTML, although I must say, this kind of thing should be discouraged. You should really be sending back data types, like objects & arrays, rather than HTML. And then loop through the array or object, using JavaScript, and build HTML on the client side. – Charles Robertson Nov 05 '20 at 10:47
  • I've done all that you've suggested and this is the console error I'm getting: [screenshot](https://imgur.com/a/nXy3z4A) – Millhorn Nov 09 '20 at 18:37
  • @Jared Newnam Try Firefox Dev Tools -> Network -> XHR -> Response. This will show you, if your server side CFML template is throwing an error. Try removing: application.lib.check_session_valid(). Have you set up your Application.cfc correctly? – Charles Robertson Nov 16 '20 at 10:00
1

According to this SO question, you're using fetch correctly with response.text() to render the HTML from the request.

Check your browser's dev tools:

  • Network tab
  • filter to checkin.cfm, should have a 500 status
  • click that line and preview the response.

Follow P Mascar's suggestion and start with plain HTML to make sure the request and response works, then start adding CFML to dynamically generate HTML. It could be the case that the application variable you're referenced isn't defined yet in the context of the fetch request.

Adrian J. Moreno
  • 14,350
  • 1
  • 37
  • 44