1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

How to hide element with javascript also in display view

Discussion in 'Community' started by joki94, Sep 5, 2017.

  1. joki94

    joki94 Member

    Level: Community
    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();
    }
     
  2. startpoint

    startpoint Active Member

    Level: Community
  3. joki94

    joki94 Member

    Level: Community
    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[i].checked && inputs[i].value == '2') {
    document.id('group63').show();
    }
    if (!inputs[i].checked && inputs[i].value == '2') {
    document.id('group63').hide();
    }
    if (inputs[i].checked && inputs[i].value == '3') {
    document.id('group64').show();
    }
    if (!inputs[i].checked && inputs[i].value == '3') {
    document.id('group64').hide();
    }
    if (inputs[i].checked && inputs[i].value == '4') {
    document.id('group65').show();
    }
    if (!inputs[i].checked && inputs[i].value == '4') {
    document.id('group65').hide();
    }
    }
    }

    But now, no javascript is working.

    Can you help me?

    Kind Regards, joki94[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
     
  4. startpoint

    startpoint Active Member

    Level: Community
    Replace X in form_X with your form id.
     
  5. joki94

    joki94 Member

    Level: Community
    I replaced it with form_14 and also details_14, but no changes
     
  6. startpoint

    startpoint Active Member

    Level: Community
    Wrap your code:
    Code (Javascript):
    requirejs(['fab/fabrik'],function(Fabrik){
          //Your code here...
    })
     
  7. joki94

    joki94 Member

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

    Kind Regards and thanks for your help, joki94
     
  8. startpoint

    startpoint Active Member

    Level: Community
  9. joki94

    joki94 Member

    Level: Community
    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[i].checked && inputs[i].value == '2') {
    document.id('group63').show();
    }
    if (!inputs[i].checked && inputs[i].value == '2') {
    document.id('group63').hide();
    }
    if (inputs[i].checked && inputs[i].value == '3') {
    document.id('group64').show();
    }
    if (!inputs[i].checked && inputs[i].value == '3') {
    document.id('group64').hide();
    }
    if (inputs[i].checked && inputs[i].value == '4') {
    document.id('group65').show();
    }
    if (!inputs[i].checked && inputs[i].value == '4') {
    document.id('group65').hide();
    }
    }
    }

    })[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
     
  10. joki94

    joki94 Member

    Level: Community
    it is really necesarry to create a new file for every javascript I want to use in form and details view for an element?
     
  11. startpoint

    startpoint Active Member

    Level: Community
    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?
     
  12. joki94

    joki94 Member

    Level: Community
    I have it in a file form_14.js and also directly in javascript section of a the element
     
  13. startpoint

    startpoint Active Member

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

    joki94 Member

    Level: Community
    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
     
  15. joki94

    joki94 Member

    Level: Community
    Hey,
    Has someone an answer for my issue?

    Kind Regards, joki94
     
  16. joki94

    joki94 Member

    Level: Community
    How can I hide groups and fields in detail view?
     
  17. p38

    p38 Member

    Level: Community
    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+
     
    troester likes this.

Share This Page