Scriptalaculous Class
Provides a set of helpers for calling Scriptaculous JavaScript functions, including those which create Ajax controls and visual effects.
To be able to use these helpers, you must include the Prototype JavaScript framework and the Scriptaculous JavaScript library in your pages.
The Scriptaculous helpers’ behavior can be tweaked with various options. See the documentation at script.aculo.us for more information on using these helpers in your application.
Initializing the Class
Initialize this class like any other class.
$scriptalaculous= new Scriptalaculous();
Then use any of the meber functions given below.
dragable_element($element_id,$options=null)
Makes the element with the DOM ID specified by element_id draggable.
Example :
draggable_element('my_image',array('revert'=?'true'));
drop_receiving_element($element_id,$options=null)
Makes the element with the DOM ID specified by element_id receive dropped draggable elements (created by draggable_element). and make an AJAX call By default, the action called gets the DOM ID of the element as parameter.
Example :
drop_receiving_element('my_cart',array('url'=>$update_url));
sortable_element($element_id,$options=null)
Makes the element with the DOM ID specified by element_id sortable by drag-and-drop and make an Ajax call whenever the sort order has changed. By default, the action called gets the serialized sortable element as parameters.
Example :
sortable_element('my_list',array('url'=>$order_url));
visual_effect($name,$element_id=false,$js_options=null)
Returns a JavaScript snippet to be used on the Ajax callbacks for starting visual effects.
Example :
sortable_element('my_list',array('url'=>$order_url));
These functions are from JavaScriptMacro class which was merged into Scriptalaculous.
auto_complete_field($field_id,$options=null)
Adds AJAX autocomplete functionality to the text input field with the DOM ID specified by field_id.
This function expects that the called action returns a HTML <ul> list, or nothing if no entries should be displayed for autocompletion.
You‘ll probably want to turn the browser’s built-in autocompletion off, so be sure to include a autocomplete="off" attribute with your text input field.
The autocompleter object is assigned to a Javascript variable named field_id_auto_completer. This object is useful if you for example want to trigger the auto-complete suggestions through other means than user input (for that specific case, call the activate method on that object).
Required options are:
- url
URL to call for autocompletion results in url_for format.
- update
Specifies the DOM ID of the element whose innerHTML should be updated with the autocomplete entries returned by the AJAX request. Defaults to field_id + ‘_auto_complete‘ - with
A JavaScript expression specifying the parameters for the XMLHttpRequest. This defaults to ‘fieldname=value’. - frequency
Determines the time to wait after the last keystroke for the AJAX request to be initiated. - indicator
Specifies the DOM ID of an element which will be displayed while autocomplete is running. - tokens
A string or an array of strings containing separator tokens for tokenized incremental autocompletion. Example: :tokens => ’,’ would allow multiple autocompletion entries, separated by commas. - min_chars
The minimum number of characters that should be in the input field before an Ajax call is made to the server. - on_hide
A Javascript expression that is called when the autocompletion div is hidden. The expression should take two variables: element and update. Element is a DOM element for the field, update is a DOM element for the div from which the innerHTML is replaced. - on_show
Like on_hide, only now the expression is called then the div is shown. - after_update_element
A Javascript expression that is called when the user has selected one of the proposed values. The expression should take two variables: element and value. Element is a DOM element for the field, value is the value selected by the user. - select
Pick the class of the element from which the value for insertion should be extracted. If this is not specified, the entire element is used.
in_place_editor($field_id,$options=null)
Makes an HTML element specified by the DOM ID field_id become an in-place editor of a property.
A form is automatically created and displayed when the user clicks the element.
The form is serialized and sent to the server using an AJAX call, the action on the server should process the value and return the updated value in the body of the reponse. The element will automatically be updated with the changed value (as returned from the server).
Required options are:
- url
Specifies the url where the updated value should be sent after the user presses "ok".
- rows
Number of rows (more than 1 will use a TEXTAREA) - cols
Number of characters the text input should span (works for both INPUT and TEXTAREA) - size
Synonym for :cols when using a single line text input. - cancel_text
The text on the cancel link. (default: "cancel") - save_text
The text on the save link. (default: "ok") - loading_text
The text to display when submitting to the server (default: "Saving…") - external_control
The id of an external control used to enter edit mode. - load_text_url
URL where initial value of editor (content) is retrieved. - options
Pass through options to the AJAX call (see prototype’s Ajax.Updater) - with
JavaScript snippet that should return what is to be sent in the AJAX call, form is an implicit parameter - script
Instructs the in-place editor to evaluate the remote JavaScript response (default: false)
in_place_editor_field(object, $tag_options = null, $options = null)
Renders the value of the specified object and method with in-place editing capabilities.
text_field_with_auto_complete(object, $tag_options = null, $options = null)
Wrapper for text_field with added AJAX autocompletion functionality.