Event listeners
Attaching event listeners to certain events launched by the script allows you to execute certain pieces of code whenever an event happens, for example on errors or page loads.
You can see the available events and the parameters they use below:
Event | Occurs... |
error |
Whenever we encounter an error while requesting a new page, this event is triggered.
Parameters:
- url: the url of the page where the error occured
- message: a message saying what's wrong here
- bda_function: name of the function where the error occured
|
load_begin |
Someone has clicked on one of our links. This event is fired whenever a new request occurs.
Parameters:
- url: the url of the page we're about to load
- requesttype: "GET" or "POST"
- parameters: an array or string of parameters we're sending with the request. For example form parameters.
|
load_complete |
A new page has been loaded. This event is fired before the tween animation begins.
Parameters:
- url: the url of the loaded page
- content: the entire HTML-code of the new page. String-format, we're getting errors with invalid XML if we use XML or DOM-objects here.
|
tween_begin |
When we've loaded a new page, an animation will play ( if you haven't disabled this ). This event is fired when the tween animation begins.
Parameters:
- tween_to: height of the content region in pixels. There's a minimum of 100 pixels.
|
tween_complete |
The animation is complete. This event should be fired approximately one second after the tween_begin event. |
state_changed |
Fired whenever the page state has changed.
Parameters:
- state: the current page state. Should be "loading", "calculating" or "error".
- parameters: if there are available parameters you'll find them here. If not, parameters will be null.
|
Adding event listeners
In this example we have three regions that have to be refreshed on every page change. In the region "content", we have our primary page content. The two secondary regions "menu" and "sidebar" contain other information which could change when we load another page, for example another menu-item is set to active, or there's an extra column visible in the sidebar. There is no animation on the secondary regions.
As for the event listener, we have added a new listener for the "load_complete"-event. This event will fire each time a page is done loading.
What we are doing here is simply telling the script to run function "loadHandler()" each time a page is done loading. We can get the page url through the event-object which is passed through.
<head>
<script type="text/javascript" src="com.bydust.ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var refreshed_content = Array('!content,'menu','sidebar');
bda.addEventListener('load_complete','loadHandler');
bda.start(refreshed_content);
}
function loadHandler(e){
alert('page ' + e.url + ' loaded');
}
</script>
</head>
<body>
</body>