Mura CMS : jQuery Ajax example. Sometimes, you'll need to access a file via Ajax in Mura. Some key things to keep in mind are 1) You cannot directly access a .cfm file located under a SiteID unless a) it resides in a directory called 'remote' [as of v6.1], or b) You edit the file located under /{SiteID}/includes/Application.cfc on approximately …

ajaxData.cfc

<cfscript>
// Save this file to a path such as /{SiteID}/includes/themes/{ThemeName}/remote/ajaxData.cfc
component {

  remote string function getData(siteid='default', contentid='00000000000000000000000000000000001') returnformat='plain' {
    var str = '';
    var $ = get$(arguments.siteid, arguments.contentid);

    savecontent variable='str' {
      WriteOutput("<h1>Hello from ajaxData.cfc</h1>
        <p>You're currently viewing <strong>#$.content('title')#</strong>.<br />
        The content type is <strong>#$.content('type')#</strong>.</p>");
    };

    return str;
  }

  private any function get$(siteid='default', contentid='00000000000000000000000000000000001') {
    var $ = application.serviceFactory.getBean('$').init(arguments.siteid);
    // Just in case we need access to the ContentBean
    var cBean = $.getBean('content').loadBy(contentid=arguments.contentid);
    $.setContentBean(cBean);
    return $;
  }

}
</cfscript>

ajaxData.cfm

<cfscript>
  // Save this file to a path such as /{SiteID}/includes/themes/{ThemeName}/remote/ajaxData.cfm
  // This allows you to pass in the siteid and contentid via URL params
  param name='url.siteid' default='default';
  param name='url.contentid' default='00000000000000000000000000000000001';
  // Mura $cope
  $ = application.serviceFactory.getBean('$').init(url.siteid);
  // Just in case we need access to the ContentBean
  cBean = $.getBean('content').loadBy(contentid=url.contentid);
  $.setContentBean(cBean);
</cfscript>
<cfoutput>
  <h1>Hello from ajaxData.cfm</h1>
  <p>You're currently viewing <strong>#$.content('title')#</strong>.<br />
  The content type is <strong>#$.content('type')#</strong>.</p>
</cfoutput>

jQueryCodeSample.cfm

<!--- You could place this somewhere on a layout template --->

<!--- This one gets data from ajaxData.cfm --->
<script>
jQuery(document).ready(function ($){
  // we're passing the siteid + contentid via URL so that the ajax file will know what site we're using and what content item we're on.
  // learn more about $.get() :: http://api.jquery.com/jquery.get/
	$.get('#$.siteConfig('themeAssetPath')#/remote/ajaxData.cfm?siteid=#$.event('siteid')#&contentid=#$.content('contentid')#', function(data){
		$('.cfm-result').html(data);
	});
});
</script>
<!--- The HTML returned from ajaxData.cfm will appear in this div --->
<div class="cfm-result"></div>

<!--- This one gets data from ajaxData.cfc --->
<script>
jQuery(document).ready(function ($){
	$.get('#$.siteConfig('themeAssetPath')#/remote/ajaxData.cfc?method=getData&siteid=#$.event('siteid')#&contentid=#$.content('contentid')#', function(data){
		$('.cfc-result').html(data);
	});
});
</script>
<!--- The HTML returned from ajaxData.cfc will appear in this div --->
<div class="cfc-result"></div>