Show hide using a Calc element

sales2010 · Mar 29, 2013

Hello,

What action should i choose for the calc element to show/hide another fields in form?

i tried with change/blur/mouseover..nothing work

Thank you

sales2010 · Apr 1, 2013

anyone, please?

rob · Apr 2, 2013

If you update from github then change events should work.

sales2010 · Apr 3, 2013

probably i'm doing something wrong because i can't make it work

My elements: 1 database join, 2 cdd, 1 calc, 1 text field. I need to hide onload then show the textfield element based on value retrieved by the second cdd element.

The value in calc element is correctly filled. The values retrieved are 0, 1 and 2. if 0, then textelement should be hidden, else show.

Javascript: onload hide if textfield == 0 (tested also with ==''), onchange show textfield if !=0 then hide if ==0;

I also tried to create a XX.js file but if i want to see what values is retrieved by the calc element, i always get the value "undefined"..

Thank you

rob · Apr 5, 2013

Can you point me at the page? Might help me to figure out what's happening.

I also tried to create a XX.js file but if i want to see what values is retrieved by the calc element, i always get the value "undefined"..

What js code did you try?

-Rob

sales2010 · Apr 5, 2013

Unfortunately, i cannot provide a link to the site (company intranet) but i i attached the function i use it for form (166.js)

the js run fine if i use a cdd element instead of a calc element, but this will increase very much the load time for the form.

Thank you for help

sales2010 · Apr 7, 2013

Hello again,

Using the same file but only one calc element, I see some errors in firebug console:

Code:

Timp: 4/7/2013 9:35:15 AM
Eroare: TypeError: g is null
Fi?ier surs?: http://salesintranet3/aplicatii/media/system/js/mootools-more.js
R?ndul: 190

and

Code:

Timp: 4/7/2013 9:35:26 AM
Eroare: TypeError: e is null
Fi?ier surs?: http://salesintranet3/aplicatii/media/com_fabrik/js/form-min.js
R?ndul: 1

In Chrome debug console i see this:

Code:

Uncaught TypeError: Cannot call method 'get' of null form-min.js line 1

and this

Code:

Uncaught TypeError: Cannot call method 'getScroll' of null mootools-core.js line 118

sales2010 · Apr 9, 2013

Hello guys,

I know you've been busy this days, but i really need your help with this problem. The errors from above are visible when i add a new record. Using IE9, i can give more details to this error:

Line: 1
Error: Unable to get value of the property 'get': object is null or undefined
form-min.js, line 1 character 4974

which mean this code:

Code:

if(e.get("tag")==="td")

But, when i edit an existing record, the error is:

SCRIPT5007: Unable to get value of the property 'addEvent': object is null or undefined
form-min.js, line 1 character 20144

Code:

this.form.addEvent("click:relay(.deleteGroup)",function(b,a){b.preventDefault();this.deleteGroup(b)}.bind(this));

Please help me with this errors.

Thank you

cheesegrits · Apr 9, 2013

We really can't do anything without having access to your site. It's almost impossible to debug someone else's JavaScript by just looking at the code, unless there's an obvious syntax error, which I don't see.

-- hugh

sales2010 · Apr 9, 2013

Hello hugh,

Ok, i understand that but please confirm me that you can hide a textfield element based on information received in the calc element from a cdd element rendered as dropdown..

sales2010 · Apr 9, 2013

Ok, i'm trying to give you as much information i can. So, the first step was to unpublished all the calc element from form.. the errors from above disappeared. But soon as i activate a calc element (no action added, just a "empty" calc element) the error appear again:

Code:

