"dependent" with an Editor containing field type "datatable" not working
"dependent" with an Editor containing field type "datatable" not working
This could be similar to this post: https://datatables.net/forums/discussion/comment/207580
I have quite a few Editor field dependencies in an Editor instance that contains a field of type "datatable". The "datatable" field is "vat_qa[].id" by the way but I think that is not important.
I had most of these dependencies coded using Editor "dependent". Unlike "dependent"s usual behavior it didn't trigger on Editor form open. It only got triggered with later changes. It didn't help to trigger the change manually like this:
$( self.field('ctr.VAT_decision').node() ).change();
Hence I changed my approach and got rid of all "dependent"s as shown below.
I have very similar dependencies in a different Editor that doesn't contain field type "datatable". There I have absolutely no problems with "dependent".
I think this is a bug.
ctrPSCEditor
.on('open', function ( e, mode, action ) {
tooltipsPopups(this);
$('.modal-dialog').addClass("modal-xl-static");
this.field('vat_qa[].id').dt().ajax.reload();
var self = this;
//it is not possible to attach an event handler to a quill field
//beause it is so deeply embedded in those divs ...
$( self.field('vat_qa[].id').node() ).change( function() {
if ( $( self.val('vat_result.vat_result') ).text() <= " " &&
$( self.val('vat_result.vat_hint') ).text() <= " " ) {
self.set( { 'ctr.VAT_decision': 0, 'ctr.VAT_charged': 0,
'ctr.VAT_start_date': '', 'ctr.VAT_rate': 0,
'ctr.VAT_mixed_rate': '', 'ctr.VAT_comment': '' } )
.hide(['vat_result.vat_result', 'vat_result.vat_hint',
'ctr.VAT_decision', 'ctr.VAT_charged',
'ctr.VAT_start_date', 'ctr.VAT_rate',
'ctr.VAT_mixed_rate', 'ctr.VAT_comment' ]);
} else {
self.show(['vat_result.vat_result', 'vat_result.vat_hint',
'ctr.VAT_decision', 'ctr.VAT_charged',
'ctr.VAT_start_date', 'ctr.VAT_rate',
'ctr.VAT_mixed_rate', 'ctr.VAT_comment' ]);
}
});
$( self.field('vat_qa[].id').node() ).change();
})
.on('opened', function ( e, mode, action ) { //event handler is somewhat slower
var self = this;
$( [ self.field('vat_result.vat_subcategory_id').node(),
self.field('vat_qa[].id').node() ] ).change( function() {
if ( self.field("vat_qa[].id").dt().rows().count() > 0 ) {
self.field("vat_result.vat_subcategory_id").disable();
} else {
self.field("vat_result.vat_subcategory_id").enable();
}
});
$( self.field('vat_result.vat_subcategory_id').node() ).change();
$( self.field('ctr.VAT_decision').node() ).change( function() {
if (self.val('ctr.VAT_decision') == '1') {
self.show( ['ctr.VAT_charged', 'ctr.VAT_comment'] );
} else {
self.set( { 'ctr.VAT_charged': 0, 'ctr.VAT_start_date': '',
'ctr.VAT_rate': 0, 'ctr.VAT_mixed_rate': '',
'ctr.VAT_comment': '' } )
.hide( ['ctr.VAT_charged', 'ctr.VAT_start_date',
'ctr.VAT_rate', 'ctr.VAT_mixed_rate',
'ctr.VAT_comment'] );
}
});
$( self.field('ctr.VAT_decision').node() ).change();
$( self.field('ctr.VAT_charged').node() ).change( function() {
if (self.val('ctr.VAT_charged') == '1') {
self.show( ['ctr.VAT_start_date', 'ctr.VAT_rate'] );
} else {
self.set( { 'ctr.VAT_start_date': '', 'ctr.VAT_rate': 0 } )
.hide( ['ctr.VAT_start_date', 'ctr.VAT_rate'] );
}
});
$( self.field('ctr.VAT_charged').node() ).change();
$( self.field('ctr.VAT_rate').node() ).change( function() {
if (self.val('ctr.VAT_rate') == '3') {
self.show( ['ctr.VAT_mixed_rate'] );
} else {
self.set( { 'ctr.VAT_mixed_rate': '' } )
.hide( ['ctr.VAT_mixed_rate'] );
}
})
$( self.field('ctr.VAT_rate').node() ).change();
})
.on('close', function() {
$('.modal-dialog').removeClass("modal-xl-static");
$( [ this.field('vat_result.vat_subcategory_id').node(),
this.field('vat_qa[].id').node() ] ).off( 'change' );
$( this.field('vat_qa[].id').node() ).off( 'change' );
$( this.field('ctr.VAT_decision').node() ).off( 'change' );
$( this.field('ctr.VAT_charged').node() ).off( 'change' );
$( this.field('ctr.VAT_rate').node() ).off( 'change' );
})
Answers
Hi Roland,
To confirm my understanding - the bug is that the
dependent()callback isn't happening when the form is displayed?I'm not actually seeing that issue in this example. If you:
1) Load the example page
2) Pop open the console and enter:
3) Select a row and click edit
4) The console statement will be shown.
This also works on the mjoin example, which is a little more like your own.
Could you link me to a page showing the issue please?
Thanks,
Allan
Yes, that is the issue.
I see your example working (in my discarded text I forgot to hit "enter" after copying your code into the console. That's why it didn't work...)
Unfortunately I can't give you a link to the page showing the isse because I haven't got one: I discarded everything and replaced it with my work around which is ok for me.
Another question in the same context: How do you use "dependent" or "node().change()" with a quill field? I couldn't get it working. So many nested divs in an Editor quill field...