Ajax links

javascript/css files

  1. mvcct.controls.js
  2. mvcct.controls.ajax.js

Page areas may be updated with an ajax operation by adding the attribute data-operation="ajax-html id" to links where id is the id of the root node that will be cleared and filled with the new ajax returned content. The same behavior may be added to a pager by filling its ajax-id attribute with id. When this is done all pager links will be created with: data-operation="ajax-html id".

In case the ajax-html operation has a second argument data-operation="ajax-html id endpointName" the developer may specify some properties of the ajax update by defining an "html endpoint" with name endpointName:


                    mvcct.controls.addHtmlEndpoint
                    (name, onStart, onCompleted, 
                        errorMessageF, onError, onProgress)
                
Where name is endpoint name, and is the only obligatory parameter. OnStart and onCompleted are called, respectively immediately before the ajax call and immediately after a result is returned. They are passed the element clicked as their first argument and the container where the Html will be placed as their second argument. They are usefull to add "blocking" animations. onError is called in case of errors and is passed the content of the "data-error-message" attribute of the clicked element, if any, otherwise an empty string. onProgress and onProgress>errorMessageF are for future extensions.

If no endpoint is passed, a default endpoint is used, that grays out the node being updated and blocks any interaction with it during the update. The default endpoint has also an error handling that displays the string it is passed in an alert box.

In case links are equipped with data-operation="ajax-json jsonEndpointName", or pagers are equipped with ajax-endpoint="jsonEndpointName", an ajax json retrieval operation is performed. Operation features are declared in the "json endpoint" with name jsonEndpointName. Json endpoints are documented here.


Fork me on GitHub