asked on

Coldfusion generate HTML with AJAX call

I am trying to generate an HTML from an AJAX call, Below please find my code.

The content should display HELLO WORLD in bold. However, I am getting <strong>hello world</strong>

Any assistance is highly appreciated

AJAXHTML.CFM
============

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $("#loadLink").click(function(e) {
                e.preventDefault();
                $.ajax({
                    type: "GET",
                    url: "ajaxHTML.cfc?method=createHTML",
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function(message) {
                        $("#mydiv").html(message);
                    }
                });
            });
        });
    </script>
    
</head>

<body>
    <a href="" id="loadLink">Load Query</a>
    <!-- empty div to load dynamcically generated table into -->
    <div id="mydiv"></div>
</body>

Open in new window

AJAXHTML.CFC
============

<cfcomponent displayname="Generate HTML" output="false">


<cffunction name="createHTML" displayname="Create HTML" description="Creates HTML to output with jQuery." access="remote" output="false" returntype="string">

    <!--- SET VARIABLE TO RETURN --->
    <cfset VARIABLES.html = "">

    <!--- SAVE CONTENT --->

    <cfsavecontent variable="VARIABLES.html">
    	<strong>hello world</strong>
    </cfsavecontent>
    <!--- RETURN SAVED CONTENT --->
    <cfreturn VARIABLES.html>

</cffunction>

</cfcomponent>

Open in new window

Zakaria Acharki

Add the following line just before $("#mydiv").html(message); anf try to show us the output in you console:

console.log( message );

Open in new window

Zakaria Acharki

Try to change the return type to plain instead of string, like :

<cffunction name="createHTML" displayname="Create HTML" description="Creates HTML to output with jQuery." access="remote" output="false" returntype="plain">

Open in new window

Errol Farro

ASKER

When using plain as return type, we get the message "500 (The value returned from the createHTML function is not of type plain.)"

Errol Farro

ASKER

console.log output:

<wddxPacket version='1.0'><header/><data><string><char code='0d'/><char code='0a'/> <char code='09'/><strong>hello world</strong><char code='0d'/><char code='0a'/> </string></data></wddxPacket>

ASKER CERTIFIED SOLUTION

Coast Line

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zakaria Acharki

Try to call it like :

$.get("ajaxHTML.cfc?method=createHTML", function(message){
        console.log(message);
});

Open in new window

Or :

$("#mydiv").load("ajaxHTML.cfc?method=createHTML");

Open in new window

And check if it will give you the same output.

Errol Farro

ASKER

Despite using the latest JQUERY, I am getting the below message. This is my Coldfusion source

SOURCE
=======


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>


      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>

<script type="text/javascript">
            $(document).ready(function() {
              $("#loadLink").click(function(e) {
              e.preventDefault();
              $.ajax({
              type: "GET",
              url: "ajaxHTML.cfc?method=createHTML",
              contentType: "application/json; charset=utf-8",
              dataType: "html",
              success: function(message) {
              $("#mydiv").parseHTML(message);
              }
              });
              });
              });
</script>
</head>

<body>
<a href="" id="loadLink">Load Query</a>

<div id="mydiv"></div>
</body>

ERROR MESSAGE
==============
ajaxHTML.cfm:25 Uncaught TypeError: $(...).parseHTML is not a function
at Object.success (ajaxHTML.cfm:25)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)

Zakaria Acharki

You shouldn't use `parseHTML` it's not a jQuery function, use html() instead.

Errol Farro

ASKER

Thank you !!!!