Latest News

Feb. 10th 2008

Released: JSMX v2.6.4 (Code Enhancements)

Feb. 6th 2007

Released: JSMX v2.6.3 (UTF-8 support)

Mar. 25th 2006

New! JSMX Forum (google)

Examples

A Basic Exampletop

Below is a very basic sample of how to implement the JSMX API in ColdFusion. The code contained in this example is NOT a 'snippet' but rather the entire code needed to make this example work. It consists of two small templates (JSMX.html and JSMX.cfm). In this example a hyperlink is placed on an HTML file (JSMX.html). When Clicked, a JavaScript Alert Box will pop up displaying a message sent from the server using Classic Mode (returning JavaScript). In this example we are generating our JavaScript via the CFWDDX tag which will convert a string into a JavaScript expression. This example is very simple in scope but shows how data can be sent between the server and the client using JavaScript. It also demonstrates how you can use the JSMX API without needing any further knowlegde of engine.js than how to call the HTTP() function.

JSMX.html 

<html>
<head>
  <title>JSMX</title>
  <script src="engine.js"></script>
  <script>
    function My_Request(){ http( 'GET'  , 'JSMX.cfm' , My_Response ); }
    function My_Response(obj){ alert(obj); }
  </script>
</head>

<body>

  <a href="javascript:My_Request();">Click Here</a>

</body>
</html>
JSMX.cfm 

<cfsetting enableCFoutputOnly="Yes" showdebugoutput="No">
<cfwddx action="CFML2JS" input="Hello, World!" toplevelvariable="anythingwewant">

Both the API (engine.js) and a more complete sample application can be downloaded from this website by navigating to the downloads page.

An XML Exampletop

Below is the same example as listed above in the basic example but this time employing the XML technique.

JSMX.html 

<html>
<head>
  <title>JSMX</title>
  <script src="engine.js"></script>
  <script>
    function My_Request(){ http( 'GET'  , 'JSMX.cfm' , My_Response ); }
    function My_Response(obj){ 
        alert(obj.getElementsByTagName("string")[0].firstChild.data); 
    }
  </script>
</head>

<body>

  <a href="javascript:My_Request();">Click Here</a>

</body>
</html>
JSMX.cfm 

<cfsetting showdebugoutput="no">
<cfcontent type="text/xml; charset=utf-8">
<?xml version="1.0" encoding="UTF-8"?>
<response>
    <string>Hello, World!</string>
</response>

City and State By Zip Codetop

Example:

Client Side Script 
<script src="engine.js"></script>
<script>
   function findzip_request(){
       param = 'zip='+document.getElementById('zipcode').value;
       http( 'POST' , 'remote.cfc?method=findZipCode' , findzip_response , param ); 
   }
   
   function findzip_response(obj){ 
      document.getElementById('city').innerHTML = obj.city;
      document.getElementById('state').innerHTML = obj.state;
   }
</script>

<fieldset>
    <legend>Enter a U.S. ZipCode and submit.</legend>
    <p> <input id="zipcode" type="text">
           <input type="button" value="Find Zip" onclick="findzip_request();"></p>
    <p> <label>City:</label> <span id="city"></span></p>
    <p> <label>State:</label> <span id="state"></span></p>
</fieldset>
Server Side Script 
<CFFUNCTION name="findZipCode" access="remote" returntype="void">
    <cfargument name="zip" type="string" required="Yes" default="00000">

    <cfset result = structNew()>
    <cfset result.city = "N/A">
    <cfset result.state = "N/A">
    
    <cfset zipURL = "http://www.webservicex.net//uszip.asmx/GetInfoByZIP">
    <cfhttp method="GET" url="#zipURL#?USZip=#arguments.zip#"/>
    <cftry>
        <cfset addyObj = xmlParse(cfhttp.filecontent)>
        <cfset result.city = trim(addyObj.newDataset.table.city.xmlText)>
        <cfset result.state = trim(addyObj.newDataset.table.state.xmlText)>

        <cfcatch><!--- do nothing ---></cfcatch>

    </cftry>

    <cfwddx action="CFML2JS" input="#result#" toplevelvariable="r">
</CFFUNCTION>