view · edit · sidebar · attach · print · history

< Niklaus.20160705-setup-virbac | Index | Niklaus.20160629-contenttoggler >>





Fix contenttoggler for

Banging my head, why in the HTML-Form create in the URL clicking in the "Lieferbegingungen" the form gets submitted even when I only want my onClick-Handler executed. This works fine when the corresponding DIV-tag is put outside the HTML form.

The looks like this

What is dojo way to create a HTML href link?

What is is dojo way to create a HTMl href link? Tried with a TextBox which is defined in the ContentToggler.js

], function(declare, _OnDijitClickMixin, _WidgetBase,  _TemplatedMixin,
            _WidgetsInTemplateMixin, TextBox, template, dom) {

    console.log("declare using _WidgetsInTemplateMixin");

    return declare("widget/ContentToggler", [_WidgetBase, _OnDijitClickMixin,
        _TemplatedMixin, _WidgetsInTemplateMixin,
    ], {
    //  set our template
    templateString: template,

    //  some properties
    baseClass: "TextBox",

    _saved_html: "saved_html",

    //  define an onClick handler
    onClick: function(){
      console.log("onClick handler status " + this.status);
      // console.log("onClick handler " + this.delivery_conditions);

      if(this.status == 'open'){
        this.status = 'closed';
      } else {
        this.status = 'open';

   _update_text: function(status){
      console.log(Date() + "_update_text status " + this.status);
      if(this.status == 'closed'){
      } else {
        this.containerNode.innerHTML = this._saved_html;
    postCreate: function(){
      this._saved_html =  this.containerNode.innerHTML;
      console.log("postCreate before _update_text");
      this.connect(this.domNode, "onclick", "_onClick");
      this.connect(this.domNode, "_onButtonClick", "_onButtonClick");
      this.connect(this.domNode, "_onClick", "_onClick");
      console.log("postCreate connected");
      // console.log("postCreate  this.togglee "  + this.togglee);
      // console.log("postCreate  this._saved_html "  + this._saved_html);

and template ContentToggler.html

<button class="${baseClass}"
</button><p data-dojo-attach-point="containerNode"></p>

Had also tried with LinkPane.

Trying to use it with plain CSS + Javascript. Idea comes from and generated HTML should look this or view-source:

Adapting lib/bbmb/virbac/html/view/login.rb to create a HREF and div. Filling the div had a problem, with embedded ". The javascript function which is attached via a htmlgrid.set_attribute("onclick") parameter name is event. Trying to figure out on howto translate the $("#contact").slideToggle(); javascript snippet, as I always get the followg (index):22 Uncaught ReferenceError: $ is not defined

What is working is code like document.getElementById('delivery_conditions_text').innerText='xxxxx';. Trying to assign it using document.getElementById('#{key}_conditions_text').innerHtml = '#{CGI.unescape(full_text)}'; gives Uncaught SyntaxError: Invalid or unexpected token

To get completely rid of the dojo the following actions were required

  • lib/bbmb/html/util/lookandfeel.rb: Replace on line 462 :dojo_js => 'dojo/dojo.js.uncompressed.js', by :dojo_js => '',. Uncommenting did not help, as htmlgrid has a default value for dojo_js
  • lib/bbmb/virbac/html/view/login.rb: Delete lines containing 'data-dojo-type' => 'widget/ContentToggler',.
  • lib/bbmb/virbac/html/view/login.rb: Replace DOJO_REQUIRE = [ 'dojo', 'javascript/widget/ContentToggler' ] by DOJO_REQUIRE = []

Looking at the source I do not find any loading of the dojo.js javascript. But in the javascript console I get the following errors

(index):13 GET 
(index):1 Uncaught SyntaxError: Unexpected token <
(index):11 Uncaught ReferenceError: require is not defined(anonymous function) @ (index):11
(index):13 GET 
(index):13 GET 404 (Not Found)
Navigated to

Commenting out include HtmlGrid::DojoToolkit::DojoTemplate in lib/bbmb/virbac/html/view/login.rb fixe this problem.

Now the following debug statement works. document.getElementById('delivery_conditions_text').hidden = true Using div.set_attribute('style', "display:none") makes the expanded delivery conditions invisible. Having problems in changing this attribute when running the first time the onClick. Lost some time till I found out that it is very easy to set the attribute hidden of the div tag. Now toggling works find with the following procedure

  def delivery_conditions(model)
    key = 'delivery'
    msg = @lookandfeel.lookup("#{key}_conditions")
    full_text = @lookandfeel.lookup("#{key}_conditions_text")
    link ="#{key}_conditions_text_name", model, @session, self)
    link.css_id = "#{key}_conditions"
    link.value = msg
    link.set_attribute("status", "closed")

    div =, @session, self)
    div.css_id = "#{key}_conditions_text"
    div.set_attribute('hidden', 'true')
    # div.set_attribute('style', "display:none")
    div.value = full_text
    script = "event.preventDefault();
var element = document.getElementById('delivery_conditions_text');
    link.set_attribute("onclick", script)
    [link, div]

Toggling delivery and business conditions work. For toggling the new customer I need some more changes, which will be done tomorrow. The link ist missing.


Current status of login.rb is Attach:virbac_login_rb.txt.

view · edit · sidebar · attach · print · history
Page last modified on July 04, 2016, at 05:17 PM