Skip to main content

[SOLVED] Auto-Refresh of dojo components

3 replies [Last post]
groverblue
Offline
Joined: 2006-06-23

Is there a way to have dojo auto-refresh the contents of an accordion widget?

THE ORIGINAL QUESTION WAS ABOUT A "dojo.accordion" OBJECT. THE SOLUTION IS FOR A "jmaki.dcontainer" OBJECT.

Message was edited by: groverblue

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
gmurray71
Offline
Joined: 2003-07-31

The GroverBlue,

Long time no see. You could do it but it would be messy (meaning you might see that part of the page renderred).

What you could do is get a handle on the widget instance using

id="myaccordion"
value="{items :
[
{label : 'Books', content : 'Book content'},
{id : 'bar', label : 'Magazines', include : 'test.jsp', lazyLoad : true},
{label : 'Newspaper', content : 'Newspaper content', selected : true}
]}" />

Note the id as myaccordion.

Next you need to create a timer in your glue.js

// create namespace for the timer handler
jmaki.namespace('jmaki.timers');

jmaki.timers.sampleTimer = function(args) {
var widget = jmaki.getWidget("myaccordion");
// don't run it dojo not loaded or widget not ready
if (typeof djd43 == 'undefined' || !widget) return;
//myaccordion is the id of the widget then use the following code:
// add a row to the widget
widget.rows.push({label : 'greg', content : 'Book content'});
var container = document.getElementById("myaccordion");
widget.wrapper = djd43.widget.createWidget("AccordionContainer", null, container);
widget.init();
}

jmaki.addTimer({"timeout": 15000,
"action" : "call",
"target": {
"object": "jmaki.timers",
"functionName": "sampleTimer"
}
});

Pretty cool right?

Let me know if you have problems with this code.

-Greg

groverblue
Offline
Joined: 2006-06-23

Hey gmurray. Surprised you remember me. :)
I decided to avoid the accordion, but would like to do the same thing with a jmaki.dcontainer. I tried the following, but it doesn't appear to work. Can you help me out? Also, were can I find more information on jmaki.addTimer and jmaki.timers? Even the source code. I'd like to learn about the parameters and how to use the object.

******** glue.js *************
jmaki.namespace('jmaki.timers');

jmaki.timers.serviceStatsUpdater = function(args) {
var widget = jmaki.getWidget("serviceStats");
if (typeof djd43 == 'undefined' || !widget) return;
var container = document.getElementById("serviceStats");
widget.wrapper = djd43.widget.createWidget("DContainer", null, container);
widget.init();
}

jmaki.addTimer({"timeout": 5000,
"action" : "call",
"target": {
"object": "jmaki.timers",
"functionName": "serviceStatsUpdater"
}
});

************* page.jsp ***********************

groverblue
Offline
Joined: 2006-06-23

I noticed that references to djd43 should really be jmaki, but I'm still working on getting it working. will let you know.
***************************************************
Okay, i got it working. Also, I modified the dcontainer component.js file to suit my needs. The following code will give you a DIV element that dynamically updates based upon a specified interval (ie, timeout).

here is my glue.js changes:

jmaki.namespace('jmaki.timers');

jmaki.timers.serviceStatsUpdater = function(args) {
var widget = jmaki.getWidget("serviceStats");
if (typeof jmaki == 'undefined' || !widget){
return;
}
widget.doLookup();
}
jmaki.addTimer({"timeout": 2500,
"action" : "call",
"target": {
"object": "jmaki.timers",
"functionName": "serviceStatsUpdater"
}
});

here are the changes to dcontainer/component.js (at the end). Just compare my code below with the original component.js:

this.doLookup = function(){
jmaki.doAjax({url : this.lookupURL,
callback : this.lookupCallback,
onerror : this.lookupErrorCallback
});
}

if (wargs.value) {
if (wargs.value.views) {
showModelDeprecation();
items = wargs.value.views;
} else if (wargs.value.items) {
items = wargs.value.items;
} else {
showModelDeprecation();
return;
}
init();
} else if (wargs.service){

var _s = wargs.service;
this.lookupURL = _s;
this.lookupCallback = function(req) {
if (req.responseText == '') {
container.innerHTML = "Error loading widget data. No data.";
return;
}else{
container.innerHTML = req.responseText;
return;
}
}

this.lookupErrorCallback = function() {
container.innerHTML = "Error loading widget data.";
}

this.doLookup();

} else {
init();
}