Injecting a custom element in HTML5 then retrieving its value using XPath comes back blank





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















I'm injecting an XML string generated from a web service, then trying to use XPath to query the attribute values using the following code.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tox-js</title>
</head>
<body>
<script>
//
// -----------------------------------------------
// tox element
class Tox extends HTMLElement
{
constructor(url)
{
super();
fetch(url)
.then((response)=>
{
console.log("status: "+response.status);
return response.text();
})
.then((text)=>
{
console.log("text: "+text);
try
{
var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);
return true;
}
catch(err)
{
console.log("err: "+err.message);
return false;
}
})
.then((ok)=>
{
if (ok)
{
try
{
var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log("//tox-js/example/@timestamp: "+txt.stringValue);
txt = xpe.evaluate("//tox-js/example/@feedback",document,null,XPathResult.STRING_TYPE,null);
console.log("//tox-js/example/@feedback: "+txt.stringValue);
}
catch(err)
{
console.log("err: "+err.message);
}
}
else
console.log("not ok");
}
);
}
}
//
// -----------------------------------------------
// register our element with the DOM
customElements.define('tox-js',Tox);
//
// -----------------------------------------------
// create an instance and add it to the body
document.body.appendChild(new Tox('http://localhost:8080/tox/example.test.formatted?in_mask=YYYYMMDD'));
// -----------------------------------------------
//
</script>
</body>
</html>


The result has the custom element injected.



<html lang="en">
<head>...</head>
<body>
<script>...</script>
<tox-js>
<example timestamp="20180103142036" feedback="ok">20190103</example>
</tox-js>
</body>
<html>


The console log confirms the return status and XML, but the result of the XPath is blank.



[Log] status: 200 (toxElement3.html, line 20)
[Log] text: <example timestamp="20190103142036" feedback="ok">20190103</example> (toxElement3.html, line 25)
[Log] //tox-js/example/@timestamp: (toxElement3.html, line 47)
[Log] //tox-js/example/@feedback: (toxElement3.html, line 49)


Where have I gone wrong? This should not be a timing issue since I'm using .then to wait for the previous step.










share|improve this question


















  • 1





    Works in Firefox version 64, not in Chrome version 71, nor Safari version 12.

    – dacracot
    Jan 4 at 1:26











  • Can confirm that in Chrome it doesn't work, but works in Firefox. Also tried to use $x(xpath) in Chrome - it doesn't see the appended node.

    – Mike Kaskun
    Jan 4 at 8:59




















1















I'm injecting an XML string generated from a web service, then trying to use XPath to query the attribute values using the following code.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tox-js</title>
</head>
<body>
<script>
//
// -----------------------------------------------
// tox element
class Tox extends HTMLElement
{
constructor(url)
{
super();
fetch(url)
.then((response)=>
{
console.log("status: "+response.status);
return response.text();
})
.then((text)=>
{
console.log("text: "+text);
try
{
var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);
return true;
}
catch(err)
{
console.log("err: "+err.message);
return false;
}
})
.then((ok)=>
{
if (ok)
{
try
{
var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log("//tox-js/example/@timestamp: "+txt.stringValue);
txt = xpe.evaluate("//tox-js/example/@feedback",document,null,XPathResult.STRING_TYPE,null);
console.log("//tox-js/example/@feedback: "+txt.stringValue);
}
catch(err)
{
console.log("err: "+err.message);
}
}
else
console.log("not ok");
}
);
}
}
//
// -----------------------------------------------
// register our element with the DOM
customElements.define('tox-js',Tox);
//
// -----------------------------------------------
// create an instance and add it to the body
document.body.appendChild(new Tox('http://localhost:8080/tox/example.test.formatted?in_mask=YYYYMMDD'));
// -----------------------------------------------
//
</script>
</body>
</html>


The result has the custom element injected.



