Development mode : TypeError: action is undefined in Firefox
Closed this issue · 18 comments
Hi Everybody,
I'm having an error in Firefox in development Mode : TypeError: action is undefined in Firefox
I use ARELIA CLI : au run --watch
The datatable doesn't show the content even if the content if coming from the server.
Can you help me please?
@jeremyvergnas this one is yours.
@jimisens Could you please share your ViewModel and View too?
@jimisens We just released a patch. Could you test it? It appears to work here.
Hi @RWOverdijk Hi @jeremyvergnas !
I was absent these days sorry.
Thank you very much for your rapid answer and the patch!
I update aurelia-datatable (npm update aurelia-datatable --save)
And in fact i doesn't have anymore the "undefined error" but another issue appears :
The "actions" column is not visible in Firefox (only in Firefox) - in chrome and Safari works well.
Do you have any idea of the cause?
Thank again and nice new Year 👍
@jimisens Could you please share with us your View and ViewModel. So we can see if it is an expect behaviour, or if we need to make the documentation more clear about some stuffs. Thanks
Hi!!!
Off course, there is the view-model : PARTNER.JS
`import {inject} from 'aurelia-framework';
import {EntityManager} from 'aurelia-orm';
import {AppGlobal} from './../../app-global';
@Inject(AppGlobal, EntityManager)
export class Partners {
criteria = null;
actions = [];
constructor(appGlobal, entityManager){
this.repo = entityManager.getRepository('search/select/partner');
this.criteria = {action: 'getall', sort: "ASC"};
this.appGlobal = appGlobal;
this.i18n = appGlobal.i18n;
this.schema_left = [
{
label: false,
key: 'id_partner',
type: 'string',
hidden: true,
attributes: {readonly: true}
},
{
label: this.i18n.tr('general.actif_inactif'),
key: 'active',
type: 'bool',
attributes: {class: 'checkbox-success'}
},
{
label: false,
key: 'company_name',
type: 'string',
attributes: {placeholder: this.i18n.tr('partners.datatable.company_name')},
id: 'company_name'
},
{
label: false,
key: 'firstname',
type: 'string',
attributes: {placeholder: this.i18n.tr('partners.datatable.firstname')},
id: 'firstname'
},
{
label: false,
key: 'lastname',
type: 'string',
attributes: {placeholder: this.i18n.tr('partners.datatable.lastname')}
},
{
label: false,
key: 'email',
type: 'string',
attributes: {placeholder: this.i18n.tr('partners.datatable.email')}
},
{
label: false,
key: 'passwd',
type: 'password',
attributes: {placeholder: this.i18n.tr('partners.datatable.new_password')}
},
{
label: false,
key: 'passwd_confirm',
type: 'password',
attributes: {placeholder: this.i18n.tr('partners.datatable.password_confirm')}
}
];
this.schema_right = [
{
label: this.i18n.tr('partners.datatable.group'),
key: 'id_partner_group',
type: 'association',
resource: 'search/select/partner_group',
attributes:{}
},
{
label: this.i18n.tr('partners.datatable.date_start'),
key: 'date_start',
type: 'datetime',
attributes: {placeholder: this.i18n.tr('general.date_format')}
},
{
label: this.i18n.tr('partners.datatable.date_end'),
key: 'date_end',
type: 'datetime',
attributes: {placeholder: this.i18n.tr('general.date_format')}
},
{
label: this.i18n.tr('partners.datatable.calendar_counter'),
key: 'calendar_counter',
type: 'number',
attributes: {placeholder: this.i18n.tr('partners.datatable.calendar_counter'), min: 0, max: 99, step: 1}
},
{
label: this.i18n.tr('partners.datatable.notification_counter'),
key: 'notification_counter',
type: 'number',
attributes: {placeholder: this.i18n.tr('partners.datatable.notification_counter'), min: 0, max: 99, step: 1}
}
];
this.actions = [
{
icon : 'xxx',
title : this.i18n.tr('general.edit'),
type : 'edit',
action: (record) => {
this.appGlobal.editListElem(record)
},
disabled: record => {
// disable button where "id" is higher than 5
/*return record.id_employee_profile == 1;*/
}
},
{
icon : 'xxx',
title : this.i18n.tr('general.remove'),
type : 'remove', // bootstrap button type
action: (record) => {
this.appGlobal.deleteListElem(record)
}/*,
disabled: record => {
return record.id_employee_profile == 1;
}*/
}
];
}
}`
and there is the view PARTNER.HTML
`
<div class="edit_layer row">
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">${appGlobal.formTitle}</h2>
</div>
</div>
<div class="col-lg-6 col-md-6 form-side fill" id="partner_schema_left">
<schema-form
schema.bind="schema_left"
model.bind="appGlobal.credentials"
></schema-form>
</div>
<div class="vertical-divider"></div>
<div class="col-lg-6 col-md-6 form-side" id="partner_schema_right">
<schema-form
schema.bind="schema_right"
model.bind="appGlobal.credentials"
></schema-form>
</div>
<div class="clear-div">
<div class="text-center">
<button class="btn btn-lg btn-primary" click.delegate="appGlobal.submitForm('partner', appGlobal.credentials)">${'general.save' & t }</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-12 table-responsive">
<datatable
view-model.ref="appGlobal.datatable"
columns="id_partner as ID,
company_name as ${'partners.datatable.company_name' & t},
firstname as ${'partners.datatable.firstname' & t},
lastname as ${'partners.datatable.lastname' & t},
email as ${'partners.datatable.email' & t},
partner_group.name as ${'partners.datatable.group' & t},
date_start as ${'partners.datatable.date_start' & t} | dateFormat:'ll / HH:mm',
date_end as ${'partners.datatable.date_end' & t} | dateFormat:'ll / HH:mm',
active as ${'partners.datatable.active' & t} | activeIcon"
repository.bind="repo"
searchable
sortable
criteria.bind="criteria"
populate="Partner"
actions.bind="actions"
></datatable>
</div>
</div>
Nice day! And thanks!
@jimisens Seems to work fine, including with Firefox. Both your View and ViewModel looks good though.
Maybe you can try to debug it by adding console.log on actions in aurelia-datatable (can be found in the folder jspm_packages of your project).
Hello
I just update the plugin to ^0.6.2 and i still having problems in Firefox.
Is anybody using Firefox here ? Because the problems seems to be serious.
The texts are not displayed, just one line seems to be processed and the "actions" are not there. Also my ValueConverter (date format) doesn't seem to work as expected, and in Chrome and Safari everything is OK. It's that strange not ?
My ViewModel and View are exactly the same than before ^.
I'm in a MAC with IOS Sierra.
In Safari and Chrome everything is OK.
I'm available to do anything, if you need help for debugging, coding, etc..
I really need a working version for production purposes soon.
Thank you (sorry for my english)
@jeremyvergnas I think it might not be the datatable at all, but ORM or API. The datatable is there, the data just isn't. Perhaps you two can have a chat on gitter to find the issue? We also want it to work on firefox so it's worth the time.
Either way, we need to look into this.
@jimisens Could you try and log the data in aurelia-datatable? https://github.com/SpoonX/aurelia-datatable/blob/master/src/datatable.js#L104 does this return data?
Ok,
I log the result from the "load function in datatable.js" and it's logged with success. So the data is there.
But, if i log the result of the displayValue function (used in view datatable.html) the ROW is "undefined" => AND ONLY IN FIREFOX.
Also, another strange behavior : if a pass the data variable from the VIEW => to the VIEW-MODEL to the displayValue function is FIRST is NULL and AFTER the data is PRESENT.
I think is a binding problem, the data it's not going to the view correctly in Firefox.
Maybe a track there ?
@jeremyvergnas if you are available for a chat is ok for me.
@jimisens Interesting. What version of firefox are you on?
Hi @RWOverdijk , Is Firefox version 50.1.0 in Mac OS Sierra
Hello!
Someone could see about ??
A track maybe or something to start working on it ?
Thanks
@jimisens I'm sorry, I forgot about this. I have it pinned now :)
Ok thank you!!
@jimisens I don't know why, but I can't reproduce it. Could you upload a repository, a small, bare-bones one that breaks so I can run it and see if I can spot the issue?
I know it's a lot of effort, but I've spent a lot of time on this so far and I really can't find the problem.
@jimisens Could you help me out by making a really small example application that breaks, so I can clone it and see if it breaks here, too? I can't reproduce it. Maybe I can, if you create a broken application? Just put it up on github? :)