I am receiving node element cannot be found after table was refreshed with new data with ajax. For an example classname of table is crosstab-table-container

funny thing is i am able to select element on my chrome dev mode > element . When i tried to select element on console.log($('.crosstab-table-container td'));

n.fn.init [div.crosstab-table-container, prevObject: n.fn.init(1), context: document, selector: ".crosstab-table-container"]
0: div.crosstab-table-container
length: 1
prevObject: n.fn.init [document, context: document]
context: document
selector: ".crosstab-table-container"
__proto__: Object(0)

This is what it printed , as soon i tried to click on div.crosstab-table-container, i am receiving warning on Node cannot be found in the current page.

I am receiving node element cannot be found after table was refreshed with new data with ajax. For an example classname of table is crosstab-table-container

funny thing is i am able to select element on my chrome dev mode > element . When i tried to select element on console.log($('.crosstab-table-container td'));

n.fn.init [div.crosstab-table-container, prevObject: n.fn.init(1), context: document, selector: ".crosstab-table-container"]
0: div.crosstab-table-container
length: 1
prevObject: n.fn.init [document, context: document]
context: document
selector: ".crosstab-table-container"
__proto__: Object(0)

This is what it printed , as soon i tried to click on div.crosstab-table-container, i am receiving warning on Node cannot be found in the current page.

• javascript
• jquery
• ajax
• d3.js

• 5 10 against 1 that you did not take into account the asynchronous management – Mister Jojo Commented Feb 14, 2020 at 2:27

1 Answer 1

In my case 'Node cannot be found in the current page.' means that I make a mistake with order in function execution.

Here my Vue 3 example, it might be useful. The problem appears when I make steps in the following order.

First of all, one ponent receives an event, emitted by another ponent:

reload_templates(){
  emitter.on('reload-templates', () => {
    //async  function for new data 
    this.get_editable_templates_list();
    //async side effect function
    this.open_first_category();
  })
}

Despite of the fact, that my side effect function is async, it uses nextTick() and will be executed before the HTTP request is done.

async open_first_category(){
  await this.$nextTick(() => {
    const els = document.querySelectorAll('.settings-templates__details');
    [...els][0].setAttribute('open', true);
  })
}

That is why I have an access to node list, however this node list will be replaced, as HTTP request is done. When I try to log it and then open in elements panel, I have a warning:

So, the right way is to add async side effect function inside HTTP request function and call it after the request is done.

 async get_editable_templates_list(){
  const res = await template_list_editable();
  if(res === undefined) return;
  if(res.error === undefined){
    this.editable_list = res;
    // async side effect function
    this.open_first_category();
  } else {...}
},