About

AJAX plugin is very useful if you want to load list of items from a data point and pass it to the Autocomplete or Filter plugins.

Because it meant to be as a helper method for either Autocomplete or Filter plugin, without either of these two present AJAX plugin won’t do anything.

Examples

Options

AJAX plugin options are grouped under ajax when passed to the $().textext() function. Be mindful that the whole ajax object is also passed to jQuery $.ajax call which means that you can change all jQuery options as well. Please refer to the jQuery documentation on how to set url and all other parameters. For example:

$('textarea').textext({
    plugins: 'ajax',
    ajax: {
        url: 'http://...'
    }
})

Important: Because it’s necessary to pass options to jQuery.ajax() in a single object, all jQuery related AJAX options like url, dataType, etc must be within the ajax object. This is the exception to general rule that TextExt options can be specified in dot or camel case notation.

ajax.data.results (false)

By default, the server end point is constantly being reloaded whenever user changes the value in the text input. If you’d rather have the client do result filtering, you can return all possible results from the server and cache them on the client by setting this option to true.

In such a case, only one call to the server will be made and filtering will be performed on the client side using ItemManager attached to the core.

ajax.data.callback (null)

By default, when user starts typing into the text input, AJAX plugin will start making requests to the url that you have specified and will pass whatever user has typed so far as a parameter named q, eg ?q=foo.

If you wish to change this behaviour, you can pass a function as a value for this option which takes one argument (the user input) and should return a key/value object that will be converted to the request parameters. For example:

'dataCallback' : function(query)
{
    return { 'search' : query };
} 

ajax.loading.delay (0.5)

The loading message delay is set in seconds and will specify how long it would take before user sees the message. If you don’t want user to ever see this message, set the option value to Number.MAX_VALUE.

ajax.loading.message ("Loading...")

Whenever an AJAX request is made and the server takes more than the number of seconds specified in ajax.loading.delay to respond, the message specified in this option will appear in the drop down.

ajax.type.delay (0.5)

When user is typing in or otherwise changing the value of the text input, it’s undesirable to make an AJAX request for every keystroke. Instead it’s more conservative to send a request every number of seconds while user is typing the value. This number of seconds is specified by the ajax.type.delay option.

Events

AJAX plugin dispatches or reacts to the following events.

getSuggestions

AJAX plugin reacts to the getSuggestions event dispatched by the Autocomplete plugin.

setSuggestions

In the event of successful AJAX request, the AJAX coponent dispatches the setSuggestions event meant to be recieved by the Autocomplete plugin.

showDropdown

AJAX plugin dispatches the showDropdown event which Autocomplete plugin is expecting. This is used to temporarily show the loading message if the AJAX request is taking longer than expected.

Methods

TextExtAjax.load(query)

  • query {String} Value that user has typed into the text area which is presumably the query.

Performas an async AJAX with specified options.

TextExtAjax.dontShowLoading()

If show loading message timer was started, calling this function disables it, otherwise nothing else happens.

TextExtAjax.init(core)

  • core {TextExt} Instance of the TextExt core class.

Initialization method called by the core during plugin instantiation.

TextExtAjax.onComplete(data, query)

  • data {Object} Data loaded from the server, should be an Array of strings by default or whatever data structure your custom ItemManager implements.

  • query {String} Query string, ie whatever user has typed in.

Successful call AJAX handler. Takes the data that came back from AJAX and the original query that was used to make the call.

TextExtAjax.onGetSuggestions(e, data)

  • e {Object} jQuery event.

  • data {Object} Data structure passed with the getSuggestions event which contains the user query, eg { query : "..." }.

Reacts to the getSuggestions event and begin loading suggestions. If ajax.cache.results is specified, all calls after the first one will use cached data and filter it with the core.itemManager.filter().

TextExtAjax.showLoading()

Shows message specified in ajax.loading.message if loading data takes more than number of seconds specified in ajax.loading.delay.

Fork me on GitHub