Updating dojo from 0.3 to 1.11 changed dramatically. Starting a test with a hand written html page first.
The following code snippet works
<script>
require(["dojo/fx/Toggler", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Toggler, dom, on){
var toggler = new Toggler({
node: "delivery-conditions"
});
toggler.hide(); // only if the default status is 'closed'
on(dom.byId("delivery-conditions-button"), "click", function(e){
if (this.attributes["status"].nodeValue == 'closed') {
this.attributes["status"].nodeValue = 'open';
this.innerHTML = this.attributes["message_open"].nodeValue;
toggler.show();
} else {
this.attributes["status"].nodeValue = 'closed';
this.innerHTML = this.attributes["message_close"].nodeValue;
toggler.hide();
}
});
});
</script>
<..>
<tr><td colspan="2" class="login-foot">
<button type="button" id="delivery-conditions-button"
css_class="login-foot" message_open="Lieferbedingungen" message_close="Lieferbedingungen" status="closed"
>Lieferbedingungen </button>
<div id="delivery-conditions">Mit der Anmeldung nehme ich die Geschäftsbedingungen zur Kenntnis.<br><br>Bestellungen, die bei uns bis 14.00 Uhr eingehen, treffen<br>grundsätzlich am nächsten Arbeitstag beim Kunden ein.<br><br>Impfstoff-Bestellungen am späten Donnerstagnachmittag oder am Freitag<br>werden wie folgt ausgeliefert:<ul>
<li> Am darauffolgenden Montag (wenn keine Dringlichkeit vermerkt ist) </li>
<br><li> Auf Wunsch am Freitag per Mondexpress, dieser wird am Samstagmorgen bis <br>9 Uhr ausgeliefert (Kosten gehen zu Lasten des Kunden) </li>
</ul>
<br>
</div>
</td></tr>
Struggeling to create a way to add the function which handle the node-id of the button and the content.
Must deepen my understanding of DoJo and the process of creating widgets. Looking at the following tutorials:
Pondering, why the line 24 in doc/resources/javascript/widget/ContentToggler.js never gets called, when loading my doc/toggler_test3.html
As I moved everything into one single file I must change the method signature for ContentToggler from function(declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, template) to function(declare, parser, ready, _WidgetBase, _TemplatedMixin), but in this case I would loose the advantages of the template.
Found a way to load only local files (and some from https://ajax.googleapis.com/ajax/libs/dojo/1.10.4). See Attach:toggler_test6.txt
Want to follow the example given in https://dojotoolkit.org/documentation/tutorials/1.10/templated/demo/templated-demo.html. Adding it to my toggler_test7.html
Want to follow the example given in https://dojotoolkit.org/documentation/tutorials/1.10/templated/demo/templated-demo.html. Adding it to my new templated_demo.html. Did not work serving with local files.
Reverted toggler_test7.html to use the ContentToggler.js and template/ContentToggler.html from the server and I see again in the console log declare using template. Found that the neither postCreate nor the onClick functions are called. Why?
There was an error in the function declaration. The correct one is function(declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin, Button, template. Now I can break on the onClick and I see the needed variables (eg. this.togglee returns "delivery-conditions")
Unable to find a solution on howto get a element outside the containing element (eg. via dom.byId). Therefore I think that tomorrow I must place the text to shown or hidden inside the element.