How to append XML node to HTML DOM in IE7 - javascript

I'm trying to append XML node to HTML DOM in IE <8 and I keep getting Object doesn't support property or method appendChild error but works fine on latest browsers. Is there another way of appending XML element in DOM?
I also tried putting <meta http-equiv="X-UA-Compatible" content="IE=8">
I want to append XML element not as string like the image below.
var jObj = { "Smart Shoes":{
"Product":"Smart Shoes",
"Price":24.99,
"Quantity":"1x "
},
"Denim Jeans":{
"Product":"Denim Jeans",
"Price":30,
"Quantity":"1x "
}
};
var xml = document.createElement("xml");
xml.setAttribute("id", "POSCMD");
xml.setAttribute("LateProcessing", "true");
var commands = document.createElement("commands");
xml.appendChild(commands);
var injFM = document.createElement("injectfieldmacro");
injFM.setAttribute("type", "field");
injFM.setAttribute("name", "FIELD_CLEAR");
commands.appendChild(injFM);
var injData;
for (var item in jObj) {
injData = document.createElement("injectdata");
injData.setAttribute("type", "literal");
injData.setAttribute("data", JSON.stringify(jObj[item].Product));
injFM = document.createElement("injectfieldmacro");
injFM.setAttribute("type", "field");
injFM.setAttribute("name", "FIELD_UPC");
commands.appendChild(injData);
commands.appendChild(injFM);
}
document.getElementsByTagName("body")[0].appendChild(xml);

Related

Problems accessing a dictionary/json in a javascript function to populate a table

Overview:
I am creating a web page using Python and generating both html as well as javascript in my code. Additionally, I am parsing through csv files and converting their table data to html. I want to be able to click on a line of text and the associated table data for that text would then be loaded into an iframe on the currently active web page. The problem I am having, is that my javascript function is not recognizing the key I send it to retrieve the corresponding table data. If I manually enter the key to return the table data, the correct data is returned - though the table doesn't load. However, if I generate the key programmatically, it returns as 'undefined' even though the strings appear to be identical.
Goal:
I need to figure out if there is something wrong with either the syntax, or the format of the key I am using to try and retrieve the table data. Secondly, I need to figure out why the table data is not being correctly loaded into my iframe.
Example:
import pandas
opening_html = """<!DOCTYPE html><h1> Test</h1><div style="float:left">"""
table_html = pandas.DataFrame({'Col_1':['this', 'is', 'a', 'test']}).to_html()
tables_dict = {'test-1 00': table_html}
java_variables = "%s" % json.dumps(tables_dict)
table_frame = """<iframe name="table_frame" style="position:fixed; top:100px; width:750; height:450"></iframe>"""
test_link_text = """ test-1<br>"""
java = """<script type='text/javascript'>
var table_filename = """ + java_variables + ";"
java += """function send_table_data(obj) {
var t = obj.text + ' 00';
alert(t)
//This line below will not work
var table_data = table_filename[t];
//But this line will return the correct value
var table_data = table_filename['test-1 00'];
alert(table_data);
//This line should load the data, but does nothing
document.getElementsByName('table_frame').src = table_data;
}
</script>"""
html_text = """<head>
<link rel="stylesheet" href="style.css">
</head>""" + test_link_text + table_frame + """<body>""" + "</div>" + java + '</body>'
with open('test_table_load.html', 'w') as w:
w.write(html_text)
EDIT: I did just figure out that for some reason there was a default space at the beginning of the var t - so using trim() seemed to fix that. Now, the only issue left is why the data doesn't load into the table.
It looks like you figured out your typo with the space that was messing with your key, so this is for your second question.
Your code
So to get your table to populate in the iframe you need to fix three things:
To edit the HTML contents of your iframe you should be setting the .srcdoc element, not .src
The document.getElementsByName() function will return an array of HTML elements so in order to get the element you want you should do one of the following:
(recommended) switch to using document.getElementById and use id='table_frame' in your iframe tags
select the first element of the array by using document.getElementsByName('table_frame')[0]
The anchor tag that you're using as the trigger for your function is redirecting you back to the original HTML page, stopping you from seeing any of the changes your javascript function is making. A simple solution to this is to switch to using a <button> element in place of <a>.
Here is what your code looks like with the fixes:
import pandas
import json
opening_html = """<!DOCTYPE html><h1>Test</h1><div style="float:left">"""
table_html = pandas.DataFrame({'Col_1':['this', 'is', 'a', 'test']}).to_html()
tables_dict = {'test-1 00': table_html}
java_variables = "%s" % json.dumps(tables_dict)
table_frame = """<iframe id="table_frame" style="position:fixed; top:100px; width:750; height:450"></iframe>"""
test_link_text = """<button href='' onclick="send_table_data(this);"> test-1</button><br>"""
java = """<script type='text/javascript'>
var table_filename = """ + java_variables + ";"
#for the button, innerText needs to be used to get the button text
java += """function send_table_data(obj) {
var t = obj.innerText + ' 00';
alert(t)
//This line below will not work
var table_data = table_filename[t];
//But this line will return the correct value
var table_data = table_filename['test-1 00'];
alert(table_data);
//This line should load the data, but does nothing
document.getElementById('table_frame').srcdoc = table_data;
}
</script>"""
html_text = """<head>
<link rel="stylesheet" href="style.css">
</head>""" + test_link_text + table_frame + """<body>""" + "</div>" + java + '</body>'
with open('test_table_load.html', 'w') as w:
w.write(html_text)
Other Recommendations
I strongly suggest looking into some python frameworks that can assist you in generating your website, either using HTML templates like Flask, or a library that can assist in generating HTML using Python. (I would recommend Dash for your current use case)

