Develop Reference

XMLSerializer in IE9 compatability mode not working

I have this code:
....
jQuery(document).ready(function() {
function showResponse(responseText, statusText, xhr, $form) {
var myxml = responseText;
var serializer = new XMLSerializer();
var xmltostring = serializer.serializeToString(myxml);
It works fine in all browsers except IE9 when IE9 is in compatability mode. For reasons we won't go into the client needs to run IE9 in compatability mode so I am trying to find a solution.
The error that is reported is:
'XMLSerializer' is undefined
Does anybody know a way to deal with this? Is there another way to convert the DOM document/object into text like XMLSerializer does?
Thanks.

Since compatibility mode could be emulating IE8 and down behavior it won't work. XMLSerializer works in IE9 and up (standards mode). Another method to turn a DOM object into a string is to use outerHTML.
Example DOM:
var div = document.createElement('div');
div.innerHTML = '<p>testing 123</p>';
Get the string representation:
div.outerHTML
//=> "<div><p>testing 123</p></div>"

Ended up doing something like this which seems to get the job done:
var xmltostring='';
if (typeof window.XMLSerializer !== 'undefined') {
var serializer = new XMLSerializer();
xmltostring = serializer.serializeToString(myxml);
} else {
if(window.ActiveXObject){
xmltostring = myxml.xml;
}
}

TreeWalker in Chrome Extension

I have a Chrome extension that replaces a phone number with an ahref tag. In this ahref tag I want to call a javascript function. To simplify I'm using "javascript:alert('hey')" as the href value. When I execute the below I get "regs is not defined" for the alert function but for the console.log it displays the correct value. I tried to append to an existing questions since it's related but someone deleted it and asked that I post a new question.
Chrome extension, making a link from key words in the body
var re = /(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]??)\s*)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)([2-9]1[02-9]??|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})/
var regs;
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, function(node) {
if((regs = re.exec(node.textContent))) {
// make sure the text nodes parent doesnt have an attribute we add to know its all ready been highlighted
if(!node.parentNode.classList.contains('highlighted_text')) {
var match = document.createElement('A');
match.appendChild(document.createTextNode(regs[0]));
console.log(regs[0]);
match.href = "javascript:alert(regs[0])";
console.log(node.nodeValue);
// add an attribute so we know this element is one we added
// Im using a class so you can target it with css easily
match.classList.add('highlighted_text');
var after = node.splitText(regs.index);
after.nodeValue = after.nodeValue.substring(regs[0].length);
node.parentNode.insertBefore(match, after);
}
}
return NodeFilter.FILTER_SKIP;
}, false);
// Make the walker step through the nodes
walker.nextNode();

I ended up using the onclick but now I'm running into problems using XMLhttpRequest with a different domain than the one its being called from. Origin ... is not allowed by Access-Control-Allow-Origin.
Here's the code I used for the onclick event:
match.setAttribute("onclick", "function make_call(extension, phone) { xmlhttp=new XMLHttpRequest();xmlhttp.open('GET','http://[Domain]/click2call.php?extension='+extension+'&phone='+phone,false); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(null); } ; make_call('210','"+regs[0]+"'); return false; ");
I'm going to see about using addEventListener instead of using the above method.

We got this working using the following code.
match.setAttribute("title", regs[0]);
match.href = "#";
match.addEventListener("click", function(){ make_call('210',this.title); }, false);
We then use an XMLHttpRequest that will pass the extension and phone number to an external script that is responsible for making the call.
The only problem we have now is that it doesn't work with phone numbers found in gmail or google maps.

Under Chrome - Mootools inject fails with null element

I have this weird problem on Chrome - on my page I am injecting elements using Mootools specifically a lightbox that contains a jwplayer video. The problem on chrome is that referring to an element ie. $('grid_01'); returns null the second time I click on it. To get around this I'm trying to test the element is null and re-inject it
var ss = $('holderdiv');
var x = $('mb_inline_0_-1');
if(x == null)
{
var el = new Element("div", {id: "mb_inline_0_-1"});
//if this line below runs without error...
ss.inject(el);
}
//.........why would x2 be null?
var x2 = $('mb_inline_0_-1');
Chrome says its null. Is there something I can do to ensure the DOM is updated ?
Thanks

You mean to use grab, not inject.
ss.grab(el); // Or el.inject(ss);
Your code has ss being injected into el, which is never attached to the DOM.

Injecting a newly created Element is written in the format newElement.inject(existingElement, position);.
So in your case, if you are planning to inject the newly created div (contained in el) into $('holderdiv'), it should be done thusly:
var el = new Element('div', {
. . .
});
el.inject('holderdiv', 'bottom'); // Although 'bottom' is assumed if nothing is passed

