How To Get XUL Element Using jQuery and Print XUL DOM Tree As String?

Question

I'm working on a Mozilla Thunderbird Extension. I've installed the DOM Inspector, Console, and configured my development environment to give me the most information at my fingertips.

To make development easier when working with Overlays, I'd like to get a reference to a XUL element and then display the DOM tree in the log for debugging/development purposes.

In web development, I would simply drop to the browser console and type:

$('#user-menu').html();

and it would print the HTML contents of that element in the console.

However, I haven't found a method for doing this with XML/XUL elements. Basically, I'm looking to convert the XML/XUL DOM to a String so I can print it.

I'm not looking to print just the text. There are already answers here on SO that show that. I want to print the structure as well.

For instance, let's say I get the node with the id="attachmentList".

var node = $('#attachmentList');

How do I print the contents so I see:

<hbox id="attachment">
    <description>Test</description>
    <xbox oncommand="do()">Do Something</xbox>
</hbox>

assuming that XML/XUL DOM is inside the element identified by the id="attachmentList"?

UPDATE:

Here is the beautiful error message that I get when I try to use serializeToString. I suspect I may be doing something wrong, but jQuery and XUL are not well documented:

Error: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) 
    [nsIDOMSerializer.serializeToString]
Source file: chrome://demo/content/messageOverlay.js
    Line: 72

In case this helps, here is how I am importing jQuery in Thunderbird:

 window.addEventListener("load", function() {

      // was hoping this would eliminate that security error
      netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

      var demolog = Components.classes["@mozilla.org/consoleservice;1"].
       getService(Components.interfaces.nsIConsoleService);

      demolog.logStringMessage("loading overlay...now load jQuery...");

      // loading jQuery here...
      var jQuery = loadjQuery(window);
      demolog.logStringMessage("loaded jQuery...now set $ alias...");
      var $ = jQuery;
      demolog.logStringMessage("jQuery loaded and configured...");

      // register a click handler. When I click this, it fires.
      document.getElementById("jamesdemo")
          .addEventListener("click", function() {
          demolog.logStringMessage("clicked");

         // http://stackoverflow.com/questions/6507293/convert-xml-to-string-with-jquery
            var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"].
                createInstance(Components.interfaces.nsIDOMSerializer);  
            demolog.logStringMessage( "created XMLSerializer..." );  

// this threw the security error
//                var sXML = oSerializer.serializeToString($('#attachmentView'));  

              // as does this...
              var sXML = oSerializer.serializeToString(
                   document.getElementById('#attachmentView'));  

              // doesn't get this far at all
              demolog.logStringMessage("XML = " + sXML);  

              // when this was in scope, it threw the same error.
              demolog.logStringMessage( (new XMLSerializer()).serializeToString($('#attachmentView').get(0).childNodes));  


            demolog.logStringMessage( "attachmentView = " + $('#attachmentView').get(0).childNodes );

          // This prints Object [XULElement], but of course cannot be serialized.
          demolog.logStringMessage( "attachmentitem" + $('#attachmentitem').get(0) );

      });

  });

https://developer.mozilla.org/en/Parsing_and_serializing_XML — linguini, Mar 04 '12 at 06:08
@Karthik - Updated my answer. The functions throw security errors. — jamesmortensen, Mar 04 '12 at 06:45
I guess, you've passed something null to something that does not expect a null value. — linguini, Mar 04 '12 at 07:30
I thought that too. However `(Object [XULElement])` is hardly a null value. Unless that's just a wrapper for a null object. lol. It does give me something to think about... — jamesmortensen, Mar 04 '12 at 07:32

score 1 · Answer 1 · answered Mar 05 '12 at 11:52

1

You should use XMLSerializer (which is the same as nsIDOMSerializer but easier to access). You have to consider that it expects DOM nodes and not jQuery objects. This should work:

var element = document.getElementById("attachmentView");
var sXML = new XMLSerializer().serializeToString(element);

If you really want to use jQuery, this approach of getting the element should work as well:

var element = $("#attachmentView")[0];

answered Mar 05 '12 at 11:52

Wladimir Palant

56,865
12
98
126

Sorry, I should have pointed out that I get the same error with that one too. – jamesmortensen Mar 05 '12 at 16:46
Well, I don't - if I pass a the proper DOM node. – Wladimir Palant Mar 05 '12 at 18:53
And you're working with XUL in Mozilla Thunderbird? Just to clarify? Hmmm... good point on it requiring DOM nodes and not jQuery objects. I will take a second look at that as I may have missed that. – jamesmortensen Mar 05 '12 at 19:13
@jmort253: I tested in Firefox but if you insist on Thunderbird - I just typed in `new XMLSerializer().serializeToString(top.document.documentElement)` in the Thunderbird's Error Console and it worked just fine. – Wladimir Palant Mar 05 '12 at 21:06

How To Get XUL Element Using jQuery and Print XUL DOM Tree As String?

1 Answers1