Topic
3 replies Latest Post - ‏2012-12-11T16:05:22Z by mburati
n3d
n3d
9 Posts
ACCEPTED ANSWER

Pinned topic Not able to disable dojo checkbox widgets

‏2012-12-11T07:07:01Z |
I want make the dojo widgets having class=myclass readonly.
For this i've written below js. This works fine for textbox, but not working for checkbox for the attached portlet Model.
However same function works well when used in a plain html file.

dojo.require("dijit.form.Form");

dojo.ready(function() {
alert("inside dojo ready");
var mynodes = dojo.query(".myclass");
dojo.forEach(mynodes, function(mynode) {
var myDijit = dijit.byNode(mynode);
alert(myDijit);
myDijit.attr("readOnly","readOnly");
});
});
I'm using dojo extention 1.x, and enterprise theme extention feature-sets.
Updated on 2012-12-11T16:05:22Z at 2012-12-11T16:05:22Z by mburati
  • Dinger
    Dinger
    91 Posts
    ACCEPTED ANSWER

    Re: Not able to disable dojo checkbox widgets

    ‏2012-12-11T09:23:37Z  in response to n3d
    A quick search of the web for "HTML checkbox readonly" provides a lot of discussion about how specifying the readonly attribute on an input element with type="checkbox" does not keep the state of the checkbox from being changed. The W3C HTML spec (I looked at versions 4 and 5) also indicate that readonly is not a valid attribute for a checkbox.

    I think you'll have to use a different strategy for checkboxes (actually for any inputs other than text and password.)

    The content of this post is my own and does not necessarily represent the positions, strategies, or opinions of IBM.
  • n3d
    n3d
    9 Posts
    ACCEPTED ANSWER

    Re: Not able to disable dojo checkbox widgets

    ‏2012-12-11T09:39:48Z  in response to n3d
    its true readonly doesnt works on HTML checkbox... but it is a valid attribute for dojo checkbox.
    The problem here is that the dojo code which is working in plain HTML is not working in WEF.
    • mburati
      mburati
      2392 Posts
      ACCEPTED ANSWER

      Re: Not able to disable dojo checkbox widgets

      ‏2012-12-11T16:05:22Z  in response to n3d
      While I haven't tried this before myself, and I probably would've tried to set an attribute in the generated html rather than via JS, there should be a way to make what you're trying to do work, so I tried a slight tweak to your JS which appears to work at first glance.

      • If you look at the view source of the HTML page in the browser, you'll note that WEF Page Automation turns your original HTML node into a span wrapper and then generates two input nodes within that (one for the visible HTML checkbox and another hidden one to hold the actual value to be submitted) to get around the ugly behavior of the HTML spec where checboxes do not submit a value if unchecked (WEF checkboxes submit a value whether checked or not).

      • Because of this, your search by class where you're looking for the class you put on the original HTML node is now trying to treat the span wrapper as the node that is the dijit, which it is not as you can see from the view source of the page and by inspect element on the checkbox itself (Dojo checbox sets the class attribute to dijitCheckBoxInput).

      I changed your JS such that if it runs into one of your myclass nodes which is not itself a dijit, it searches within that node for a sub-node with class dijitCheckBoxInput, and if it finds a node with that class, it does a dijit.byId on that checkbox dijit node and then sets the readonly on that.

      Here's your JS function with my (minor) tweaks. I can't guarantee this will do everything you want and I haven't had time to fully test it, so you will need to do that yourself and ensure that this is what you intend to do and that it works in all browsers you need to support. Another option is figuring out the page location of the generated html element that ends up with the dojoType for the checkbox and trying to set the readonly there via Attribute Setter builder.

      Again, this is mostly your original code - my tweak/fix was just to how you're handling the case where the resulting myclass node isn't itself the dijit and again, this is just a suggestion that you will have to try/test/validate meets your need - I can't guarantee from here with limited knowledge of your app and its use cases and browser requirements whether this should be your final solution or if there might be a better way to do it (such as the attr setter):

      
      dojo.ready(function() 
      { alert(
      "inside dojo ready"); var mynodes = dojo.query(
      ".myclass"); dojo.forEach(mynodes, function(mynode) 
      { var myDijit = dijit.byNode(mynode); alert(myDijit); *              
      
      if (! myDijit) 
      {* *                  dojo.forEach(dojo.query(
      ".dijitCheckBoxInput", mynode), function(cbNode) 
      {* *              alert(
      "Got node: " + cbNode);* *             var cbDijit = dijit.byId(cbNode.getAttribute(
      'id'));* *               alert(
      "cbDijit: " + cbDijit);* *             cbDijit.attr(
      "readOnly",
      "readOnly");* *                 
      });* *            
      } 
      
      else 
      {* myDijit.attr(
      "readOnly",
      "readOnly"); 
      } 
      });   
      });
      


      I hope that info helps,
      ..Mike Burati
      http://www-10.lotus.com/ldd/pfwiki.nsf/
      The postings on this site are my own and do not necessarily represent the positions, strategies, or opinions of IBM.