For sure you've already recognized the automatic loading indicator which appears on all you Ajax requests. Its a common text which is located in a
div tag. Ajaxed automatically displays and hides it for you. That means no work for you ;)
Customizing default loading indicator
To change the loading text all you have to do is assign a new value to the
AJAXED_LOADINGTEXT initialization variable. Normally you set this within your
config.asp file:
<%
AJAXED_LOADINGTEXT = "Please be patient..."
%>
In order to change the appearance of the indicator you just need to provide some css styles for the css class called
ajaxLoadingIndicator. Have a look at this example which overrides the indicator message and applies a fancy style.
<!--#include virtual="/ajaxed/ajaxed.asp"-->
<%
AJAXED_LOADINGTEXT = "You have to wait. You know that ;)"
set page = new AjaxedPage
page.draw()
sub pagePart_do()
lib.sleep(1)
str.write("Done! Do it again?")
end sub
sub main() %>
<style>
.ajaxLoadingIndicator {
font:16pt tahoma;
color:#fff;
background:#f00;
padding:1em 2em;
top:auto !important;
bottom:0px;
}
</style>
<button id="btn" type="button" onclick="ajaxed.callback('do', 'btn')">
Do somehthing
</button>
<% end sub %>
Run this code — loading.asp
The example did override the css class and the message directly within the page. Normally you would configure that globally but its good to know you can still override it.
Important: The default indicator is ALWAYS positioned at the right top corner of your page with a fixed position. That means it will always stay at the top even if the user will scroll on your page. ajaxed sets the following css attributes automatically:
top: 0px;
right: 0px;
position: fixed;
In case you want to position your default indicator somewhere else (means you want to change either the top, right or position attribute) you need to mark those attirbutes with !important so ajaxed cannot overwrite them:
right: 20px !important;
Creating your own loading indicator
The default indicator is nice but sometimes you would like to show a custom one somewhere else on the page. Lets think about a widget which gets reloaded. It would be nice to place an indicator directly inside it. Thats possible and not even really difficult.
<!--#include virtual="/ajaxed/ajaxed.asp"-->
<%
set page = new AjaxedPage
page.draw()
sub callback(a)
lib.sleep(2)
end sub
sub main() %>
<script>
function doSomething() {
$('loading').show();
ajaxed.callback('do', function(r) {
alert('done!');
}, null, function(t) {
$('loading').hide();
})
}
</script>
<button type="button" onclick="doSomething()">
Do somehthing
</button>
<div id="loading" style="display:none">
<img src="http://www.tourmandu.com/img/uploading.gif" style="vertical-align:middle"/>
Please be patient...
</div>
<% end sub %>
Run this code — customLoading.asp
The only magic here is to create your own function which will call the
ajaxed.callback. Before the actual call we show our custom indicator and hide it within the
onComplete callback. Thats all. Styling is up to you.
In case you only want to use your own custom indicators you can disable the default indicator by setting its message to an empty string and/or setting its style to display:none
Version 2.1.1 Released
—
4174 days ago
