How to refresh a JavaScript widget based on a parsed tiddler ?

[Silverfox]

Hello, 

I'm still working on developing a plugin using D3.js to vizualise and navigate into TW table of content and I'm currently working on a JavaScript Widget to automatically generate a json that describes this table of content.

As I want the visualisation to be automaticcally updated in case of change (addition, suppression, rename...) in  the table of content, I use a  "detector" tiddler that contains <<toc myRootTag>>.

and then I rely on the refresh part of the widget with the following syntax

```

myWidget.prototype.refresh = function(changedTiddlers) {

    var changedAttributes = this.computeAttributes();

    if(changedAttributes.data || changedTiddlers[this.myDataTiddler]) {

        this.refreshSelf();

        return true;

    } 

    return false;

};

```

"data" of course points to "detector"....

But actually the detector does not work, as its content (<<toc myRootTag>>) remains the same, just the parsing of this instruction is different...

How could I detect the change in parsing rather than the tiddler text ?

Hope I'm clear enough, thank you for your help

Silverfox

[BurningTreeC]

Hi @Silverfox

I believe there's the $tw.utils.hop() method you can use to see if a tiddler is part of changedTiddlers (which should contain a list of all changed tiddlers)

I don't know how and where you get your tiddlers but if you do it like:

//in your prototype.execute add: this.filterTag = this.getAttribute("tag");
this.allTiddlers = $tw.wiki.filterTiddlers("[all[tiddlers+shadows]tag[" + this.filterTag + "]]");

in your prototype.render, then you can do something like this in prototype.refresh:

var self = this;

...
...

for (var i=0; i < this.allTiddlers.length; i++) {
if($tw.utils.hop(self.allTiddlers[i],changedTiddlers)) {
self.refreshSelf();
return true;
}
}

...

If I understand it correctly, your detector tiddler contains just 

<<toc  "Content">>

... that tiddler does not change when tiddlers with the tag "Content" change, so that tiddler will not detect anything. But my method described above should detect changes in tiddlers tagged with the tag you pass to your widget. Maybe it's not fully correct atm but it should bring it there

BTC

[Silverfox]

Thank you... but I cannot make it work so far...

It appears that the 

if($tw.utils.hop(self.allTiddlers[i],changedTiddlers))

generates the following error: 

Uncaught TypeError: Cannot convert object to primitive value

I don't understand how to solve it...

[BurningTreeC]

Thank you... but I cannot make it work so far...

It appears that the 

if($tw.utils.hop(self.allTiddlers[i],changedTiddlers))

generates the following error: 

Uncaught TypeError: Cannot convert object to primitive value

Apologies, I believe I made a mistake here

Does it work if you switch the arguments?

if($tw.utils.hop(changedTiddlers,self.allTiddlers[i]))

---

Also, I learned today that one can use $tw.wiki.getTiddlersWithTag(this.filterTag); instead of $tw.wiki.filterTiddlers("[all[tiddlers+shadows]tag[" + this.filterTag + "]]");

[Silverfox]

It works much better now, thank you so much...

I can update my json automatically if a tiddler of the table of content is modified or suppressed, but it still needs a manual refresh in case I add a new tiddler to the toc.

Do you have any idea of another instruction that may detect an addition ?

[BurningTreeC]

It works much better now, thank you so much...

I can update my json automatically if a tiddler of the table of content is modified or suppressed, but it still needs a manual refresh in case I add a new tiddler to the toc.

Do you have any idea of another instruction that may detect an addition ?

I'm not sure - where do you have the line that gets all tiddlers with the specified tag?

What if you use this:

this.allTiddlers = $tw.wiki.getTiddlersWithTag(this.filterTag);


for (var i=0; i < this.allTiddlers.length; i++) {


if($tw.utils.hop(changedTiddlers,self.allTiddlers[i])) {
self.refreshSelf();
return true;
}
}




[BurningTreeC]

edit: I've edited the code above