view · edit · sidebar · attach · print · history

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

20160704-contenttoggler

Summary

Commits

Index

Fix contenttoggler for virbac.bbmb.ngiger.ch

Banging my head, why in the HTML-Form create in the URL http://virbac.bbmb.ngiger.ch/de/bbmb/logout/ 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 http://virbac.bbmb.ngiger.ch/de/bbmb/logout/ 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

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/form/TextBox",
    "dojo/text!./templates/ContentToggler.html",
], 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';
      }
      this._update_text(this.status);
    },

   _update_text: function(status){
      console.log(Date() + "_update_text status " + this.status);
      if(this.status == 'closed'){
        this.containerNode.innerHTML="";
      } else {
        this.containerNode.innerHTML = this._saved_html;
      }
    },
    postCreate: function(){
      this._saved_html =  this.containerNode.innerHTML;
      console.log("postCreate before _update_text");
      this._update_text(this.status);
      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

<span>
<button class="${baseClass}"
  data-dojo-attach-point="textBox"
  data-dojo-attach-event="onclick:onClick">
  ${button_text}
</button><p data-dojo-attach-point="containerNode"></p>
</span>

Had also tried with LinkPane.

Trying to use it with plain CSS + Javascript. Idea comes from and generated HTML should look this http://jsfiddle.net/dJS4g/ or view-source:https://davidwalsh.name/demo/css-slide.php.

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

GET http://virbac.bbmb.ngiger.ch/resources/dojo.css 
(index):13 GET http://virbac.bbmb.ngiger.ch/dijit/themes/tundra/tundra.css 
(index):1 Uncaught SyntaxError: Unexpected token <
(index):11 Uncaught ReferenceError: require is not defined(anonymous function) @ (index):11
(index):13 GET http://virbac.bbmb.ngiger.ch/resources/dojo.css 
(index):13 GET http://virbac.bbmb.ngiger.ch/dijit/themes/tundra/tundra.css 404 (Not Found)
Navigated to http://virbac.bbmb.ngiger.ch/

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 = HtmlGrid::Link.new("#{key}_conditions_text_name", model, @session, self)
    link.css_id = "#{key}_conditions"
    link.value = msg
    link.set_attribute("status", "closed")

    div = HtmlGrid::Div.new(model, @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');
document.getElementById('delivery_conditions_text').hidden=!document.getElementById('delivery_conditions_text').hidden
"
    link.set_attribute("onclick", script)
    [link, div]
  end

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