How to hide element with javascript also in display view

[joki94]

Hello,

I use javascript to hide or show some elements or groups depending on a checkbox value.

For the form view its okay and works perfect, but in display view the javascript doesnt work and I see every time all elements.

This is my code I use. How can I change them or which code do I have to add that the code is also working for display view?


var div = $('rfp_overviews___welche_messen');
var inputs = div.getElements('input[type=checkbox]');

for (i=0; i < inputs.length; i++) {
if (inputs.checked && inputs.value == '1') {
document.id('group62').show();
}

if (!inputs.checked && inputs.value == '1') {
document.id('group62').hide();
}
if (inputs.checked && inputs.value == '2') {
document.id('group63').show();
}
if (!inputs.checked && inputs.value == '2') {
document.id('group63').hide();
}

 

[startpoint]

http://fabrikar.com/forums/index.ph...able-to-reference-the-form-and-details-object

 

[joki94]

Hello startpoint,

thanks for your quick answer. I tried it and now my code looks like this:

if (Fabrik.blocks.has('form_X')) {


var div = $('rfp_overviews___welche_messen');
var inputs = div.getElements('input[type=checkbox]');

for (i=0; i < inputs.length; i++) {
if (inputs.checked && inputs.value == '1') {
document.id('group62').show();
}

if (!inputs.checked && inputs.value == '1') {
document.id('group62').hide();
}
if (inputs.checked && inputs.value == '2') {
document.id('group63').show();
}
if (!inputs.checked && inputs.value == '2') {
document.id('group63').hide();
}
if (inputs.checked && inputs.value == '3') {
document.id('group64').show();
}
if (!inputs.checked && inputs.value == '3') {
document.id('group64').hide();
}
if (inputs.checked && inputs.value == '4') {
document.id('group65').show();
}
if (!inputs.checked && inputs.value == '4') {
document.id('group65').hide();
}
}
}


if (Fabrik.blocks.has('details_X')) {
var div = $('rfp_overviews___welche_messen');
var inputs = div.getElements('input[type=checkbox]');

for (i=0; i < inputs.length; i++) {
if (inputs.checked && inputs.value == '1') {
document.id('group62').show();
}

if (!inputs.checked && inputs.value == '1') {
document.id('group62').hide();
}
if (inputs.checked && inputs.value == '2') {
document.id('group63').show();
}
if (!inputs.checked && inputs.value == '2') {
document.id('group63').hide();
}
if (inputs.checked && inputs.value == '3') {
document.id('group64').show();
}
if (!inputs.checked && inputs.value == '3') {
document.id('group64').hide();
}
if (inputs.checked && inputs.value == '4') {
document.id('group65').show();
}
if (!inputs.checked && inputs.value == '4') {
document.id('group65').hide();
}
}
}

But now, no javascript is working.

Can you help me?

Kind Regards, joki94

 

[startpoint]

Replace X in form_X with your form id.

 

[joki94]

I replaced it with form_14 and also details_14, but no changes

 

[startpoint]

Wrap your code:

requirejs(['fab/fabrik'],function(Fabrik){
      //Your code here...
})

 

[joki94]

Sorry but I am not sure what do you mean or how I can do that.

Kind Regards and thanks for your help, joki94

 

[startpoint]

More info:
http://fabrikar.com/forums/index.php?wiki/javascript/

 

[joki94]

This is at the moment my code.

requirejs(['fab/fabrik'],function(Fabrik){


if (Fabrik.blocks.has('form_14')) {


var div = $('rfp_overviews___welche_messen');
var inputs = div.getElements('input[type=checkbox]');

for (i=0; i < inputs.length; i++) {
if (inputs.checked && inputs.value == '1') {
document.id('group62').show();
}

if (!inputs.checked && inputs.value == '1') {
document.id('group62').hide();
}
if (inputs.checked && inputs.value == '2') {
document.id('group63').show();
}
if (!inputs.checked && inputs.value == '2') {
document.id('group63').hide();
}
if (inputs.checked && inputs.value == '3') {
document.id('group64').show();
}
if (!inputs.checked && inputs.value == '3') {
document.id('group64').hide();
}
if (inputs.checked && inputs.value == '4') {
document.id('group65').show();
}
if (!inputs.checked && inputs.value == '4') {
document.id('group65').hide();
}
}
}


if (Fabrik.blocks.has('details_14')) {

var div = $('rfp_overviews___welche_messen');
var inputs = div.getElements('input[type=checkbox]');

for (i=0; i < inputs.length; i++) {
if (inputs.checked && inputs.value == '1') {
document.id('group62').show();
}

if (!inputs.checked && inputs.value == '1') {
document.id('group62').hide();
}
if (inputs.checked && inputs.value == '2') {
document.id('group63').show();
}
if (!inputs.checked && inputs.value == '2') {
document.id('group63').hide();
}
if (inputs.checked && inputs.value == '3') {
document.id('group64').show();
}
if (!inputs.checked && inputs.value == '3') {
document.id('group64').hide();
}
if (inputs.checked && inputs.value == '4') {
document.id('group65').show();
}
if (!inputs.checked && inputs.value == '4') {
document.id('group65').hide();
}
}
}

})

 

[joki94]

it is really necesarry to create a new file for every javascript I want to use in form and details view for an element?

 

[startpoint]

I don't know why your code not work.
Where place this code? In form_X.js fileDo you have some js errors in console?

 

[joki94]

I have it in a file form_14.js and also directly in javascript section of a the element

 

[startpoint]

I no idea.
If you want try with plain javascript without fabrik class. May be in console directly and see for errors.

 

[joki94]

My knowledge with javascript is not good, so hope someone else can help me. Like I said before. For Form view my code works, but now nothing works.

Kind Regards, joki94

 

[joki94]

Hey,
Has someone an answer for my issue?

Kind Regards, joki94

 

[joki94]

How can I hide groups and fields in detail view?

 

[p38]

I know this is old, but this may help someone in the future.....

For forms use......

var element = Fabrik.getBlock('form_X').formElements.get('instructor_seminar_answers___media');

For details use......

var element = Fabrik.getBlock('details_X').formElements.get('instructor_seminar_answers___media');

where "X" is form id.

This is for Fabrik 3.1+