• 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.

slide out event to trigger on page change

jbyrley

Member
Hi,

Apparently there isn't an option for a page change trigger in the element javascript section (at least I haven't found it yet).

So I guess I have to add code to the form_X.js file to make this happen (where "X" is the form id).

I've added this code to that file:

requirejs(['fab/fabrik'], function() {
Fabrik.addEvent('fabrik.form.page.change.end', function (form, dir) {
Fabrik.getBlock(\'form_9\').doElementFX(\'fabrik_trigger_group_group21\', \'slide out\', this)}');
});
});

Unfortunately it doesn't work to slide out group 21 as hoped.

Where am I going wrong?
 
Couple of things ...

You can only doElementFx() on things that have been added with addElementFx(), which happens automagically for stuff you've added in the element FX options.

And if it's been added, you can only apply the "same" effect type. For instance, if using a slide effect, the addElementFx has to have been added with a slide effect, as that creates the slide prototype for it.

So it should work if (say) you add an onLoad event that does a "slide in" for that group.

Or you could do the addElementFx() in your requirejs function, before adding the page change event. See the source for the syntax for addElementFx, same place you copied that doElementFX.

And get rid of the \ on the quotes.

-- hugh
 
Thanks Hugh. I got this code to work:

JavaScript:
requirejs(['fab/fabrik'], function() {               
    Fabrik.addEvent('fabrik.form.page.change.end', function (form, dir) {
        Fabrik.getBlock('form_9').addElementFX('fabrik_trigger_group_group21', 'slide out');
        Fabrik.getBlock('form_9').doElementFX('fabrik_trigger_group_group21', 'slide out', this);
   });
});



I tried to add the addElementFX event before the page change event, but I could not get it to work. So I added it inside the page change event and it works. Is there a reason why it would be better to put it before the page change event?
 
It might not hurt that much to do it that way, but really you only want to add the FX once, as it does have an overhead.

And the reason it wasn't working the way I suggested is probably that the block doesn't exist yet. The 'fab/fabrik' require runs when the main Fabrik object gets created, before any blocks get set up. So you'd need to wait for that to happen ...

JavaScript:
requirejs(['fab/fabrik'], function() {  
    Fabrik.addEvent('fabrik.form.loaded', function (form) {
        form.addElementFX('fabrik_trigger_group_group21', 'slide out');
    });            
    Fabrik.addEvent('fabrik.form.page.change.end', function (form, dir) {
        form.doElementFX('fabrik_trigger_group_group21', 'slide out', this);
   });
});

Also note that in any of these event function where 'form' is passed as an arg, you can just use that rather than an explicit Fabrik.getBlock().

-- hugh
 
Unfortunately that code is not working Is there somewhere I'm supposed to be specify the form name (form_9)? This requirejs syntax is tying my brain into knots.
 
Unfortunately that code is not working Is there somewhere I'm supposed to be specify the form name (form_9)? This requirejs syntax is tying my brain into knots.

It's not too hard. Bottom line, if you want to do anything with the Fabrik object on page load, you have to wait until it is created, eg the main fabrik.js init has run. We use requirejs (one of the standard Javascript AMD loader modules) to handle dependencies. So you just wrap any code that references Fabrik in that standard requirejs(['fab/fabrik'] ....) wrapper, so it doesn't run until that dependency is met.

Everything within that is just normal Javascript asyncronous event handling. If you want to use the form object, you need to wait until the event fires that says it's ready.

-- hugh
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top