expandable doesn't work within a tabarray

[thelubin]

Setting the expandable property to true for a fieldset works fine for the first item in a tabarray. In item 2 it is no longer possible to collapse (or expand) the fieldset. Example:

{
"schema": {
    "stuff": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "text": {"type": "string","title": "Text"},
          "category": {"type": "string","title": "Category",
          "enum": ["Geography","Entertainment","History","Arts","Science","Sports"]}
          }
        }
      }
    },

  "form": [
    {
      "title":"Stuff",
      "type": "tabarray",
      "items": {
        "type": "fieldset","title":"Fieldset","expandable":true,
        "items": [
          {
          "type":"section","items":
          [{
            "type": "selectfieldset", "title": "Make a choice",
            "items":[
              {"type":"section","legend":"choice 1","items":[
              {"key": "stuff[].text"}]},

              {"type":"section","legend":"choice 2","items":[
              {"key": "stuff[].category"}]}
              ]}
          ]}]}
    }]
}

[mkirsten]

I think the problem is that expandable sections are initialized when the form is created (row 3252 in jsonform.js):

 // Initialize expandable sections, if any
  $('.expandable > div, .expandable > fieldset', formElt).hide();
  $('.expandable > legend', formElt).click(function () {
    var parent = $(this).parent();
    parent.toggleClass('expanded');
    $('> div', parent).slideToggle(100);
  });

When a new item in an array is added, such as in a tab array, this initialization is not done and hence there is no function attached to the mouse click nor is the section hidden as default. I think the solution is to add something very similar to the above but in this function (row 845 in jsonform.js):

      $('> a._jsonform-array-addmore', $nodeid).click(function (evt) {

I know too little javascript to alter the above code correctly so that it works, but I'll see what I can find out!

[mkirsten]

Great - just found a way around it, I think. I'll submit a pull request later during the weekend.

[0xgeert]

Haven't looked at the code that well (so ignore at will) but this seems
elegantly solvable with 'delegate events' in jquery.
This allows to bind to elements (based on css selector) without the
elements having to exist when the bind is done. All future elements that
are added (here : the new item to a tab array) that conform to the css
seelctor are autobinded on creation.

See: http://api.jquery.com/on/ for more info.

Generally instead of:
$(".parent > .child).click(function(){});

you'd write:
$(".parent).on("click","> child", function(){});

2013/4/26 mkirsten notifications@github.com

Great - just found a way around it, I think. I'll submit a pull request
later during the weekend.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/45#issuecomment-17068938
.

[mkirsten]

Ah, that sounds like exactly what we need. I couldn't get it work unfortunately and to my great disappointment, I realised that my so called fix introduces some side effects. I'll see if I can fix it and will post back here regardless.

[ulion]

Fixed in the above mentioned commit of my branch.