I am following this article by Ben Nadel -- not sure if there are some other better tutorials out there. Anyway, I kept getting the Variable ALLARTICLESDATA is undefined. error.
<script type="text/javascript">
// Run when DOM is ready.
$(function(){
var jForm = $( "form" );
// Hook up form submit.
jForm.submit(
function( objEvent ){
// Get articles from Knowledge Owl.
GetArticles();
// Prevent default.
return( false );
});
});
// This method actually performs the cross-site AJAX
// using a proxy ColdFusion page.
function GetArticles(){
$('#searharea').keyup(function() {
var searchField = $('#searharea').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('ajaxProxy-KB.cfm', {proxyURL: 'https://app.knowledgeowl.com/api/head/article.json',
name: {
$regex: searchField,
$options: "i"
}},
function(data) {
//console.log( data.valid, data.data); // data.data is an array of information!
var output = '<ul class="searchresults">';
$.each(data.data, function(i, article) {
output += '<li>';
output += '<h5><a href="https://kb.mysite.com/help/pdfexport/id/'+ article.id + '">' + article.name + '</h5>';
output += '</li>';
});
output += '</ul>';
$('#resultarea').html(output);
}); //get JSON
});
}
</script>
<cfoutput>
<section class="block">
<ul class="tabs">
<li><a href="##tab1">Search</a></li>
<li><a href="##tab2">Article</a></li>
<li><a href="##tab3">Category</a></li>
</ul>
<article id="tab1">
<input type="text" id="searharea" name="searcharea" placeholder="search article name"></input>
<div id="resultarea"></div>
</article>
<article id="tab2">
<cfif !IsJSON(allArticlesData)>
<h3>The URL you requested does not provide valid JSON</h3>
<cfelse>
<cfset allArtData=DeserializeJSON(allArticlesData)>
<cfif structKeyExists(allArtData, 'data')>
<cfloop index="i" from="1" to="#arrayLen(allArtData.data)#">
<h5><a href="https://kb.mysite.com/help/pdfexport/id/#allArtData.data[i].id#">#allArtData.data[i].name#</a></h5>
</cfloop>
</cfif>
</cfif>
</article>
<article id="tab3">
<cfif !IsJSON(cateData)>
<h3>The URL you requested does not provide valid JSON</h3>
<cfelse>
<cfset cfDJData=DeserializeJSON(cateData)>
<cfif structKeyExists(cfDJData, 'data')>
<cfloop index="i" from="1" to="#arrayLen(cfDJData.data)#">
<h5>#cfDJData.data[i].name# - #cfDJData.data[i].id#</h5>
</cfloop>
</cfif>
</cfif>
</article>
</section>
</cfoutput>
And here's my proxy page.
<!---
Check to see if the page request is a POST or a GET.
Based on this, we can figure out our target URL.
--->
<cfif (CGI.request_method EQ "get")>
<!--- Get URL-based target url. --->
<cfset strTargetURL = URL.ProxyURL />
<!--- Delete target URL. --->
<cfset StructDelete( URL, "ProxyURL" ) />
<cfelse>
<!--- Get FORM-based target url. --->
<cfset strTargetURL = FORM.ProxyURL />
<!--- Delete target URL. --->
<cfset StructDelete( FORM, "ProxyURL" ) />
</cfif>
<!---
Remove any AJAX anit-caching that was used by jQuery. This
is a random number meant to help ensure that GET URLs are
not cached.
--->
<cfset StructDelete( URL, "_" ) />
<!---
Make the proxy HTTP request using. When we do this, try to pass along all of the CGI information that was made by the original AJAX request.
--->
<cfhttp result="objRequest" url="#UrlDecode( strTargetURL )#" method="#CGI.request_method#" useragent="#CGI.http_user_agent#" timeout="15">
<!--- Add the referer that was passed-in. --->
<cfhttpparam type="header" name="referer" value="#CGI.http_referer#" />
<!--- Pass along any URL values. --->
<cfloop item="strKey" collection="#URL#">
<cfhttpparam type="url" name="#LCase( strKey )#" value="#URL[ strKey ]#" />
</cfloop>
<!--- Pass along any FORM values. --->
<!---<cfloop item="strKey" collection="#FORM#">
<cfhttpparam type="formfield" name="#LCase( strKey )#" value="#FORM[ strKey ]#" />
</cfloop>--->
<cfhttpparam type="url" name="_authbykey" value="56a7d8c123131c4058361567">
<cfhttpparam type="url" name="project_id" value="55c4ffd123131c567e294fe6">
<cfhttpparam type="url" name="status[$in][]" value="published">
<cfhttpparam type="url" name="status[$in][]" value="review">
<cfhttpparam type="url" name="_fields[]" value="name">
</cfhttp>
<!---
<!--- Debug most current request. --->
<cfset objDebug = {
CGI = Duplicate( CGI ),
URL = Duplicate( URL ),
FORM = Duplicate( FORM ),
Request = Duplicate( objRequest )
} />
<!--- Output debug to file. --->
<cfdump
var="#objDebug#"
output="#ExpandPath( './ajax_prox_debug.htm' )#"
format="HTML"
/>
--->
<!---
Get the content as a byte array (by converting it to binary,
we can echo back the appropriate length as well as use it in
the binary response stream.
--->
<cfset binResponse = ToBinary(ToBase64( objRequest.FileContent )) />
<!--- Echo back the response code. --->
<cfheader statuscode="#Val( objRequest.StatusCode )#" statustext="#ListRest( objRequest.StatusCode, ' ' )#" />
<!--- Echo back response legnth. --->
<cfheader name="content-length" value="#ArrayLen( binResponse )#" />
<!--- Echo back all response heaers. --->
<cfloop item="strKey" collection="#objRequest.ResponseHeader#">
<!--- Check to see if this header is a simple value. --->
<cfif IsSimpleValue( objRequest.ResponseHeader[ strKey ] )>
<!--- Echo back header value. --->
<cfheader name="#strKey#" value="#objRequest.ResponseHeader[ strKey ]#" />
</cfif>
</cfloop>
<!---
Echo back content with the appropriate mime type. By using
the Variable attribute, we will make sure that the content
stream is reset and ONLY the given response will be returned.
--->
<cfcontent type="#objRequest.MimeType#" variable="#binResponse#" />