<html lang="en">
<head>...</head>
<body>
<script>...</script>
<tox-js>
<example timestamp="20180103142036" feedback="ok">20190103</example>
</tox-js>
</body>
<html>


The console log confirms the return status and XML, but the result of the XPath is blank.



[Log] status: 200 (toxElement3.html, line 20)
[Log] text: <example timestamp="20190103142036" feedback="ok">20190103</example> (toxElement3.html, line 25)
[Log] //tox-js/example/@timestamp: (toxElement3.html, line 47)
[Log] //tox-js/example/@feedback: (toxElement3.html, line 49)


Where have I gone wrong? This should not be a timing issue since I'm using .then to wait for the previous step.










share|improve this question


















  • 1





    Works in Firefox version 64, not in Chrome version 71, nor Safari version 12.

    – dacracot
    Jan 4 at 1:26











  • Can confirm that in Chrome it doesn't work, but works in Firefox. Also tried to use $x(xpath) in Chrome - it doesn't see the appended node.

    – Mike Kaskun
    Jan 4 at 8:59
















1












1








1








I'm injecting an XML string generated from a web service, then trying to use XPath to query the attribute values using the following code.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tox-js</title>
</head>
<body>
<script>
//
// -----------------------------------------------
// tox element
class Tox extends HTMLElement
{
constructor(url)
{
super();
fetch(url)
.then((response)=>
{
console.log("status: "+response.status);
return response.text();
})
.then((text)=>
{
console.log("text: "+text);
try
{
var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);
return true;
}
catch(err)
{
console.log("err: "+err.message);
return false;
}
})
.then((ok)=>
{
if (ok)
{
try
{
var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log("//tox-js/example/@timestamp: "+txt.stringValue);
txt = xpe.evaluate("//tox-js/example/@feedback",document,null,XPathResult.STRING_TYPE,null);
console.log("//tox-js/example/@feedback: "+txt.stringValue);
}
catch(err)
{
console.log("err: "+err.message);
}
}
else
console.log("not ok");
}
);
}
}
//
// -----------------------------------------------
// register our element with the DOM
customElements.define('tox-js',Tox);
//
// -----------------------------------------------
// create an instance and add it to the body
document.body.appendChild(new Tox('http://localhost:8080/tox/example.test.formatted?in_mask=YYYYMMDD'));
// -----------------------------------------------
//
</script>
</body>
</html>


The result has the custom element injected.



<html lang="en">
<head>...</head>
<body>
<script>...</script>
<tox-js>
<example timestamp="20180103142036" feedback="ok">20190103</example>
</tox-js>
</body>
<html>


The console log confirms the return status and XML, but the result of the XPath is blank.



[Log] status: 200 (toxElement3.html, line 20)
[Log] text: <example timestamp="20190103142036" feedback="ok">20190103</example> (toxElement3.html, line 25)
[Log] //tox-js/example/@timestamp: (toxElement3.html, line 47)
[Log] //tox-js/example/@feedback: (toxElement3.html, line 49)


Where have I gone wrong? This should not be a timing issue since I'm using .then to wait for the previous step.










share|improve this question














I'm injecting an XML string generated from a web service, then trying to use XPath to query the attribute values using the following code.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tox-js</title>
</head>
<body>
<script>
//
// -----------------------------------------------
// tox element
class Tox extends HTMLElement
{
constructor(url)
{
super();
fetch(url)
.then((response)=>
{
console.log("status: "+response.status);
return response.text();
})
.then((text)=>
{
console.log("text: "+text);
try
{
var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);
return true;
}
catch(err)
{
console.log("err: "+err.message);
return false;
}
})
.then((ok)=>
{
if (ok)
{
try
{
var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log("//tox-js/example/@timestamp: "+txt.stringValue);
txt = xpe.evaluate("//tox-js/example/@feedback",document,null,XPathResult.STRING_TYPE,null);
console.log("//tox-js/example/@feedback: "+txt.stringValue);
}
catch(err)
{
console.log("err: "+err.message);
}
}
else
console.log("not ok");
}
);
}
}
//
// -----------------------------------------------
// register our element with the DOM
customElements.define('tox-js',Tox);
//
// -----------------------------------------------
// create an instance and add it to the body
document.body.appendChild(new Tox('http://localhost:8080/tox/example.test.formatted?in_mask=YYYYMMDD'));
// -----------------------------------------------
//
</script>
</body>
</html>