Convert subscript from OpenMath to MathML

I'm working with mathdox, to insert equations in my web page. I have implemented all the symbols and mathematical expressions that I need, to insert them as openmath and convert them in to MathML, except subscript. I know that it's suppose to work like this:
<OMOBJ xmlns='http://www.openmath.org/OpenMath' version='2.0' cdbase='http://www.openmath.org/cd'>
<OMA style='sub'>
<OMV name='x'/>
<OMI>2</OMI>
</OMA>
</OMOBJ>
should convert to
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msub>
<mi>X</mi>
<mn>2</mn>
</msub>
</math>
but I cannot find a way to implement it in javascript or find it's existing implementation in mathdox.
For me, this only works in Firefox. The main tools for the job are createElementNS and getElementsByTagNameNS. Additionally, I'm not sure where you get your openmath document, but I'm going to be retrieving it via AJAX.
So, assuming your file structure is:
/root
+-/js
| +-convert.js
|
+-/xml
| +-openmath.xml
|
+-index.html
And your files are as follows:
index.html
The only thing to note about index.html is that we set an id on the <math> element that we want to put the converted tags under. We also include the convert.js JavaScript file.
<html>
<head>
<title>Convert</title>
<script src="js/convert.js"></script>
</head>
<body>
<main>
<math xmlns="http://www.w3.org/1998/Math/MathML" id="target"></math>
</main>
</body>
</html>
openmath.xml
This file is just the XML that you posted in your question that we will be converting to the math namespace.
<OMOBJ xmlns='http://www.openmath.org/OpenMath' version='2.0' cdbase='http://www.openmath.org/cd'>
<OMA style='sub'>
<OMV name='x' />
<OMI>2</OMI>
</OMA>
</OMOBJ>
convert.js
The way that convert.js works is that it loads up the openmath document over xhr, then creates a new XML document with the document text using DOMParser() and parseFromString(). Then we feed that document to mathSubscriptConverter() which pulls all the OMA tags, gets the relevant data from them, and then converts them to msub tags. Once we have the msub tags, we add them as children under the <math> tag that exists in our index.html.
(function () {
"use strict";
var mathNS = "http://www.w3.org/1998/Math/MathML",
openMathNS = "http://www.openmath.org/OpenMath",
xhr = new XMLHttpRequest();
function mathSubscriptConverter(openmathDoc) {
var target = document.getElementById("target"),
omas = openmathDoc.getElementsByTagNameNS(openMathNS, "OMA");
// Make sure we have a math element to put this under
if (target) {
// Iterate each OMA tag
Array.prototype.forEach.call(omas, function (oma) {
var omv, omi, msub, mi, mn;
// Get the first OMV
omv = oma.getElementsByTagNameNS(openMathNS, "OMV")[0];
// Get the first OMV
omi = oma.getElementsByTagNameNS(openMathNS, "OMI")[0];
// Create a subscript tag in the math namespace
msub = document.createElementNS(mathNS, "msub");
// Create an mi tag in the math namespace
mi = document.createElementNS(mathNS, "mi");
// Create an mn tag in the math namespace
mn = document.createElementNS(mathNS, "mn");
// Set our math attributes
mi.innerHTML = omv.getAttribute("name");
mn.innerHTML = omi.innerHTML;
// Add our new elements to the target
msub.appendChild(mi);
msub.appendChild(mn);
target.appendChild(msub);
});
}
}
// Wait for document load
document.addEventListener("DOMContentLoaded", function () {
// Load our openmath document
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var parser = new DOMParser(),
mdoc = parser.parseFromString(xhr.responseText, "application/xml");
mathSubscriptConverter(mdoc);
}
};
xhr.open("GET", "xml/openmath.xml", true);
xhr.send();
});
}());

