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

How to : Javascript to set/unset checkboxes

Status
Not open for further replies.

lcollong

FabriKant d'applications web
Hi,

I have searched the forum and the wiki but can't get this feature working.

I have a checkbox element with 6 different values. I have also another radiobutton element from which I'd like trigger a JS function that could check or uncheck all the checkbox values based on the value of the radio button element.

This is my last among a lot attempt (simplified version) to check one of the checkbox :

var choice = this.getValue();
if (choice == 'O') {
form_14.formElements.get('tst_basulm___type2').subElements[1].update(true);
}
 
Finally, I have found it :

var choice = this.getValue();
if (choice == 'O') {
form_14.formElements.get('tst_basulm___type2').subElements[1].checked=true;
}
 
the checkbox class update() method works on values so say you have a checkbox suboptions with a values of '4' and '5' then to update the checkboxes to make them all checked you would do:

JavaScript:
var choice = this.getValue();
if (choice == 'O') {
  form_14.formElements.get('tst_basulm___type2').update(['4', '5']);
}
 
nice wiki indeed. It will help. Does it mean the way I did it ("checked method") is "surprisingly working" ? ;-) Anyway, I'll check the official method you've explained and see how it works. Thanks.
 
not surprising, no, but I think its good to have a set of methods that can be applied to all elements regardless of the plugin type they are using. That way the code is less brittle and has fewer risks of breaking.
 
Indeed. Fabrik will go in the direction of an even more professional app ! To close this thread here is the working solution in my case. For one user choice ('O') it will check all the boxes and for another one ('X') it will clear them all. Looks nice.
Code:
var choice = this.getValue();
if (choice == 'O') {
form_16.formElements.get('BASULM_terrains___classes').update(['1','2','3','4','5','6']);
}
if (choice == 'X') {
form_16.formElements.get('BASULM_terrains___classes').update([]);
}
 
Hi,

I re-open this one as I have the same thing to do on a DBjoin rendered as checkbox element. Is this doable ? Should I iterate through all the values loaded by the join ?
 
nope :-( I tried several ways but I miss some thing. I get either JS error (undefined something), either null result....
 
I've finally managed to make it working... not sure this the best way to do it and Rob will probably rewrite this function a more JS guru way ! :)

Code:
requirejs(['fab/fabrik'], function () {
/* check all "dbjoin render as checkbox" boxes  (not for regular checkbox element) */
window.CheckAllRegions = function() {
    var regions = Fabrik.getBlock('form_8').formElements.get('ens_t_formations___form_lieu_reg'); // get parent object
    var all_regions = regions._getSubElements().get('value'); // get all sub_elements -> array
    for (i=0; i < all_regions.length; i++) {
        regions.update(all_regions[i]); // check all the boxes
    } 
}
});

this way, I can have a checkall button whatever the number of regions is currently displayed (screenshot).

However I'd like a toggle function (check-all/uncheck-all) but I'm wondering how to achieve it. The check part is easy : "what ever is checked : check'em all !" but on which criteria should I do the reverse ? count the number checked and if it's equal the whole numbers, uncheck everything ? Store in a global variable the previous state (button action) ? kind of reverse action button ? have to button on the same place and hide/show each of them depend on the previous action ? Any hint welcome !
 

Attachments

  • Capture.JPG
    Capture.JPG
    56.8 KB · Views: 506
well... got it !

I add a checkbox used to set / unset all the other ones according of its own status (see screenshot). Works well !...

Here are the func :
Code:
requirejs(['fab/fabrik'], function () {
 
/* check all dbjoin render as checkbox  (not for regular checkbox element) */
window.CheckAllRegions = function() {
    var regions = Fabrik.getBlock('form_8').formElements.get('ens_t_formations___form_lieu_reg'); // get parent object
    var all_regions = regions._getSubElements().get('value'); // get all sub_elements -> array
    for (i=0; i < all_regions.length; i++) {
        regions.update(all_regions[i]); // check all the boxes
    } 
}
window.UnCheckAllRegions = function() {
    var regions = Fabrik.getBlock('form_8').formElements.get('ens_t_formations___form_lieu_reg'); // get parent object
    var all_regions = regions._getSubElements().get('value'); // get all sub_elements -> array
    for (i=0; i < all_regions.length; i++) {
        regions.subElements[i].checked=false; // check all the boxes
    } 
}
});

and finally the javascript in the "toutes" checkbox element :
Code:
if (this.get('value') != '1') {
  UnCheckAllRegions();
} else {
  CheckAllRegions();
}

Thanks to firebug and a lot of post/answers on this forum (Rob, Hugh, Sophist...)

closed !
 

Attachments

  • Capture.JPG
    Capture.JPG
    66.7 KB · Views: 504
Status
Not open for further replies.
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top