The result has the custom element injected.



<html lang="en">
<head>...</head>
<body>
<script>...</script>
<tox-js>
<example timestamp="20180103142036" feedback="ok">20190103</example>
</tox-js>
</body>
<html>


The console log confirms the return status and XML, but the result of the XPath is blank.



[Log] status: 200 (toxElement3.html, line 20)
[Log] text: <example timestamp="20190103142036" feedback="ok">20190103</example> (toxElement3.html, line 25)
[Log] //tox-js/example/@timestamp: (toxElement3.html, line 47)
[Log] //tox-js/example/@feedback: (toxElement3.html, line 49)


Where have I gone wrong? This should not be a timing issue since I'm using .then to wait for the previous step.







html5 xpath custom-element






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jan 3 at 22:42









dacracotdacracot

14.2k2391145




14.2k2391145








  • 1





    Works in Firefox version 64, not in Chrome version 71, nor Safari version 12.

    – dacracot
    Jan 4 at 1:26











  • Can confirm that in Chrome it doesn't work, but works in Firefox. Also tried to use $x(xpath) in Chrome - it doesn't see the appended node.

    – Mike Kaskun
    Jan 4 at 8:59
















  • 1





    Works in Firefox version 64, not in Chrome version 71, nor Safari version 12.

    – dacracot
    Jan 4 at 1:26











  • Can confirm that in Chrome it doesn't work, but works in Firefox. Also tried to use $x(xpath) in Chrome - it doesn't see the appended node.

    – Mike Kaskun
    Jan 4 at 8:59










1




1





Works in Firefox version 64, not in Chrome version 71, nor Safari version 12.

– dacracot
Jan 4 at 1:26





Works in Firefox version 64, not in Chrome version 71, nor Safari version 12.

– dacracot
Jan 4 at 1:26













Can confirm that in Chrome it doesn't work, but works in Firefox. Also tried to use $x(xpath) in Chrome - it doesn't see the appended node.

– Mike Kaskun
Jan 4 at 8:59







Can confirm that in Chrome it doesn't work, but works in Firefox. Also tried to use $x(xpath) in Chrome - it doesn't see the appended node.

– Mike Kaskun
Jan 4 at 8:59














1 Answer
1






active

oldest

votes


















2














Seems it is related to the namespaces.
The following XPath works for me:



//tox-js/*[local-name()='example']/@timestamp


Check this answer:
XPath Doesn't Work in Dynamic HTML-Document



Also you can use document.createElement() or insertAdjacentHTML() to create element from text as described here: Creating a new DOM element from an HTML string using built-in DOM methods or Prototype



In this case your XPath will work as expected.






<html lang="en">
<head></head>
<body>
<script>
window.addEventListener('load', () => {
var text = `<example timestamp="20180103142036" feedback="ok">20190103</example>`;
var el = document.getElementsByTagName('tox-js')[0];
el.insertAdjacentHTML('afterbegin', text);

var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log(`//tox-js/example/@timestamp: ${txt.stringValue}`);
});
</script>
<tox-js>
</tox-js>
</body>
<html>





P.S. I can't explain why the problem happens when using DOMParser. Maybe there are different namespaces for document and DOMParser. So if somebody has more details, feel free to extend the answer.



From the provided example...



var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);


...becomes...



this.insertAdjacentHTML('afterbegin', text);