[LIST=1]
[*][COLOR=red]Uncaught TypeError: Cannot call method 'get' of null [URL='http://salesintranet3/aplicatii/media/com_fabrik/js/form-min.js'][COLOR=#545454][RIGHT][RIGHT]form-min.js:1[/RIGHT][/RIGHT][/COLOR][/URL][/COLOR]
[LIST=1]
[*][COLOR=red]Class.doElementFX[/COLOR][URL='http://salesintranet3/aplicatii/media/com_fabrik/js/form-min.js'][COLOR=#545454][RIGHT][RIGHT]form-min.js:1[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]e.extend.$owner[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:38[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red](anonymous function)[/COLOR]
[*][COLOR=red](anonymous function)[/COLOR][URL='http://salesintranet3/aplicatii/plugins/fabrik_element/databasejoin/databasejoin-min.js'][COLOR=#545454][RIGHT][RIGHT]databasejoin-min.js:1[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red](anonymous function)[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:121[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red](anonymous function)[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:5[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]Array.implement.each[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:9[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]invoke.fireEvent[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:120[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]myAjax.Request.onSuccess[/COLOR][URL='http://salesintranet3/aplicatii/plugins/fabrik_element/cascadingdropdown/cascadingdropdown-min.js'][COLOR=#545454][RIGHT][RIGHT]cascadingdropdown-min.js:1[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red](anonymous function)[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:42[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red](anonymous function)[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:5[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]Array.implement.each[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:9[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]Events.Class.fireEvent[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:42[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]e.extend.$owner[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:38[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]c.Request.Class.onSuccess[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:160[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]e.extend.$owner[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:38[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]c.Request.Class.success[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:160[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]e.extend.$owner[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:38[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]c.Request.Class.onStateChange[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:159[/RIGHT][/RIGHT][/COLOR][/URL]
[*][COLOR=red]e.extend.$owner[/COLOR][URL='http://salesintranet3/aplicatii/media/system/js/mootools-core.js'][COLOR=#545454][RIGHT][RIGHT]mootools-core.js:38[/RIGHT][/RIGHT][/COLOR][/URL]
[/LIST]
[/LIST]

cheesegrits · Apr 10, 2013

Yes, the calc is like any other element. However, you will need to use a different method to get their values. Rather than relying on the DOM, like $('yourtable___yourcalc').get('value'), you'll need to use the actual Fabrik element object's getValue() method:

So on my test form, that's ...

Code:

form_61.formElements.get('fab_calc_test___calc_test_1').getValue()

Obviously replace 61 with your numeric form ID, and your full element name.

This is because the DOM method simply tries to return the 'value' of a form input field. But calc elements don't render as input elements, they are just a span with some HTML content. So using get('value') won't work, as spans don't have a 'value' attribute.

In general, you should use the formElement.get() and our getValue() method for getting element values, rather than using the DOM get('value') method, as there are a number of situations where you get a more consistent result with our method.

-- hugh

sales2010 · Apr 10, 2013

Hello Hugh,

Using form_61.formElements.get('contracte_campuri___status_camp_user1').getValue();

i'm getting this error:

Code:

Uncaught TypeError: Cannot call method 'get' of undefined 166.js:2
ShowHideCampuri 166.js:2
(anonymous function)
Class.runLoadEvent element-min.js:1
e.extend.$owner mootools-core.js:38
Class.addNewEvent element-min.js:1
e.extend.$owner mootools-core.js:38
Class.dispatchEvent form-min.js:1
e.extend.$owner mootools-core.js:38
(anonymous function) index.php:136
context.execCb require.js:1585
Module.check require.js:841
(anonymous function) require.js:1074
(anonymous function) require.js:126
(anonymous function) require.js:1117
each require.js:58
Module.emit require.js:1116
Module.check require.js:895
Module.enable require.js:1104
Module.init require.js:754
callGetModule require.js:1129
context.completeLoad require.js:1499
context.onScriptLoad require.js:1606

Tried with a calc element, then a dbjoin then a cdd element, same error.

In the JavaScript tab i have added ShowHideCampuri(); for load and change.

I use the latest version from Github, Joomla 3, Intranet.

jfquestiaux · Apr 10, 2013

I think it should be "form_166.formElements.get('contracte_campuri___status_camp_user1').getValue();" since I think your form's ID is 166 (based on your fifth post).

cheesegrits · Apr 10, 2013

JFQ would be correct. That's why I said:

Obviously replace 61 with your numeric form ID

-- hugh

sales2010 · Apr 10, 2013

Sorry, i manually wrote the code in the above post, the code was correct in js file and the error is still in place

sales2010 · Apr 10, 2013

ok, i managed to have a temporary space here . Unfortunately, the same error appear:

Code:

TypeError: form_1.formElements is undefined
http://www.aplicatiiweb.com/teste/joomla/components/com_fabrik/js/1.js
Line: 2

Line 2 is:

var test = form_1.formElements.get('test___calc').getValue();

this is the content of the 1.js file. The calc element will trigger the function ShowHideFields(); on load and on change

Code:

function ShowHideFields() {
var test = form_1.formElements.get('test___calc').getValue();
$('test___field').getParent().getParent().hide();
if (test > 0) {
$('test___field').getParent().getParent().show();
} else {
$('test___field').getParent().getParent().hide();
}
}

I see that this error message doesn't appear only for calc element, but for any type of element.

Thank you

cheesegrits · Apr 11, 2013

I get an internal server error from that link you posted. Need to see that page before I can tell you anything.

-- hugh

sales2010 · Apr 11, 2013

Yes, the webservers from ipage.com seems to be under siege..i'll be back

sales2010 · Apr 17, 2013

Ok, i finally managed to have a good webserver for testing. Please see the form here. A javascript has been added to the calc element and it should hide textfields if Status value= 3

Need your help, it's very urgent for me

Show hide using a Calc element

Well-Known Member

Well-Known Member

Administrator

Well-Known Member

Administrator

Well-Known Member

Attachments

Well-Known Member

Well-Known Member

Support Gopher

Well-Known Member

Well-Known Member

Support Gopher

Well-Known Member

Well-Known Member

Support Gopher

Well-Known Member

Well-Known Member

Support Gopher

Well-Known Member

Well-Known Member

Useful links