How to hide group repeater

[jr@omnipotent.com.au]

RESOLVED How to hide group repeater

I want to hide the group repeater if a record is being edited (rather than inserted).
I'm trying the following javascript on the id element when onload, but can't get it to work:

if (this.get('value') > 0) { 
  document.getElement('.fabrikGroupRepeater').hide()
}

The code works if I remove the if condition.

 

[cheesegrits]

I have a feeling that 'onload', the 'this' object may not refer to the element.

Try ...

if ($('yourtable___id').value != "") {
    document.getElements('.fabrikGroupRepeater').hide();
}

Obviously replace yourtable___id with the full element name of your id element.

Also note getElements, plural.

-- hugh

 

[cheesegrits]

Also, note I'm comparing against the empty string using !+, rather than doing a numeric > comparison with 0.

That's because on a new row, the id element will have a blank value (empty string), not a 0. And trying to do a numeric comparison against a non-number will cause JS to pitch a NaN error ("Not a Number").

And irritatingly enough, neither parseInt() or toInt() will cast an empty string to a 0.

-- hugh

 

[jr@omnipotent.com.au]

Thanks for that Hugh

Here's the working code:

if ($('Booking___id').value != 'null') {
document.getElements('.fabrikGroupRepeater').hide();
}

 

[jr@omnipotent.com.au]

Actually 'null' is not working... could have sworn it did.

 

[jr@omnipotent.com.au]

I still can't get condition part of this code working.
I'm wondering if the element value is known on the load event?
Or maybe its just that I don't really understand the syntax and there is something wrong in there?

 

[cheesegrits]

Are you seeing any JS errors when the page loads with the code I gave you?

If all else fails, instead of using our built in element JS, you could try creating a ./components/com_fabrik/js/XX.js file (where XX is your numeric form ID), and do this:

window.addEvent('domready', function() {
    if ($('Booking___id').value != '') {
        document.getElements('.fabrikGroupRepeater').hide();
    }
});

-- hugh

 

[jr@omnipotent.com.au]

Thanks Hugh, here's the irony... my original code was very close, I just needed to test for not empty rather than > 0. So here is the working javascript:

if (this.get('value') != '') { 
     document.getElement('.fabrikGroupRepeater').hide()
}

Thanks for your help.

 

[cheesegrits]

OK, cool. I know we put in some code a while back to fake out 'this' when in a loading context, just wasn't sure if it worked in f3 or not.

BTW, out of interest, if you look at the page source, where we do the form_XX.dispatchEvent() for your event, does it use this.get('value') or have we changed 'this' to $('table___element').get('value')?

One last thing ... have you checked that your code works in IE?

-- hugh

 

[jr@omnipotent.com.au]

Actually, its not working anywhere... Caching was getting in the way of my testing. So when I clear the cache after each save of the element with the javascript, it fails in all browsers.

 

[jr@omnipotent.com.au]

Ok, I've got a solution, but its a bit of a kludge. The problem is getting it to work across browsers, IE in particular. The issue with IE is that when trying to reference the id or date_time element values in javascript, it returns "undefined" in IE (other elements seem ok).

So I've added a new element to the main group and called it "saved". It defaults to zero, its hidden and has a validation which replaces the value with 1. On this element I have the javascript:

if ($('Booking___saved').value == 1) {
  document.getElements('.fabrikGroupRepeater').hide();
}

Thanks again for your help Hugh.