share|improve this answer


























  • I edited in the only code change I had to do to make it work. The XPath works in without any changes.

    – dacracot
    Jan 4 at 16:25











  • Good to hear it helped. Perhaps DOMParser has different implementations across browsers.

    – Mike Kaskun
    Jan 4 at 21:47














Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030820%2finjecting-a-custom-element-in-html5-then-retrieving-its-value-using-xpath-comes%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














Seems it is related to the namespaces.
The following XPath works for me:



//tox-js/*[local-name()='example']/@timestamp


Check this answer:
XPath Doesn't Work in Dynamic HTML-Document



Also you can use document.createElement() or insertAdjacentHTML() to create element from text as described here: Creating a new DOM element from an HTML string using built-in DOM methods or Prototype



In this case your XPath will work as expected.






<html lang="en">
<head></head>
<body>
<script>
window.addEventListener('load', () => {
var text = `<example timestamp="20180103142036" feedback="ok">20190103</example>`;
var el = document.getElementsByTagName('tox-js')[0];
el.insertAdjacentHTML('afterbegin', text);

var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log(`//tox-js/example/@timestamp: ${txt.stringValue}`);
});
</script>
<tox-js>
</tox-js>
</body>
<html>





P.S. I can't explain why the problem happens when using DOMParser. Maybe there are different namespaces for document and DOMParser. So if somebody has more details, feel free to extend the answer.



From the provided example...



var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);


...becomes...



this.insertAdjacentHTML('afterbegin', text);





share|improve this answer


























  • I edited in the only code change I had to do to make it work. The XPath works in without any changes.

    – dacracot
    Jan 4 at 16:25











  • Good to hear it helped. Perhaps DOMParser has different implementations across browsers.

    – Mike Kaskun
    Jan 4 at 21:47


















2














Seems it is related to the namespaces.
The following XPath works for me:



//tox-js/*[local-name()='example']/@timestamp


Check this answer:
XPath Doesn't Work in Dynamic HTML-Document



Also you can use document.createElement() or insertAdjacentHTML() to create element from text as described here: Creating a new DOM element from an HTML string using built-in DOM methods or Prototype



In this case your XPath will work as expected.






<html lang="en">
<head></head>
<body>
<script>
window.addEventListener('load', () => {
var text = `<example timestamp="20180103142036" feedback="ok">20190103</example>`;
var el = document.getElementsByTagName('tox-js')[0];
el.insertAdjacentHTML('afterbegin', text);

var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log(`//tox-js/example/@timestamp: ${txt.stringValue}`);
});
</script>
<tox-js>
</tox-js>
</body>
<html>





P.S. I can't explain why the problem happens when using DOMParser. Maybe there are different namespaces for document and DOMParser. So if somebody has more details, feel free to extend the answer.



From the provided example...



var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);


...becomes...



this.insertAdjacentHTML('afterbegin', text);





share|improve this answer


























  • I edited in the only code change I had to do to make it work. The XPath works in without any changes.

    – dacracot
    Jan 4 at 16:25











  • Good to hear it helped. Perhaps DOMParser has different implementations across browsers.

    – Mike Kaskun
    Jan 4 at 21:47
















2












2








2







Seems it is related to the namespaces.
The following XPath works for me:



//tox-js/*[local-name()='example']/@timestamp


Check this answer:
XPath Doesn't Work in Dynamic HTML-Document



Also you can use document.createElement() or insertAdjacentHTML() to create element from text as described here: Creating a new DOM element from an HTML string using built-in DOM methods or Prototype



In this case your XPath will work as expected.






<html lang="en">
<head></head>
<body>
<script>
window.addEventListener('load', () => {
var text = `<example timestamp="20180103142036" feedback="ok">20190103</example>`;
var el = document.getElementsByTagName('tox-js')[0];
el.insertAdjacentHTML('afterbegin', text);

var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log(`//tox-js/example/@timestamp: ${txt.stringValue}`);
});
</script>
<tox-js>
</tox-js>
</body>
<html>





