Difference between revisions of "Javascript API"
Line 102: | Line 102: | ||
: For instance, to display a current list of visitors you could: <br /> | : For instance, to display a current list of visitors you could: <br /> | ||
− | + | ##Write the code yourself - create an addon that the content manager could drop on any page. The addon includes an ajax call back to the server for data. Then create a remote method (addon) that responds to the request with the data formatted appropriately. | |
− | + | ##Use cj.ajax - Within your same page addon, call the createRemoteQuery() method with the query needed on your page. Then do your ajax call with cj.ajax.data(). It runs your query and returns a javascript object with your data in a simple results object. | |
cj.admin | cj.admin |
Revision as of 14:43, 2 July 2015
The Javascript API contains a programming interface to simplify the interaction between the server and the browser. You reference the API with the cj object in javascript.
A simple example is a text box that saves it's data as it is typed. Create a new add-on, and add a text box. Add javascript to onChange or onKeyUp of the text box to call the cj.ajax.data() method to save the content of the text box into a field in a record of a table.
Drop this add-on on any page, and when it is rendered, the data will automatically save.
Alternately, you can write a remote method add-on that accepts data from the query string and saves it how you wish. Your client-side code could then call the cj.ajax.addon() method which executes your server-side code and performs the function.
cj Methods
- cj.setSpinner()
- cj.encodeHTML()
- cj.invisible()
- cj.visible()
- cj.hide()
- cj.show()
- cj.setFrameHeight()
- cj.encodeTextAreaKey()
- cj.addHeadScriptLink()
- cj.addHeadStyle()
- cj.addHeadStyleLink()
- cj.addHeadScriptCode()
- cj.addLoadEvent()
- cj.addListener()
cj Objects
1. cj.frame (requires admin framework)
- The remote method uses ajax to execute server add-on methods.
- cj.frame.submitForm( remoteMethodName, frameHtmlId, formHtmlId)
- Example
- Example
- cj.frame.submitForm('myAccountFrameHandler','myAccountFrame','FormToSubmitId');
- cj.frame.submitForm('myAccountFrameHandler','myAccountFrame','FormToSubmitId');
- Arguments
- Arguments
- remoteMethodName: string - the name of the addon to call
- frameHtmlId: string - html Id of frame that will receive the html results from the addon
- formHtmlId: string - the Html Id of the form that will be submitted to the remoteMethod
- cj.frame.update( remoteMethodName, frameHtmlId, queryString)
- Example
- Example
- cj.frame.update('myAccountFrameHandler','myAccountFrame','formId=10');
- cj.frame.update('myAccountFrameHandler','myAccountFrame','formId=10');
- Arguments
- Arguments
- remoteMethodName: string - the name of the addon to call
- frameHtmlId: string - html Id of frame that will receive the html results from the addon
- queryString: string - Anything else to be passed to the remoteMethod
2. cj.remote
- The remote method uses ajax to execute server add-on methods.
- cj.remote(arguments)
- Example
- Example
- cj.remote({
- cj.remote({
- 'method':'myRemoteMethodAddon'
- 'method':'myRemoteMethodAddon'
- ,'callback':myCallback
- ,'callback':myCallback
- });
- Arguments
- 'method': string - addonname
- 'formId': string - html Id of form to be submitted
- 'callback': function - function to call on completion, two arguments, response and callbackArg
- 'callbackArg': object - passed direction to the callback function
- 'destinationId': string - html Id of an element to set innerHtml
- 'onEmptyHideId': string - if return is empty, hide this element
- 'onEmptyShowId': string - if return is empty, show this element
- 'queryString': string - queryString formatted name=value pairs added to post
- 'url': string - link to hit if not addon name provided
3. cj.xml
4. cj.ajax
- The ajax object has methods to simplify common ajax calls and provide a framework to simplify interaction with server-side methods.
- For instance, to display a current list of visitors you could:
- Write the code yourself - create an addon that the content manager could drop on any page. The addon includes an ajax call back to the server for data. Then create a remote method (addon) that responds to the request with the data formatted appropriately.
- Use cj.ajax - Within your same page addon, call the createRemoteQuery() method with the query needed on your page. Then do your ajax call with cj.ajax.data(). It runs your query and returns a javascript object with your data in a simple results object.
cj.admin