For a Google Wave Gadget, is there a defined point at which it's ok to modify UI?

Question

I'd like my gadget to have two different views: One when it's just been added, to let the user enter some information, and, once he's done with that, another which displays some data based on that information.

The earliest point at which I can decide which of those two views I have to display is when I get the state for the first time, i.e. in the state callback. When I change the UI there, however, it does not always show - apparently there are some timing issues involved. Sometimes the UI doesn't show up at all, sometimes it shows up ok, sometimes it shows up in front of the Gadget-loading animation.

Here's a simple test case:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Trivial" height="120">
  <Require feature="wave" />
</ModulePrefs>
<Content type="html">
<![CDATA[
    <script type="text/javascript">
      function createForm () {
        document.write("<div id=\"form\">");
        document.write("Username: <input type=text value=\"whatever\" id=\"user_name\">");
        document.write("<input type=button value=\"Go!\" onClick=\"fetchFromUsername()\"><br>");
        document.write("NSID: <input type=text value=\"287312604@N00\" id=\"user_id\">");
        document.write("<input type=button value=\"Go!\" onClick=\"fetchFromNSID()\"><br>");
        document.write("Number of photos: <input type=text value=\"3\" id=\"per_page\">");
        document.write("</div>");
      }
    </script>
    <script type="text/javascript">
    function stateUpdated () {
      createForm ();
    }

    function init() {
      if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback (stateUpdated);
      }
    }
    gadgets.util.registerOnLoadHandler(init);
    </script>
  ]]>
  </Content>
</Module>

There is no other view. What I'm trying to accomplish with this code is to modify the UI dynamically once the Gadget is loaded. If I can do that, I can make either one or the other view appear. But even this simple test case doesn't work reliably. — Mark Probst, Oct 27 '09 at 07:49
I have developed for Wave yet. The problem could lie in document.write. Can you create your elements via document.createElement("element") then append them to their container? This might fix your timing issues. — David Murdoch, Oct 28 '09 at 14:38

score 0 · Answer 1 · answered Oct 29 '09 at 03:37

<script type="text/javascript">
  function createForm () {
    document.write("<div id=\"form\">");
    document.write("Username: <input type=text value=\"whatever\" id=\"user_name\">");
    document.write("<input type=button value=\"Go!\" onClick=\"fetchFromUsername()\"><br>");
    document.write("NSID: <input type=text value=\"287312604@N00\" id=\"user_id\">");
    document.write("<input type=button value=\"Go!\" onClick=\"fetchFromNSID()\"><br>");
    document.write("Number of photos: <input type=text value=\"3\" id=\"per_page\">");
    document.write("</div>");
  }
</script>

As you can see in http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268 the document,

write: Write a string of text to a document stream opened by open(). Note that the function will produce a document which is not necessarily driven by a DTD and therefore might be produce an invalid result in the context of the document.

So It isn't cool to use such method. I recommend you to use a framework, such as jQuery, which can create and add elements in the DOM-friendly way. It will be a working method.

For a Google Wave Gadget, is there a defined point at which it's ok to modify UI?

1 Answers1