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

Element Javascript

Discussion in 'Community' started by jh, Jun 12, 2019.

  1. jh

    jh Member

    Level: Community
    Hi

    Ive used a pre-defined action element javascript to show a hidden field depending on the value of another element. This is working fine.

    However, I need quite a long set of actions so I thought that I will need to write my own code (mainly to make use of OR operator) - however I can not get this to work in the same way as the pre-defined actions. I am trying:
    ...........................................
    It is in the 'item_new' element, and event is set to 'change'

    var form = Fabrik.getBlock('form_94');
    var itex = form.formElements.get('object_table___item_new').getValue();
    var element1 = form.formElements.get('object_table___shape_ann');

    if (itex == '38')
    {
    element1.show();
    }
    ...........................................

    but even after various tweeks nothing is working (in testing, the pre-defined doing the same thing is).

    Could someone kindly indicate what I am doing wrong, I have tried lots of different variations.

    Kind Regards
     
  2. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    Best way to approach that is to put your code into a function in a ./components/com_fabrik/js/form_X.js file (where X is the numeric ID of your form), like ...

    Code (Text):

    function doMyThing(el) {
       // the 'el' element object is passed in, and has a reference to the Fabrik form object
       var itex = el.form.formElements.get('object_table___item_new').getValue();
       var element1 = el.form.formElements.get('object_table___shape_ann');

       if (itex == '38')
       {
          element1.show();
       }
    }
     
    ... then in your element JS for the change event, call that function with 'this' (the element object) as an arg ...

    doMyThing(this);

    You can then open dev tools (in Chrome, ctrl-shift-i), find your form_X.js in the Sources, and put a breakpoint in that function. Then you can step through the code, see the values of variables, etc.

    Doing it this way, being able to debug your code, make it a zillion times easier.

    -- hugh
     
  3. jh

    jh Member

    Level: Community
    Hi

    Thank you, will try it that way. Can I just ask if you would consider it best to put any javascript code in the seperate external file? I have used some on a custom details template which is working fine, but is it better to have it in the seperate file?

    Many thanks for your help.
     
  4. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    I always prefer to have all my JS in one place, in a single file. Makes things like source control easier, and makes debugging a lot easier. But there's no single right answer.

    -- hugh
     

Share This Page