Search This Blog

Thursday, April 26, 2012

Using AJAX with the Visual Editor

AJAX is powerful, and with the Black Toolkit it is very easy to use.
You can use a AJAX component, or a simpler AJAX form.

For the AJAX Form:
  1. In the Visual Editor click the "Custom" tab, and then click the AJAX Form component.
  2. After dragging the component to the HTML, set the functionname property to the function name, and the action property to the url of the AJAX page on server..
  3. In the events tab, set the onreadystatechange4 event. It is the event when the AJAX response is successfully retrieved.
  4. Put form objects, like inputs, selects, etc... as you need inside the form. Note the functionname property will make the AJAX code automatically.
  5. You can use a AJAX submit button or call the functionname property directly to call AJAX.


For the AJAX component:

  1. In the Visual Editor just click in the "Script" tab, and then click in ajax component.
  2. After dragging the component to the form, set the functionname property to the function name.
  3. In the events tab, set the onreadystatechange4 event. It is the event when the AJAX response is successfully retrieved.

The functionname 's parameters are (method, url, async, data, contentType, contentLength):

  • method - Supported are "POST" and "GET".
  • url - The URL to the page.
  • async - Asynchronous, generally is true.
  • data - The "POST" data.
  • contentType(optional): The "POST" contenttype header. If it is not filled, is"application/x-www-form-urlencoded".
  • contentLength(optional): the "POST" contenLength header. If it is not filled is data.length.

Example:
ajx_getcustomers("POST", "../ajax/customers.php", true, "all=true&type="+frm.type.value);