<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib tagdir="/WEB-INF/tags" prefix="st"%>
<%@taglib uri="/japano" prefix="jpn"%>
<%@taglib uri="/sample" prefix="sample"%>
<st:page title="jspview example" onload="init();">
  <jsp:attribute name="head">
    <style type="text/css">@import url("style.css");
      #dynIndex
      {
      border: 1px dotted black;
      padding: 8px;
      }
    </style>
    <%--
    Import the japano.js library and instantiate the japano js object
    --%>
    <script language="javascript" src="${pageContext.request.contextPath}/japano.js"></script>
    <jpn:javascript>
function addNumber()
{
  // dynamically submit the form with the id "addForm" and feed the result
  // to an inline function
  japano.commit("addForm", function(result)
  {
    // get the current form element from the document
    var e=document.getElementById("addForm");
    // save the current input field value
    var saved=e.number.value;
    // replace the current form with the newly loaded form
    e.parentNode.replaceChild(result,e);
    // restore the saved input field value
    result.number.value=saved;
  });

  // prevent normal submit to take place
  return false;
}

function loadIndex()
{
  // load the part with the id "cpart" from the index.jsp and feed it to to an
  // inline function
  japano.getHTML( japano.convertToURL("index.jsp"), function(result)
  {
    var e=document.getElementById("dynIndex");
    // replace the current div with the newly loaded div which has "cpart" as id
    e.parentNode.replaceChild(result,e);
    // restore the former id.
    result.setAttribute("id", "dynIndex"); 
    } , { ".part" : "cpart"});
}

function clearDiv()
{
  var e=document.getElementById("dynIndex")
  e.innerHTML='<div class="dynIndex">Cleared.</div>';
}

var japano=null;

function init()
{
  // get japano object
  japano=new Japano();

  japano.forSpan("default",
  function(span)
  {
    var e=document.createElement("STRONG");
    span.appendChild(e);
    e.appendChild(document.createTextNode("Default Content with javascript"));

    e=document.createElement("p");
    span.appendChild(e);        
    e.appendChild(document.createTextNode("This content will be dynamically replaced by the button above."));
  });            
}
    </jpn:javascript>
  </jsp:attribute>
  <jsp:body>
    <h3>Form Update Example</h3>
    <sample:add2 id="addForm">    
      Number:&nbsp;${pageContext.session.number}<br>      
      <sample:add2.number/>
      <sample:add2.submit text="Add" onclick="return addNumber();"/>
    </sample:add2>
    <hr>
    <h3>Part Update Example</h3>
    <jpn:button fn="loadIndex">Load Index Content</jpn:button>
    <jpn:button fn="clearDiv">Clear</jpn:button>
    <div id="dynIndex">
      <span class="default"></span>
      <%-- if javascript is not enabled inform the user --%>
      <noscript>
        This example only works with javascript.
      </noscript>
    </div>
    <div class="info">
      These two examples show how one can use japano to implement partial page 
      updates. With partial updates you can update only parts of a document. 
      Japano offers a simple javascript API used in this two examples.
      <p>
      The first example is a form which lets the user enter a number to add to a 
      number stored in the session. If javascript is enabled a javascript submit 
      function is installed which provides the same functionality but only
      updates a part of the document. The form part of the page is committed and 
      reloaded via script without reloading the current HTML document. 
      <p>
      Before you can update a part of a page you have to either enclose it in a
      part tag or by specifying an id for a form action invocation tag. 
      (See <a href="jsupdate.jsp.html">this view</a> and the <a href="index.jsp.html">index page</a> for examples).
      <p>
      In the second example, the content of a div with the id &quot;dynIndex&quot; is dynamically
      replaced.
      <p>
      Two buttons are defined:
      <ul>
        <li>
          One button loads the content part of the index page into the 
          &quot;dynIndex&quot; div.
        </li>
        <li>
          One button that clears the &quot;dynIndex&quot; div
        </li>
      </ul>
      Note that the first example automatically works with and without javascript.
      The second example does not work without javascript in its current form but
      could certainly be enhanced to work without javascript.
      (For example by defining a link inside a noscript tag that links to an 
      appropriate server-side created version of this view.)
      <p>
      Sourcecode:
      <ul>
        <li><a href="jsupdate.jsp.html">Source Code of this view.</a></li>
        <li><a href="index.jsp.html">Source Code of the index page.</a></li>
        <li><a href="japano.js">Source code of the japano javascript library.</a></li>
        <li><a href="org/japanosample/action/AddForm.java.html">Source Code of the add form action.</a></li>
      </ul>        
    </div>    
  </jsp:body>
</st:page>