Print data instead of alert

I use the javascript to get some data from facebook using javascript sdk:
window.fbAsyncInit = function() {
FB.init({appId: '111164862286924', status: true, cookie: true,
xfbml: true});
/****************************************/
FB.api('/f8', function(response) {
alert(response.company_overview);
});
/****************************************/
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
This code works fine but if I change alert with documen.write to print the data instead of showing it inside the popup window it doesn't seem to work any more. It doesn't print anything. Can anyone please tell what could be the reason?
Thanks in advance

You can't use document.write after the initial parse of the page is complete. Fortunately, though, there's no particular reason to.
If you have an element on the page and you wish to append to it, you can do this:
var parent = document.getElementById('theId');
var p = document.createElement('p');
p.innerHTML = "This is the <em>new content</em>.";
parent.appendChild(p);
Live example (It doesn't have to be an p element, it can be a div or span or anything else that's a valid child of the parent element.)
Note that if you just want to append to the bottom of the document (relatively rare, but hey), you can just use document.body in place of parent:
var p = document.createElement('p');
p.innerHTML = "This is the new content.";
document.body.appendChild(p);
Similarly, if you want to replace the content of an element, just get a reference to it (using getElementById is a convenient way if the element has an ID, but there are other ways) and update it, rather than append to it:
var target = document.getElementById('targetId');
target.innerHTML = "This is the <em>updated content</em>.";
More re document.write: document.write actually writes to the HTML stream being parsed by the HTML parser. Naturally, once the page rendering is complete, there's no longer an HTML stream being parsed. But the DOM methods above are available for manipulating content on the page after the page is rendered.
Off-topic: DOM manipulation and DOM searching (finding elements to update) are both made easier (and in particular made easier cross-browser) if you use a library like jQuery, Prototype, YUI, Closure, or any of several others which will have syntactic sugar and workarounds for browser eccentricities, etc.

If you are looking to just output the value for testing. I recommend Console.JS for IE and Firebug for Firefox. They support a function called console.log() which will trace output to a debugging window.

Accessing an iFrame's dom from a Firefox Extension

I've spent a long time trying different things to get this to work but nothing does and documentation is not helping much.
I'm trying to populate a form inside an iframe that I dynamically inject into a page. To inject that iframe I do:
myObject.iframe = document.createElement("iframe");
myObject.iframe.setAttribute("src", data.url);
myObject.iframe.setAttribute("id","extension-iframe");
myObject.window.document.getElementById('publisher').appendChild(myObject.iframe);
myObject.iframe.addEventListener("load", function(){
myObject.populate(data);
}, false);
which works fine and DOES trigger the populate() method. My problem is getting the document or window objects for that iframe. I've tried all of the following:
myObject.iframe.window
myObject.iframe.document
myObject.iframe.content
but these are all undefined.
I also tried passing the event object to that iframe's load event listener and then doing:
event.originalTarget
But that didn't work either.
I am reading the following documentation:
https://developer.mozilla.org/En/Working_with_windows_in_chrome_code
https://developer.mozilla.org/en/Code_snippets/Interaction_between_privileged_and_non-privileged_pages
But either I'm not understanding it or it's just not properly explained.
Can anyone shed some light?
Thanks!

Have you tried using the contentWindow property?
var doc = iframe.contentWindow.document;

Try myObject.iframe.contentDocument
Something along the lines of this:
// For accessing browser window from sidebar code.
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
var gBrowser = mainWindow.gBrowser;
var iframes = gBrowser.contentDocument.getElementsByTagName("iframe");
for (var i=0; i < iframes.length; i++) {
var check_elem = iframes[i].contentDocument.getElementById('myid');
if (check_elem) {
...;
}
}

I'm passing in the event object and then event.originalTarget (like you mentioned) and it's working fine. Although I had to set useCapture parameter of addEventListener to true in order to get my event called.
So if I understand correctly you need to access document in populate method...
I would pass event.originalTarget as a parameter to your method
or
in load event I would set for example myObject.document property and then use it in populate method.
myObject.iframe.addEventListener("load", function(event){
var doc = event.originalTarget;
myObject.populate(data,doc);
}, false);

I almost had the same problem. Using the following code gets me the iframe (Firebug is used for debugging):
iframes = window.content.document.getElementsByTagName('iframe')
for (var i = 0; i < iframes.length; i++) {
var elmInput = iframes[i];
Firebug.Console.log(elmInput);
}