P.S. I can't explain why the problem happens when using DOMParser. Maybe there are different namespaces for document and DOMParser. So if somebody has more details, feel free to extend the answer.



From the provided example...



var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);


...becomes...



this.insertAdjacentHTML('afterbegin', text);





share|improve this answer















Seems it is related to the namespaces.
The following XPath works for me:



//tox-js/*[local-name()='example']/@timestamp


Check this answer:
XPath Doesn't Work in Dynamic HTML-Document



Also you can use document.createElement() or insertAdjacentHTML() to create element from text as described here: Creating a new DOM element from an HTML string using built-in DOM methods or Prototype



In this case your XPath will work as expected.






<html lang="en">
<head></head>
<body>
<script>
window.addEventListener('load', () => {
var text = `<example timestamp="20180103142036" feedback="ok">20190103</example>`;
var el = document.getElementsByTagName('tox-js')[0];
el.insertAdjacentHTML('afterbegin', text);

var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log(`//tox-js/example/@timestamp: ${txt.stringValue}`);
});
</script>
<tox-js>
</tox-js>
</body>
<html>





P.S. I can't explain why the problem happens when using DOMParser. Maybe there are different namespaces for document and DOMParser. So if somebody has more details, feel free to extend the answer.



From the provided example...



var dp = new DOMParser();
var xmlDOM = dp.parseFromString(text, "text/xml");
this.appendChild(xmlDOM.documentElement);


...becomes...



this.insertAdjacentHTML('afterbegin', text);





<html lang="en">
<head></head>
<body>
<script>
window.addEventListener('load', () => {
var text = `<example timestamp="20180103142036" feedback="ok">20190103</example>`;
var el = document.getElementsByTagName('tox-js')[0];
el.insertAdjacentHTML('afterbegin', text);

var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log(`//tox-js/example/@timestamp: ${txt.stringValue}`);
});
</script>
<tox-js>
</tox-js>
</body>
<html>





<html lang="en">
<head></head>
<body>
<script>
window.addEventListener('load', () => {
var text = `<example timestamp="20180103142036" feedback="ok">20190103</example>`;
var el = document.getElementsByTagName('tox-js')[0];
el.insertAdjacentHTML('afterbegin', text);

var xpe = new XPathEvaluator();
var txt = xpe.evaluate("//tox-js/example/@timestamp",document,null,XPathResult.STRING_TYPE,null);
console.log(`//tox-js/example/@timestamp: ${txt.stringValue}`);
});
</script>
<tox-js>
</tox-js>
</body>
<html>






share|improve this answer














share|improve this answer



share|improve this answer








edited Jan 4 at 16:23









dacracot

14.2k2391145




14.2k2391145










answered Jan 4 at 9:20









Mike KaskunMike Kaskun

8162618




8162618













  • I edited in the only code change I had to do to make it work. The XPath works in without any changes.

    – dacracot
    Jan 4 at 16:25











  • Good to hear it helped. Perhaps DOMParser has different implementations across browsers.

    – Mike Kaskun
    Jan 4 at 21:47





















  • I edited in the only code change I had to do to make it work. The XPath works in without any changes.

    – dacracot
    Jan 4 at 16:25











  • Good to hear it helped. Perhaps DOMParser has different implementations across browsers.

    – Mike Kaskun
    Jan 4 at 21:47



















I edited in the only code change I had to do to make it work. The XPath works in without any changes.

– dacracot
Jan 4 at 16:25





I edited in the only code change I had to do to make it work. The XPath works in without any changes.

– dacracot
Jan 4 at 16:25













Good to hear it helped. Perhaps DOMParser has different implementations across browsers.

– Mike Kaskun
Jan 4 at 21:47







Good to hear it helped. Perhaps DOMParser has different implementations across browsers.

– Mike Kaskun
Jan 4 at 21:47






















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030820%2finjecting-a-custom-element-in-html5-then-retrieving-its-value-using-xpath-comes%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas