Develop Reference

Inserting element inside an XML document using Javascript

Have a XML string like below:
<stages>
<params/>
<test description=""/>
</stages>
I want to add the following XML string after <test desc.../> tag OR before the end of stages i.e. </stages>
<stage id="myId" level="1">
and all subsequent stages.
Post-addition it should like
<stages>
<params/>
<test description=""/>
<stage id="myId" level="1"/>
<stage id=.../>
...
</stages>
I am trying to do something like this:
var stageNode = document.createTextNode(
"<stage id=\"myId\" level=\"1\">")
);
var root = document.getElementsByTagName("test").parentNode;
console.log(document.getElementsByTagName("test")); //<-- giving [] in console log and root is undefined; though the element is there
var stages = root.getElementsByTagName("stage");
root.insertBefore(stageNode,stages.nextSibling);
How can I do this in JavaScript or JQuery?
Using DocumentBuilder or DocumentBuilderFactory is giving me "Unexpected identifier" error. Is there an easier way to do the above using document builder in Javascript (as in Java)?

With jQuery it might look like so:
function addStage(xmlDocument, stageElement){
var parent = $(xmlDocument).find("test").parent(); //picks <test>'s parent
parent.append(stageElement); //appends stageElement to parent
}
var xmlString = '<stages><params/><test description=""/></stages>'; //your XML string
var xmlDocument = $.parseXML(xmlString); //parses your XML string and returns XML document
$("#addStage").click(function(){
var id = $("#stageId").val();
var stageElement = $("<stage id=\"" + id + "\"></stage>"); //creates new element
addStage(xmlDocument, stageElement);
console.log(xmlDocument);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Stage ID: <input type="text" id="stageId" /> <input type="button" id="addStage" value="Add stage" />
Open browser's console to see the results.

Using Plain Old JavaScript:
var text = "<stages><params/><test description=\"\"/></stages>";
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text,"text/xml");
var newNode = xmlDoc.createElement("stage");
newNode.setAttribute("id", "myId");
newNode.setAttribute("level", "1");
xmlDoc.documentElement.appendChild(newNode);
newNode = xmlDoc.createElement("stage");
newNode.setAttribute("id", "myId2");
newNode.setAttribute("level", "2");
xmlDoc.documentElement.appendChild(newNode);
console.log(new XMLSerializer().serializeToString(xmlDoc.documentElement));
For reference on adding node at a particular position, refer XML DOM Add Nodes

Displaying remote images in a firefox add-on panel

I'm trying to display remote images in a FireFox add-on panel, but the src attributes are being converted from something like this:
http://example.com/image.jpg
to something like this:
resource://addon_name/data/%22http://example.com/image.jpg%22
I can't figure out if I'm breaking a security policy or not.
In my add-on script (index.js) I'm retrieving image URLs using the sdk/request API and passing them to my content script (data/my-panel.js). My data/my-panel.js file is creating DOM elements in my panel file (data/popup.html) – including images – using the URLs passed from index.js. Here are the relevant bits of code:
index.js
var Request = require("sdk/request").Request;
var panel = require("sdk/panel").Panel({
width: 500,
height: 500,
contentURL: "./popup.html",
contentScriptFile: "./my-panel.js"
});
Request({
url: url,
onComplete: function(response) {
// Get the JSON data.
json = response.json;
// Launch the popup/panel.
panel.show();
panel.port.emit("sendJSON", json);
}
}).get();
data/my-panel.js
var title;
var desc;
var list;
var titleTextNode;
var descTextNode;
self.port.on("sendJSON", function(json) {
json.docs.forEach(function(items) {
title = JSON.stringify(items.sourceResource.title);
desc = JSON.stringify(items.sourceResource.description);
img = JSON.stringify(items.object);
console.log(img);
var node = document.createElement("li"); // Create a <li> node
var imgTag = document.createElement("img"); // Create a <img> node
imgTag.setAttribute('src', img);
imgTag.setAttribute('alt', desc);
imgTag.style.width= '25px';
titleTextNode = document.createTextNode(title);
descTextNode = document.createTextNode(desc);
node.appendChild(titleTextNode); // Append the text to <li>
node.appendChild(descTextNode); // Append the text to <li>
document.getElementById("myList").appendChild(node); // Append <li> to <ul> with id="myList"
document.getElementById("myImgs").appendChild(imgTag);
});
});
The console.log(img) line is displaying the URLs correctly, but not in popup.html...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="myList"></ul>
<p id="myImgs"></p>
</body>
</html>
How can I make the images' src attributes point directly to the remote URLs?
Thanks!

I figured out what I was doing wrong. Using JSON.stringify() on the img URL was adding double quotes around it. Removing it fixed the images:
img = items.object;

I'm not so sure about SDK permissions, but as a last resort you can turn the remote url into a resource URI like this -
var res = Services.io.getProtocolHandler("resource").QueryInterface(Ci.nsIResProtocolHandler);
res.setSubstitution("rawr", Services.io.newURI('http://www.bing.com/',null,null));
// now try navigating to resource://rawr it will load bing
Then you can load resource://rawr and it should work.

Creating xml Document In javascript shows error

I am trying to create a xml document in Javascript. but it will not give required output
Here is my code
if(status==0)
{
var objXML = new ActiveXObject("Microsoft.XmlDOM")
objXML.async = false
var objXMLRoot=objXML.createElement("root")
objXML.documentElement=objXMLRoot
objXMLRoot.appendChild(objXML.createElement("parentname"))
objXMLRoot.appendChild(0).text=listid
objXMLRoot.appendChild(objXML.createElement("childname"))
objXMLRoot.appendChild(1).text=document.getElementById("childId").value;
objXMLRoot.appendChild(objXML.createElement("childstatus"))
objXMLRoot.appendChild(2).text=ichildid;
AjaxSend(objXMLRoot,'100','1');
}
My problem : i did't get any data in my xml document . i want to get listid,childid values in my xml document
any help will be appriciated

Their is some syntax error in your code
try something like below
if(status==0)
{
var objXML = new ActiveXObject("Microsoft.XmlDOM")
objXML.async = false
var objXMLRoot=objXML.createElement("root")
objXML.documentElement=objXMLRoot
objXMLRoot.appendChild(objXML.createElement("parentname"))
objXMLRoot.childNodes(0).text=listid
objXMLRoot.appendChild(objXML.createElement("childname"))
objXMLRoot.childNodes(1).text=document.getElementById("childId").value;
objXMLRoot.appendChild(objXML.createElement("childstatus"))
objXMLRoot.childNodes(2).text=ichildid;
AjaxSend(objXMLRoot,'100','1');
}

Why is HTML elements is displayed as text?

I'm working on a form builder website. After a form is built it must be saved in database. When the user clicks on a form name from the list of saved forms the form information is restored from database. One of the variables I will restore is the structure of the form. In javascript I wrote these lines of code:
var prefix_content='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title> </title>\n </head>\n<body>\n ';
var sufex_content=' \n</body></html>';
var dynamic_content=String(text_content);
document.write(prefix_content + dynamic_content + sufex_content );
The variable dynamic_content contains the dynamic structure.
The problem is that prefix_content and sufex_content is displayed as html but dynamic_content is written in the page as text. Any one knows why is that or knows how to solve this problem.
Note: when I write the text in dynamic content statically between single quotes it is displayed as html not text.

If you're seeing the content retrieved from your database as plaintext, instead of HTML, its HTML entities are probably getting escaped somewhere along the way. Check the contents of your text_content variable (e.g. use console.log(text_content) and if you're seeing stuff like <div> instead of <div>, go on and find out where your escaping happens and either remove it or manually unescape.

TRY THIS:
var prefix_content='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title> </title>\n </head>\n<body>\n ';
var sufex_content=' \n</body></html>';
var dynamic_content=String(text_content);
var parser = new DOMParser();
var el = parser.parseFromString(dynamic_content, "text/html");
document.write(prefix_content + el + sufex_content );
Or you can try this too: Using jQuery
var dynamic_content=String(text_content);
var el = $.parseHTML( dynamic_content );
document.write(prefix_content + el + sufex_content );

var content = "<div style='color:red;'>TEST</div>";
var prefix ='<!DOCTYPE HTML>\n<html lang="en-US">\n<head>\n<meta charset="UTF-8">\n<title>TEST</title>\n</head>\n<body>\n';
var suffix ='\n</body></html>';
var all = prefix + content + suffix;
var parser = new DOMParser();
var doc = parser.parseFromString(all, "text/html");
console.log(doc.children[0].outerHTML);
Instead of children[0] you can also go for:
doc.documentElement.outerHTML
Results in:
<html lang="en-US"><head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div style="color:red;">TEST</div>
</body></html>

Dynamically change text based on URL input

I am using the following code to dynamically change the text on my clients website (www.mydomain.com.au):
<script type="text/javascript">// <![CDATA[
var url = window.location.toString();
var query_string = url.split("?");
if (query_string[1]) {
var params = query_string[1].split("&");
var param_item = params[0].split("=");
param_item[param_item[0]] = unescape(param_item[1]);
document.write(param_item["city"]);
} else {
document.write("24 Hour Glass Replacement");
}
// ]]></script>
It works perfectly fine on the index page. e.g. www.mydomain.com.au/?city=test
but when I am using the same code on other pages e.g. http://www.mydomain.com.au/Brisbane.html/?city=test I get a 404 error.
Appreciate any help

Remove the / before starting querystring. So,
try http://www.mydomain.com.au/Brisbane.html?city=test instead of http://www.mydomain.com.au/Brisbane.html/?city=test