std:InnerHTML not working with <span />

General
Santos
2007-12-09
2013-04-25
  • Santos

    Santos - 2007-12-09

    Not sure if this is an issue but anyway I would like to share it with you.

    Scenario: Struts 2/JWP, XHTML page (generated by JSP) containing a span and a button, button has attached ajax:event which updates span contents.

    - snippet of ajax-config.xml:

    <ajaxConfig>
    ...
    <responseHandler type="std:InnerHTML">
        <parameter>pagecomponent</parameter>
    </responseHandler>
    ...
    </ajaxConfig>

    - snippet of JSP generating XHTML:

    ...
    <span id="pagecomponent" />
    ...

    When responseHandler gets executed not only the contents of the span element are updated but also everything below it i.e. the span element and the remaining of the page, starting from where the span element is, are replaced by the new content.

    I figured out that in order for only the contents of the span element to be updated it should be written as

    <span id="pagecomponent"></span>

    instead of the abbreviated form

    <span id="pagecomponent" />.

    This is valid for div components, too.

    sant0s.

     
    • Frank W. Zammetti

      This isn't a problem with APT, it's a fact of life with browsers.  To prove it, try this:

      <html>
        <head>
          <script>
          function test() {
            document.getElementById("testDiv").innerHTML = "hello";
          }
          </script>
        </head>
        <body>
          <div id="testDiv"/>
          Some text
          <input type="button" onclick="test();">
        </body>
      </html>

      Click the button and note that the text, as well as the button, is replaced.  This is the case in both IE and FF.

      If there is some trick that allows you to replace a self-closed <div> or <span>'s content I don't know it.  But, because these tags are meant to contain body content, I'm even a little surprised that <span id="pagecomponent" /> is valid in the first place (I guess there's no way to say body content is REQUIRED, just optional).

      The only suggestion I can think to make is to replace <span id="pagecomponent" /> with <span id="pagecomponent">&nbsp;</span>.  That should resolve your issue and *probably* won't negatively impact your page (it's technically rendered differently, but I presume your page design is done in such a way that it can be tolerated).

       
    • Santos

      Santos - 2007-12-09

      Yep, although <div /> is XHTML valid, from the browser's DOM point of view it is the same as <div> which means a non-empty div element being opened and not being closed until it reaches </body> (1). so the way the DOM is built is not XML aware in the sense that empty elements represented in the abbreviated form are not interpreted as such.

      (1) this can be verified via the alert below showing the DOM for testDiv including both opening and closing div tags for the new inner div t.

      <html>
      <head>
      <script>
      function test() {
      alert(document.getElementById("testDiv").innerHTML);
      document.getElementById("testDiv").innerHTML = "hello";
      }
      </script>
      </head>
      <body>
      <div id="testDiv"/>
      <div id="t"/>
      Some text
      <input type="button" onclick="test();">
      </body>
      </html>

       

Log in to post a comment.

Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:

JavaScript is required for this form.





No, thanks