IE - JQuery appending child nodes to XML in $.each loop

I'm having a problem with IE not correctly appending or recognizing my attempts to append child nodes into a parsed XML string. Chrome and Firefox understand what I'm attempting to do. I don't know if this is a scope issue or a behavior of IE and XML.
var dataContainers = $('[data-container]');
var containerXML = $.parseXML('<inlineSubmission><userid>'+userID+'</userid><guid>'+GUID+'</guid><contentField><![CDATA[FlexXML]]></contentField><content><containers></containers></content></inlineSubmission>');
$.each(dataContainers,function (key,value) {
var containerID = $(value).attr('id'),
isVisible = $(value).is(':visible'),
xmlFragment;
xmlFragment = '<container><name>'+containerID+'</name><visible>'+isVisible+'</visible></container>';
$(containerXML).find('containers').append(xmlFragment);
});
console.log(containerXML)
Chrome and Firefox both correctly return:
<inlineSubmission><userid>55555</userid><guid>22222-222-2-22-222</guid><contentField><![CDATA[FlexXML]]></contentField><content><containers><container><name>heroContainer</name><visible>true</visible><bgcolor>undefined</bgcolor><textcolor>undefined</textcolor><subitem><name>contactInfo</name><visible>none</visible><location>undefined</location></subitem></container><container><name>contentContainer</name><visible>true</visible></container><container><name>cnmContainer</name><visible>true</visible></container><container><name>accountAccessContainer</name><visible>true</visible></container><container><name>promoContainer</name><visible>true</visible></container><container><name>contactContainer</name><visible>true</visible></container></containers></content></inlineSubmission>
While IE is returning the original variable value:
<inlineSubmission><userid>55555</userid><guid>22222-222-2-22-222</guid><contentField><![CDATA[FlexXML]]></contentField><content><containers /></content></inlineSubmission>
Any help would be appreciated!
Try substituting $(containerXML.documentElement) for $(containerXML) .
$(containerXML) returns #document , having context of document , e.g.;
$(document).append("<p>abc</p>")
would not append <p>abc</p> to <html> or <body> elements , and may return error:
TypeError: Cannot read property 'createDocumentFragment' of null .
$(containerXML.documentElement) returns <inlinesubmission> element , having context of inlinesubmission
var userID = "abc", GUID = 123, containerID = 456, isVisible = true;
var xmlFragment = '<container><name>'
+containerID+'</name><visible>'
+isVisible+'</visible></container>';
var containerXML = $.parseXML('<inlineSubmission><userid>'
+userID+'</userid><guid>'
+GUID+'</guid><contentField><![CDATA[FlexXML]]>'
+'</contentField><content><containers></containers>'
+'</content></inlineSubmission>');
console.log($(containerXML)
, $(containerXML.documentElement).find("containers"));
$(containerXML.documentElement).find("containers").append(xmlFragment);
$("body").append($(containerXML.documentElement));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Finally got it working. Thanks for the answers! They gave me the right direction to move in:
var containerXML = $('<inlineSubmission><userid>'+userID+'</userid><guid>'+GUID+'</guid><contentField>FlexXML</contentField><content><containers></containers></content></inlineSubmission>');
$.each(dataContainers,function (key,value) {
var containerID = $(value).attr('id'),
isVisible = $(value).is(':visible'),
xmlFragment;
xmlFragment = $('<container><name>'+containerID+'</name><visible>'+isVisible+'</visible></container>')
$(containerXML).find('containers').append(xmlFragment);
});
var parsedXML = $.parseXML(containerXML[0].outerHTML);
console.log(parsedXML)

