1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice
  2. If you update to Joomla 3.9.16, you will have to update Fabrik from the latest GitHub version, to fix a bug introduced in Joomla, which makes it impossible to list front end folder locations in backend JForms. This affects things like template selection.
    Dismiss Notice

javascript file location

Discussion in 'Community' started by jbyrley, Mar 24, 2020.

  1. jbyrley

    jbyrley Member

    Level: Community
    Could someone point out where is the the file or location of the javascript code that is created when I set a javascript action for an element? I am just trying to get an idea as to required syntax to create a custom javascript action. I have looked in the media\com_fabrik\js directory but can't locate it there.

    I am trying to do a slide out when multiple conditions are met, and don't want to use the preset actions because that results in too many individual actions that could better be combined.
     
  2. juuser

    juuser Member

    Level: Community
    Settings for these actions should be stored in the database. And the code itself is probably somewhere "deep" in Fabrik's code, so it would probably be easier to read this: http://fabrikar.com/forums/index.php?wiki/element-javascript/

    and search "element javascript" in the forums to possibly get some more code samples and ideas.
     
  3. jbyrley

    jbyrley Member

    Level: Community
    Thank you for your response. I had actually already reviewed both the "Element Javascript" and the "Element Javascript (Advanced)" articles in the wiki pretty thoroughly, and unfortunately I was unable to find any indication where the element javascript code is located or example code that is relevant to my needs; ie, how to create custom javascript actions to "slide in" and "slide out" one element based upon various conditions in another element (I know there there are presets for this, but as mentioned above, I am trying to find a way to consolidate the actions rather than have a huge list of individual condition tests/js actions).

    I have also searched in the database in the "fabrik_jsactions" and "fabrik_elements" tables, as well as the tables pertaining to the specific lists where my created elements that have javascript actions are saved. In "fabrik_jsactions" there is a column for "parameters" that does contain the parameters for the various js actions I have set, but there is no complete coding there.

    I have also searched through the forums and so far have not found code samples relevant to my needs. I thought there might be someone who at least periodically monitors this forum who might be able to give a simple -- "the file is named 'abc.js and is located in such-and-such directory" or "look in the 'xy_z' table in the database" etc. As is clear I am very much still a beginner at all this, and so if anyone has the patience and inclination, some guidance along these lines would be much appreciated! In the meantime, I will keep looking!
     
  4. juuser

    juuser Member

    Level: Community
    If you could describe in more detail what are you trying to achieve, there's a chance you get some guidance in here.
     
  5. troester

    troester Well-Known Member Staff Member

    Level: Community
  6. jbyrley

    jbyrley Member

    Level: Community
    Okay, thanks. I'll check again. In response to juuser, here is a simple example of what I am trying to do, except that instead of ".hide()" and ".show()" I want to be able to use "slide out" and "slide in".

    Code (Text):
    function choose()
    {
        var form_47 = Fabrik.getBlock('form_47');
        var elem1 = form_47.elements.get('js_test___elem1');
        var elem2 = form_47.elements.get('js_test___elem2');
        var elem3 = form_47.elements.get('js_test___elem3');
        var elem4 = form_47.elements.get('js_test___elem4');
       
        var value = elem1.get ('value');

        switch (value)
        {
            case '1':
                elem2.show();
                elem3.show();
                elem4.show();
                break;
            case '2':
                elem2.show();
                elem3.hide();
                elem4.hide();
                break;
            case '3':
                elem2.hide();
                elem3.show();
                elem4.hide();
                break;
            case '4':
                elem2.hide();
                elem3.hide();
                elem4.show();
                break;
            default:
                elem2.hide();
                elem3.hide();
                elem4.hide();
        }
    }
     
  7. juuser

    juuser Member

    Level: Community
    I'm not sure I get what you're trying to achieve. When hiding an element via element javascript, "display:none" will be added to the elements container, so the element and it's container disappears from the view.

    So when you mention "slide in" and "slide out", do you want to have e.g. some jQuery effect that the element slides to some direction and disappears / appears with it's container?
     
  8. jbyrley

    jbyrley Member

    Level: Community
    Each element in Fabrik has a number of preset javascript effects that one may select to run when certain events occur. One of those effects is called "slide out" and another is "slide in." I am trying to replicate those exact same predefined effects in the custom javascript box (or separate form_x.js file) for the reasons explained above.
     
  9. juuser

    juuser Member

    Level: Community
    Damn, totally forgot there are built in slide in and out functions as I've never used these. Slide function seems to be part of Mootools. Something like this should work:

    var slideDiv = $(document.body).getElement('div.fb_el_1_tablename___elementname');
    var myFx = new Fx.Slide(slideDiv).slideOut('vertical');

    Obviously change the div container name to yours (check that with browser inspect function to be sure).
     
    Last edited: Mar 24, 2020
  10. jbyrley

    jbyrley Member

    Level: Community
    Thanks Juuser. This is not working, and I've come to the conclusion that this is basically impossible. I will probably just keep using the Fabrik-predefined actions as God intended, however cumbersome that may become.
     
  11. juuser

    juuser Member

    Level: Community
    This sample script is working fine for me, so it must not be impossible :)

    Are you sure you got your element container name right (div.fb......) and the one taht you wish to slide, not the one where you adding the element javasript?

    And no errors on browser console?
     
  12. jbyrley

    jbyrley Member

    Level: Community
    Yes, that did work after all, thank you! I was losing hope of finding the div name but with your hint (dv.fb....) I was able to do so.

    Last question, just curious, do you know if there is a way to use this syntax to operate on an entire Fabrik group (other than just naming each element in the group individually)?

    In other words, using the pre-defined js actions, it is possible to have the action apply to an entire group, which is convenient in many cases.

    Is there something in MooTools that would allow that, for example

    "var slideGroup = $(document.body).getFieldSet('group247')";

    ?
     
  13. juuser

    juuser Member

    Level: Community
    Nice! And yes, works also for groups like:

    var slideDiv = $(document.body).getElementById('groupXX');
    var myFx = new Fx.Slide(slideDiv).slideOut('vertical');
     
    Last edited: Mar 27, 2020 at 9:02 AM
  14. jbyrley

    jbyrley Member

    Level: Community
    Yes, that worked for me! Thanks for all your help!
     

Share This Page