here is the whole code
<head>
<title>Loading Indicaator Example</title>
<style>
.loading-indicator {
font-size:8pt;
background-image: url('images/wait.gif');
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}
#example {
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
background-color: #ffccff;
height:500px;
width:24%;
padding:5px;
float:left;
clear:right;
}
#example1 {
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
height:500px;
width:74%;
padding:5px;
float:right;
clear:left;
}
</style>
<script></script> //yahoo's all utilities
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script> //yui-ext-core.js
<script>
var ajaxExample = {
ajaxInit : function(){
var mgr = new YAHOO.ext.UpdateManager('example');//pass the element id here
mgr.update('LoadingHandler.ashx');//server script to call
mgr.onUpdate.subscribe(this.onCallSuccess);//callback for success
mgr.onFailure.subscribe(this.onCallFailure);//callback for failure
var mgr1 = new YAHOO.ext.UpdateManager('example1',true);
mgr1.update('LoadHandler.ashx');
mgr1.onUpdate.subscribe(this.onSuccess);
mgr1.onFailure.subscribe(this.onFailure);
},
onCallSuccess : function(oElement,oResponse){
example.innerHTML = oResponse.responseText;
},
onCallFailure: function(oElement,oResponse){
alert("failure - example div");
},
onSuccess : function(oElement,oResponse){
example1.innerHTML = oResponse.responseText;
},
onFailure: function(oElement,oResponse){
alert("failure - example1 div");
}
};
//could have registered using simple js window events here
YAHOO.ext.EventManager.onDocumentReady(ajaxExample.ajaxInit, ajaxExample, true);
</script>
</head>
<body>
<form>
<div> </div>
<div> </div>
</form>
</body>
</html>