inserting mathml using XMLHttpRequest

Discussion:

(too old to reply)

Arthur Ralfs

2005-11-21 23:09:27 UTC

Hello,

I'm trying to retrieve <mrow><msup><mi>x</mi><mn>2</mn></msup></mrow>
using XMLHttpRequest and insert it into a <math> element. So far with
no success.
I can do what I want with an ordinary html table element (using firefox
1.5rc3) with the
following script:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"
[ <!ENTITY mathml "http://www.w3.org/1998/Math/MathML"> ] >

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:m="&mathml;">

<head>

<title>Request Test</title>

<script type="text/javascript" language="javascript">

var http_request = false;

function makeRequest(url) {

http_request = false;

http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}

if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.overrideMimeType("text/xml");
http_request.open('GET', url, true);
http_request.send(null);

}

function getTextVersion(XMLnode) {
var text;
var serializer = new XMLSerializer();
text = serializer.serializeToString(XMLnode);
return text;
}

function alertContents() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {

var xmldoc = http_request.responseXML;
var tablenodes = xmldoc.getElementsByTagName('table');
document.getElementById('foo').innerHTML = getTextVersion(tablenodes[0]);
}
}

}
</script>
</head>

<body>
<span style="cursor: pointer; text-decoration: underline;" onclick="makeRequest('tabletest.xml')">
Make a request
</span>

<div id="foo"></div>

</body>
</html>

which references the following file "tabletest.xml":

<?xml version="1.0" ?>
<root>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</root>

However when I try the same thing with the mathml it doesn't work. Any
suggestions would be greatly appreciated.

To be absolutely precise I include the script and xml I try with mathml,
although mostly it's the same.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"
[ <!ENTITY mathml "http://www.w3.org/1998/Math/MathML"> ] >

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:m="&mathml;">

<head>

<title>Request Test</title>

<script type="text/javascript" language="javascript">

var http_request = false;

function makeRequest(url) {

http_request = false;

http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}

if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.overrideMimeType("text/xml");
http_request.open('GET', url, true);
http_request.send(null);

}

function getTextVersion(XMLnode) {
var text;
var serializer = new XMLSerializer();
text = serializer.serializeToString(XMLnode);
return text;
}

function alertContents() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {

var xmldoc = http_request.responseXML;
var mrownodes = xmldoc.getElementsByTagName('mrow');
document.getElementById('foo').innerHTML = getTextVersion(mrownodes[0]);
}
}

}
</script>
</head>

<body>
<span style="cursor: pointer; text-decoration: underline;" onclick="makeRequest('mathtest.xml')">
Make a request
</span>

<m:math id="foo" xmlns="&mathml;" mathsize="big" display="block"></m:math>

</body>

and the xml file:

<?xml version="1.0" ?>
<root>
<mrow><msup><mi>x</mi><mn>2</mn></msup></mrow>
</root>
</html>

Thanks

Arthur Ralfs

Roger B. Sidje

2005-11-28 06:24:56 UTC

Permalink

There is no reason why it shouldn't work. It is likely that your
JavaScript'ing isn't up to scratch. You seem to be mixing things in
suspicious ways.

See bug for an example where MathML is dynamically inserted into XUL on
the fly with appendChild(). That could perhaps give you some inspiration.

https://bugzilla.mozilla.org/show_bug.cgi?id=316380

---
RBS

Post by Arthur Ralfs
Hello,
I'm trying to retrieve <mrow><msup><mi>x</mi><mn>2</mn></msup></mrow>
using XMLHttpRequest and insert it into a <math> element. So far with
no success.
I can do what I want with an ordinary html table element (using firefox
1.5rc3) with the
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"
[ <!ENTITY mathml "http://www.w3.org/1998/Math/MathML"> ] >
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:m="&mathml;">
<head>
<title>Request Test</title> <script type="text/javascript"
language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false;
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.overrideMimeType("text/xml");
http_request.open('GET', url, true);
http_request.send(null);
}
function getTextVersion(XMLnode) {
var text;
var serializer = new XMLSerializer();
text = serializer.serializeToString(XMLnode);
return text;
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmldoc = http_request.responseXML;
var tablenodes = xmldoc.getElementsByTagName('table');
document.getElementById('foo').innerHTML =
getTextVersion(tablenodes[0]);
}
}
}
</script>
</head>
<body>
<span style="cursor: pointer; text-decoration: underline;"
onclick="makeRequest('tabletest.xml')">
Make a request
</span>
<div id="foo"></div>
</body>
</html>
<?xml version="1.0" ?>
<root>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</root>
However when I try the same thing with the mathml it doesn't work. Any
suggestions would be greatly appreciated.
To be absolutely precise I include the script and xml I try with mathml,
although mostly it's the same.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"
[ <!ENTITY mathml "http://www.w3.org/1998/Math/MathML"> ] >
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:m="&mathml;">
<head>
<title>Request Test</title> <script type="text/javascript"
language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false;
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.overrideMimeType("text/xml");
http_request.open('GET', url, true);
http_request.send(null);
}
function getTextVersion(XMLnode) {
var text;
var serializer = new XMLSerializer();
text = serializer.serializeToString(XMLnode);
return text;
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmldoc = http_request.responseXML;
var mrownodes = xmldoc.getElementsByTagName('mrow');
document.getElementById('foo').innerHTML =
getTextVersion(mrownodes[0]);
}
}
}
</script>
</head>
<body>
<span style="cursor: pointer; text-decoration: underline;"
onclick="makeRequest('mathtest.xml')">
Make a request
</span>
<m:math id="foo" xmlns="&mathml;" mathsize="big"
display="block"></m:math>
</body>
<?xml version="1.0" ?>
<root>
<mrow><msup><mi>x</mi><mn>2</mn></msup></mrow>
</root>
</html>
Thanks
Arthur Ralfs
_______________________________________________
Mozilla-mathml mailing list
http://mail.mozilla.org/listinfo/mozilla-mathml

