Errol Farro
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
============
AJAXHTML.CFC
============
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>
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>
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">
ASKER
When using plain as return type, we get the message "500 (The value returned from the createHTML function is not of type plain.)"
ASKER
console.log output:
<wddxPacket version='1.0'><header/><da ta><string ><char code='0d'/><char code='0a'/> <char code='09'/><strong>h ello world</strong><char code='0d'/><char code='0a'/> </string></data></wddxPack et>
<wddxPacket version='1.0'><header/><da
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Try to call it like :
Or :
And check if it will give you the same output.
$.get("ajaxHTML.cfc?method=createHTML", function(message){
console.log(message);
});
Or :
$("#mydiv").load("ajaxHTML.cfc?method=createHTML");
And check if it will give you the same output.
ASKER
Despite using the latest JQUERY, I am getting the below message. This is my Coldfusion source
SOURCE
=======
<!---
https://stackoverflow.com/questions/8524456/ajax-call-to-coldfusion-component-outputs-text-not-html
--->
<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(funct ion(e) {
e.preventDefault();
$.ajax({
type: "GET",
url: "ajaxHTML.cfc?method=creat eHTML",
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function(message) {
$("#mydiv").parseHTML(mess age);
}
});
});
});
</script>
</head>
<body>
<a href="" id="loadLink">Load Query</a>
<!-- empty div to load dynamcically generated table into -->
<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)
SOURCE
=======
<!---
https://stackoverflow.com/questions/8524456/ajax-call-to-coldfusion-component-outputs-text-not-html
--->
<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(funct
e.preventDefault();
$.ajax({
type: "GET",
url: "ajaxHTML.cfc?method=creat
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function(message) {
$("#mydiv").parseHTML(mess
}
});
});
});
</script>
</head>
<body>
<a href="" id="loadLink">Load Query</a>
<!-- empty div to load dynamcically generated table into -->
<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>
You shouldn't use `parseHTML` it's not a jQuery function, use html() instead.
ASKER
Thank you !!!!
Open in new window