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

-1

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) );

      });

  });
jquery
xml
firefox-addon
xul
thunderbird-addon
asked on Stack Overflow Mar 4, 2012 by jmort253 • edited Mar 4, 2012 by jmort253

1 Answer

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 on Stack Overflow Mar 5, 2012 by Wladimir Palant

User contributions licensed under CC BY-SA 3.0