title: Tapestry Prototype selecting element by ID on zone updates
body: <p>I have a zone on my page that contains a select element.</p>
  
  <p>I'm adding an <code>onChange</code> listener on that element via JavaScript (thanks to <a href="http://jsfiddle.net/AnbmU/6/" rel="nofollow">http://jsfiddle.net/AnbmU/6/</a>)</p>
  
  <pre><code>void afterRender() {
      javaScriptSupport.addScript(
          "$('groupSelecter').observe('change', function() {" + 
          "    var width = $(this).getWidth();" + 
          "    var selectBox = $('groupSelecter');" + 
          "    var chosen = selectBox.selectedIndex &gt;= 0 ? selectBox.options[selectBox.selectedIndex].innerHTML : undefined;" + 
          "    $(this).next('.ninja-input')" + 
          "         .toggleClassName('hidden', chosen != 'Create New Group...')" + 
          "         .select();" + 
          "});",
          ""
      );
  }
  </code></pre>
  
  <p>The problem occurs when I trigger a zone refresh, my select changes <code>id</code> to something like this: <code>groupSelecter_846e54edd0b5</code>.</p>
  
  <p>Is there a way to either keep the select's element id constant or to be able to change javascript and select's id on each zone update?</p>
  
  <p>EDIT:
  Another issue I was not aware of before.</p>
  
  <p>Hidden input field is toggled each second change of selected elements, regardless of its contents. For example, if I had <code>GROUP_1</code>, <code>GROUP_2</code>, <code>GROUP_3</code> and <code>Create New Group...</code> and <code>GROUP_1</code> initially selected, and changed to <code>GROUP_2</code>, the input box appears. When I change it to <code>Create New Group...</code>, the input is hidden again. Again, when I change to <code>GROUP_3</code>, the input field appears. Mind you, in JSfiddle, this works just fine. But for some reason, it doesn't work in my Tapestry project.</p>
  
  <p>EDIT2:
  OK, I tried some more fiddling:</p>
  
  <p>Tapestry generated select element with <code>id=groupSelecter_d769af562f89</code>.
  It also generated inserted this JavaScript (on the bottom of HTML):</p>
  
  <pre><code>$$('.groupSelecter').invoke('observe', 'change', function() {
      var width = $(this).getWidth();
      var chosen = $(this).selectedIndex &gt;= 0 ? $(this).options[$(this).selectedIndex].innerHTML : undefined;
      $(this).next('.ninja-input')
          .toggleClassName('ninja-hidden', chosen != 'Create New Group...');
  });
  </code></pre>
  
  <p>I inpected the element in Firefox, navigated to  tags, found the generated code and cut it out. After that, I opened firefox JS console and pasted that same exact code I just cut. And, voila, it works, for some reason. (Class selecting, that is).</p>