Dynamically show data in the popup which is determined in onpopupshowing event handler

Question

I am developing a Firefox extension. On one <menupopup>, the onpopupshowing calls a JavaScript function. The JavaScript function extracts a list of names. Now these names have to be displayed in the same popup.

How can I get this? Basically I will need to pass the data (just as we use beans in Java) to the browser from the JavaScript function. The data can change every time the popup is called.

Answer 1

You need to modify the DOM rapresenting your menupopup. For example:

<menulist>
  <menupopup id="myMenuPopup">
    <menuitem id="firstItem" label="Mozilla" value="http://mozilla.org"/>
    <menuitem id="secondItem" label="Slashdot" value="http://slashdot.org"/>
    <menuitem id="thirdItem" label="Sourceforge" value="http://sf.net"/>
  </menupopup>
</menulist>

Now if you want to add another item:

var myMenuPopup = document.getElementById("myMenuPopup");
var newItem = document.createElement("menuitem");
newItem.setAttribute("id", "anotherItem");
myMenuPopup.appendChild(newItem);

If you want to remove an item:

var itemToRemove = myMenuPopup.getElementById("anotherItem");
myMenuPopup.appendChild(itemToRemove);

Here you can find much more:

https://developer.mozilla.org/en/Dynamically_modifying_XUL-based_user_interface

Edit:

I assume thet your function returns an array of names:

var nameLists = yourFunction();

for (var i=0; i<nameList.length; i++){
  var newItem = document.createElement("menuitem");
  newItem.setAttribute("label", nameList[i]);
  newItem.setAttribute("id", "item" + i);
  myMenuPopup.appendChild(newItem);
}

I think is better if you call the function that make items before user click on menupopup, not on the event invocation, because if you have many items it may takes a little to construct the items list.