a***@gmail.com

2005-12-15 15:20:08 UTC

Permalink

See:
http://www.matheclipse.org

There is a MathML button (Firefox Browser only), which creates MathML
with AJAX

Steve Swanson

2005-12-06 18:17:44 UTC

Permalink

Arthur,
I believe your problem has nothing to do with XMLHttpRequest. I also
believe that there's an issue with innerHTML. In particular, using
innerHTML on a MathML element seems to do nothing. I can't say I
disagree with this behavior, given the name.
You can solve your problem with createContextualFragment. See the
example below and the testcases in bug 133827.

P.S. There was an issue with the attributes on your script tag. The
document below didn't work until I removed the attributes. Sorry, don't
understand that one.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
<![CDATA[
function hack0(theID) {
var n = document.getElementById(theID);
var range = document.createRange();
range.selectNodeContents(n);
var fragment = range.createContextualFragment('<mrow
xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>Y</mi><mn>2</mn></msup></mrow>');
n.appendChild(fragment);
}
function hack1(theID) {
var node = document.getElementById(theID);
node.innerHTML = "<mrow
xmlns='http://www.w3.org/1998/Math/MathML'><msup><mi>Y</mi><mn>2</mn></msup></mrow>";
}
function hack2(theID) {
var n = document.getElementById(theID);
var range = document.createRange();
range.selectNodeContents(n);
var fragment = range.createContextualFragment('<math
xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>Y</mi><mn>2</mn></msup></math>');
n.appendChild(fragment);
}
function hack3(theID) {
var n = document.getElementById(theID);
n.innerHTML = '<math
xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>Y</mi><mn>2</mn></msup></math>';
}
]]>
</script>
</head>

<body>
<span style="cursor: pointer; text-decoration: underline;"
onclick="hack0('foo')">
Append mrow in math using CreateContextualFragment
</span>

<math id="foo" xmlns="http://www.w3.org/1998/Math/MathML"
display="block"><mi>X</mi></math>

<span style="cursor: pointer; text-decoration: underline;"
onclick="hack1('bar')">
Insert mrow in math using innerHTML
</span>

<math id="bar" xmlns="http://www.w3.org/1998/Math/MathML"
display="block"><mi>X</mi></math>

<span style="cursor: pointer; text-decoration: underline;"
onclick="hack2('fue')">
Append math in div using CreateContextualFragment
</span>

<div id="fue">text</div>

<span style="cursor: pointer; text-decoration: underline;"
onclick="hack3('faux')">
Insert math in div using innerHTML
</span>

<div id="faux">text</div>
</body>
</html>

Arthur Ralfs

2005-12-10 06:03:08 UTC

Permalink

Post by Steve Swanson
Arthur,
I believe your problem has nothing to do with XMLHttpRequest. I
also believe that there's an issue with innerHTML. In particular,
using innerHTML on a MathML element seems to do nothing. I can't say
I disagree with this behavior, given the name.
You can solve your problem with createContextualFragment. See the
example below and the testcases in bug 133827.
P.S. There was an issue with the attributes on your script tag. The
document below didn't work until I removed the attributes. Sorry,
don't understand that one.

Thanks to Steve and Roger for their help. I'll have to look into XUL
now too. In case anybody else is interested
the following example works with FF 1.5.

*<?xml* version="1.0" encoding="UTF-8"*?>*
*<!DOCTYPE *html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"
*[* *<!ENTITY* mathml "http://www.w3.org/1998/Math/MathML"*>* *]* *>*

*<html* xmlns="http://www.w3.org/1999/xhtml"
xmlns:m="&mathml;"*>*

*<head>*

*<title>*Request Test*</title>*

*<script* type="text/javascript" language="javascript"*>*

function makeRequest(url) {
http_request = false;
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}

http_request.onreadystatechange = handleResponse;
http_request.open('GET', url, true);
http_request.send(null);

}

function handleResponse() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {

var mathstring = http_request.responseText;
var mathnode = document.getElementById('ans');
var range = document.createRange();
range.selectNodeContents(mathnode);
var fragment = range.createContextualFragment(mathstring);
mathnode.appendChild(fragment);

}
}

}
*</script>*
*</head>*
*<body>*
*<span* style="cursor: pointer; text-decoration: underline;" onclick="makeRequest('mathtest.html')"*>*
Make a request
*</span>*

*<m:math* id="ans" xmlns="&mathml;" mathsize="big" display="block"*></m:math>*

*</body>*
*</html>*

mathtest.html consists solely of the string

*<mrow><msup><mi>*x*</mi><mn>*2*</mn></msup></mrow>*