firefox addon - text result -> xml

Question

I'm developing a firefox add-on. Currently, once it has gathered the necessary information and done some regex magic in the back, the addon spits everything out html formatted in another panel. Below is the code that formats/parses the gathered regex data:

self.on("message", function onMessage(storedHistories) {
var historyList = $('#history-list');
historyList.empty();
storedHistories.forEach(
function(storedHistory) {
    var historyHtml = $('#template .history-details').clone();    
    historyHtml.find('.generator-text').text(storedHistory.generatorText);
    historyHtml.find('.selection-parent-text').html(storedHistory.anchorpText);
    historyList.append(historyHtml);
  });
 });

The html file that it binds the above results to looks like this:

 <div id="template">
   <div class="history-details">
     <div class="generator-text"></div>
     <div class="selection-parent-text"></div>    
   </div>
 </div>

Is there a way to take the text from the js, and output it as XML? I need it to show the proper XML containers and when its formatted in HTML, the containers just disappear (I'm assuming they're considered HTML tags). This might be a really dumb question, but I'm a real noob at all of this and have barely any experience with XML/js. I did read somewhere that one could use a XMLhttpRequest to do this, however I have no idea where to start and how to go about this.

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

You are correct in assuming that the browser will consider an XML tag an element and just display the contents of the tag. To have the browser display the tags as well, you need to encode the XML as HTML (e.g., < becomes <). The easiest way I can think of to do this, since you're already using jQuery (and assuming storedHistory.generatorText and storedHistory.anchorpText are XML strings), is to change these two lines:

historyHtml.find('.generator-text').text(storedHistory.generatorText);
historyHtml.find('.selection-parent-text').html(storedHistory.anchorpText);

to:

historyHtml.find('.generator-text').text($('<div />').text(storedHistory.generatorText).html());
historyHtml.find('.selection-parent-text').text($('<div />').text(storedHistory.anchorpText).html());

See HTML-encoding lost when attribute read from input field for more details.

Hope this helps.

edited May 23 '17 at 10:34

Community

1
1

answered Feb 01 '12 at 23:58

pete

24,141
4
37
51

`data` is how it will display. Did you want it in a collapsible TreeView? – pete Feb 02 '12 at 00:29
I tried that but I'm getting the same results with your solution as I did if i replaced the .html with .text: `historyHtml.find('.selection-parent-text').text(storedHistory.anchorpText);` It's not formatting the text in XML format. My string looks like this: ` data ` Or atleast above is the result I'm hoping to achieve. The string looks like that just all muddled up `...` you get the idea. – spex2004 Feb 02 '12 at 00:30
Sorry about all this weird comment thing happening. Yeah I wanted it in a collapsible view. Is that possible? – spex2004 Feb 02 '12 at 00:31
Yes, but not easily. I'd recommend looking into a jQuery plugin to do that. Treeview or jsTree, for example. – pete Feb 02 '12 at 00:33
Oh cool. I'll try that out. I come from the Rails world and its really easy to render something in XML with ruby, thought it would be easy in js too haha. – spex2004 Feb 02 '12 at 00:36
Thanks for all your help! I may have to come back for some implementation questions regarding TreeView. Hopefully I can figure it out though. – spex2004 Feb 02 '12 at 00:37

firefox addon - text result -> xml

1 Answers1