Html Agility Pack messing with my javascript

I'm using the Html Agility Pack to output some javascript in the head of my document. But after saving the document to the file system I recognized that the javascript source has been modified. I guess this happens because HAP is trying to validate my script. Is it possible to prevent this? As you can see below I already tried setting different options.
My code using HAP:
var htmlDoc = new HtmlDocument();
htmlDoc.OptionCheckSyntax = false;
htmlDoc.OptionAutoCloseOnEnd = false;
htmlDoc.OptionFixNestedTags = false;
htmlDoc.LoadHtml(htmlContent);
HtmlNode headNode = htmlDoc.DocumentNode.SelectSingleNode("//head");
headNode.AddScriptNode(htmlDoc, "../../Scripts/jquery-1.7.1.min.js");
Extension Method for adding the script tag
public static void AddScriptNode(this HtmlNode headNode, HtmlDocument htmlDoc, string filePath)
{
string content = "";
using (StreamReader rdr = File.OpenText(filePath))
{
content = rdr.ReadToEnd();
}
if(headNode != null)
{
HtmlNode scripts = htmlDoc.CreateElement("script");
scripts.Attributes.Add("type", "text/javascript");
scripts.InnerHtml = "\n" + content + "\n";
headNode.AppendChild(scripts);
}
}
My assumption: when using scripts.InnerHtml AgilityPack tries to parse the content as HTML. So if there are tags there they will be converted to HTML nodes.
To avoid this you should set the content of the <script> as text. Unfortunately, HtmlNode.InnerText property is a read-only but there is a workaround for this. You could just add a text(a comment node will be preferrable) node to your <script> node:
if(headNode != null)
{
HtmlNode scripts = htmlDoc.CreateElement("script");
scripts.Attributes.Add("type", "text/javascript");
scripts.AppendChild(htmlDoc.CreateComment("\n" + content + "\n"));
headNode.AppendChild(scripts);
}
Here the body of your script will be added as a comment node (<!-- and --> will be added).

MSIE: Append XML Element to HTML Element

I'm using an XMLHttpRequest to retrieve XML from the server, and I'd like to append it to an existing HTML node on the page. It's well formed HTML and I've added xmlns='http://www.w3.org/1999/xhtml' to the XML root element in the response: works fine for Firefox, but IE bombs with "No such interface supported", I guess because it's got the node I'm trying to append typed as "IXMLDOMElement".
Here's the XML response:
<qstat xmlns='http://www.w3.org/1999/xhtml'>
<ul>
<li><b>Cycle number:</b> 6</li>
<li><b>Error:</b> none</li>
</ul>
</qstat>
And here's the Javascript:
var req = new XMLHttpRequest()
req.onreadystatechange = function() {
if(req.readyState == 4)
{
dom = req.responseXML;
var nodes = dom.firstChild.childNodes; //Everything under the root node.
var ele = document.getElementById("qstat");
for(var i=0; i<nodes.length; i++)
{
ele.appendChild(nodes[i]); // BOMBS HERE.
}
}
};
The MSIE Debugger (MSIE 8) correctly identifies nodes[0] as having tagName=ul and even has namespaceURI="http://www.w3.org/1999/xhtml", but I guess because it's type is IXMLDOMElement, the call doesn't work.
So is there any way to convert the objects in nodes to corresponding HTML node objects that I can append to the element?
Try following:
1) create an HTML element
var factory = document.createElement("div");
2) serialize the fetch XML element
var xml = nodes[i].xml || new XMLSerializer().serializeToString(nodes[i]);
3) render xml through innerHTML
factory.innerHTML = xml;
4) get firstChild from factory element which is now HTML element
var eleHTML = factory.firstChild;
5) append eleHTML to where you need it:
ele.appendChild(eleHTML);
Hint: you can reuse once created factory DOMHTML element

Categories