• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

javascript file location

jbyrley

Member
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.
 
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!
 
If you could describe in more detail what are you trying to achieve, there's a chance you get some guidance in here.
 
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:
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();
    }
}
 
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?
 
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.
 
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:
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.
 
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?
 
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')";

?
 
Nice! And yes, works also for groups like:

var slideDiv = $(document.body).getElementById('groupXX');
var myFx = new Fx.Slide(slideDiv).slideOut('vertical');
 
Last edited:
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top