js to make a DBjoin disabled/Readonly ...

[lcollong]

Hi,

For in invoicing system, one can choose the price list (depends on country / Currency) and build the invoice adding product from the right PL with the right prices (repeat group).
The PL is selected from a DBJoin rendered as a dropdown in the main list.
The goal is to let the user choose/change the PL as far as there are not yet repeated group records. But once it start to build his invoice adding repeated groups, he can no longer change his choice in the PL dropdown. Not allowed to mix products from different PL.

The idea is to catch the duplicate/delete group to toggle the state of the dd.
hence :

requirejs(['fab/fabrik'], function () {
    var elt = 'devis___dev_type_catalogue';
    Fabrik.addEvent('fabrik.form.group.delete.end', function(form, event, groupId, repeatCounter){
        //console.log('delete');
        if (repeatCounter == 0) {
            form.formElements.get(elt).element.disabled = false;
        }
    });
    Fabrik.addEvent('fabrik.form.group.duplicate.end', function(form, event, groupId, repeatCounter){
        //console.log('add');
        var selectCatalogue = form.formElements.get(elt);
        //console.log(selectCatalogue);
        selectCatalogue.element.disabled = true;
    });   
});

It works but I loose the value of the PL choice on submit.

1/
Sometime ago, you added a pseudo readonly method to the regular dropdown to allow such. I don't think it is available for the DBJoin one. Right ? Is there better way to achieve this ? Would it be possible to add such for the DBJoin elt ?

2/ the fabrik.form.group.duplicate.end event works well for all groups added after the first one. But when there is no record at all, the "plus sign" is on the table header and seems to be associated with another event that I need to catch in order to disable the main PL Dropdown as soon as the first group is created.

Thanks.

 

[cheesegrits]

1/

Yup, you can't set things like dropdowns, checkboxes or radios as 'disabled', as then the data doesn't get submitted with the form. That's an HTML thing, not a Fabrik thing. So yes, that's why I added the 'read-only' effect in the element JS events, which does this:

jQuery('#' + id + ' option:not(:selected)').attr('disabled', true);

... which disables individual options in the select, rather than the select itself, except for the selected one. This effectively locks the dropdown, so it can't be changed, the non-selected options show grayed out, but the selected option is not disabled, so the data still submits with the form. I think in your code it would be ...

jQuery('#' + form.formElements.get(elt).element.id + ' option:not(:selected)').attr('disabled', true);

2/

Ah, yes. The first group isn't actually being "duplicated" as such, it's just being shown. Even if you aren't displaying any repeats (of if the user removes the only repeat), there's still a repeat there, because we need it as a kind of DOM 'template' from which to clone the repeat group. Its just hidden, and iirc we remove it from the form data when submitting. So it takes a different path through duplicateGroup(), which was firing the initial fabrik.form.group.duplicate event, but not fabrik.form.group.duplicate.end.

I've added that event ...

https://github.com/Fabrik/fabrik/commit/f25789ea3f38c4d9ae90fb24962f504f1a79ab8e

I guess it's up to whoever listens to those events to figure out whether the group was actually added from scratch or not, by looking at the args. For most usage it won't matter (like yours), but some folk probably do things on that event that are assuming the DOM structure has just been created from scratch and may need some init. So a potential BC issue, but really we should have been firing that all along.

-- hugh

 

[lcollong]

You made it clear and clever !
the

":not(:selected)"

is soooo nice
Here under is the modified function for those who may be interested which does the job as I wished together with the form.js and dist/form.js improvement now firing the event on the first "add".
I've added some style to make it obvious to the user.
Many thanks!

requirejs(['fab/fabrik'], function () {
    var elt = 'devis___dev_type_catalogue';
    Fabrik.addEvent('fabrik.form.group.delete.end', function(form, event, groupId, repeatCounter){
        //console.log('delete');
        if (repeatCounter == 0) {
            jQuery('#' + form.formElements.get(elt).element.id + ' option').attr('disabled', false);
            jQuery('#' + form.formElements.get(elt).element.id + ' option').attr('style', 'color:initial;');
        }
    });
    Fabrik.addEvent('fabrik.form.group.duplicate.end', function(form, event, groupId, repeatCounter){
        //console.log('add');
        jQuery('#' + form.formElements.get(elt).element.id + ' option:not(:selected)').attr('disabled', true);
        jQuery('#' + form.formElements.get(elt).element.id + ' option:not(:selected)').attr('style', 'color:lightgray;');       
    });
});

 

[cheesegrits]

Note that you can set multiple attributes in attr(), just group them in a standard {} object. See jQuery doc:

http://api.jquery.com/attr/#setting-several-attrs

 

[lcollong]

cleaner indeed. Still learning....

requirejs(['fab/fabrik'], function () {
    var elt = 'devis___dev_type_catalogue';
    Fabrik.addEvent('fabrik.form.group.delete.end', function(form, event, groupId, repeatCounter){
        //console.log('delete');
        if (repeatCounter == 0) {
            jQuery('#' + form.formElements.get(elt).element.id + ' option').attr({
                style: "color:initial",
                disabled: false
            });
        }
    });
    Fabrik.addEvent('fabrik.form.group.duplicate.end', function(form, event, groupId, repeatCounter){
        //console.log('add');
        jQuery('#' + form.formElements.get(elt).element.id + ' option:not(:selected)').attr({
            style: "color:lightgray;",
            disabled: true
        });           
    });   
});