Uncaught TypeError: Cannot read property 'lastChild' of null

1

I keep getting this error when trying to destroy a record. I was hoping someone could point me in the right direction?

ember.js:44926 clear
ember.js:44868 Morph.replace
ember.js:44726 Morph.removeMorph
ember.js:44716 Morph.destroy
ember.js:10232 Renderer_remove
ember.js:41491 EmberObject.extend.destroy
ember.js:19661 applyember.js:19235 superWrapper
ember.js:19661 applyember.js:15652 superFunction
ember.js:43646 CoreView.extend.destroy
ember.js:19661 apply
ember.js:19235 superWrapper
ember.js:40514 ContainerView.extend.arrayWillChange
ember.js:19679 applyStrember.js:14115 sendEvent
ember.js:30443 __exports__.default.Mixin.create.arrayContentWillChange
ember-data.js:4972 Ember.Object.extend.internalReplace
ember-data.js:4988 Ember.Object.extend.internalRemoveRecords
ember-data.js:6708 ember$data$lib$system$relationships$state$has_many$$ManyRelationship.removeRecordFromOwn
ember-data.js:6543 ember$data$lib$system$relationships$state$relationship$$Relationship.removeRecordFromInverse
ember-data.js:6428 (anonymous function)
ember.js:15252 OrderedSet.forEach
ember-data.js:6427 ember$data$lib$system$relationships$state$relationship$$Relationship.disconnect
ember-data.js:8046 (anonymous function)ember-data.js:12671 (anonymous function)
ember.js:15463 Map.forEach.cb
ember.js:15256 OrderedSet.forEach
ember.js:15467 Map.forEach
ember-data.js:12670 ember$data$lib$system$model$model$$default.reopenClass.eachRelationship
ember-data.js:12766 ember$data$lib$system$model$model$$default.reopen.eachRelationship
ember-data.js:8045 Ember.Object.extend.disconnectRelationships
ember-data.js:5955 ember$data$lib$system$model$states$$RootState.loaded.saved.deleteRecord
ember-data.js:7866 Ember.Object.extend.send
ember-data.js:7989 Ember.Object.extend.deleteRecord
ember-data.js:8015 Ember.Object.extend.destroyRecordcontrol-module-table-index-controller.js
2

Since it has to do with a ‘Morph’ I tried clearing out all the html right before I destroyRecord and it still manages to get that error. Does it possibly have to do with a relationship and not the HTML?

3

Also to give a better idea of what I am up to, Im trying to hook up jquery datatTable to ember using a component.

App.ResponsiveTableComponent = Ember.Component.extend({
    classNames: ['table-component'],
    rows: null,
    columns: null,

    willDestroyElement: function() {
        this.get('table').destroy();
    },

    didInsertElement: function() {
        Ember.run.scheduleOnce('afterRender', this, this.initTable);
    },

    refreshTable: function() {
        this.rerender();
    },

    initTable: function() {
        var table = this.$(this.get('element')).find('table').DataTable({});
        this.set('table', table);
    },
    actions: {
        removeColumn: function(model) {
            this.get('table').destroy();
            model.destroyRecord().then(function() {
                this.get('rows').reload().then(function() {
                      this.refreshTable();
                }.bind(this));
            }.bind(this));

        }
    }
});

This is the component handlebars

<table class="display table nowrap table-striped table-bordered" cellspacing="0" width="100%">
    <thead class="my-thead">
        <tr>
            <th>Location</th>
            {{#each column in columns}}
                <th>
                    {{#if column.groupName}}
                        <div class="group-name">{{column.groupName}}</div>
                    {{/if}}
                    <div class="column-name">{{column.name}}</div>
                    <div class="actions">
                        {{#link-to 'cmTable.editColumn' column class="edit"}}<span class="glyphicon glyphicon-pencil"></span>{{/link-to}}
                        {{delete-button model=column action="removeColumn" class="remove" placement="bottom"}}
                    </div>
                </th>
            {{/each}}
            <th>Delete</th>
        </tr>
    </thead>
    {{yield}}
</table>

and the handlebars index file for the page

{{#responsive-table columns=columns rows=rows reorder="reorder"}}
    <tbody>
        {{#each row in rows}}
            <tr>
                <td>{{row.locationName}}</td>
                {{#each cell in row.cmValues}}
                    {{#link-to 'cmTable.editValue' cell tagName="td"}}{{cell.summary}}{{/link-to}}
                {{/each}}
                <td>{{delete-button model=row action="removeRow" class="remove" placement="top"}}</td>
            </tr>
        {{/each}}
    </tbody>
{{/responsive-table}}

It displays the table correctly, and then inits dataTable. That works well. But then I try to delete a column (destroy table then destroyRecord then refresh rows and re-render table) and it gives me the error in my first post.

*** I was able to get around this by putting the delete in the edit page and making it a page transition so the HTML was no longer displayed. Then when you delete the column your taken back to the table…not ideal but it at least works.