webwork / webapps / showcase / src / webapp / ajax / remoteforms / index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="ww" uri="/webwork" %>

<html>
<head>
    <title>Ajax Examples</title>
    <jsp:include page="/ajax/commonInclude.jsp"/>

    <script language="JavaScript" type="text/javascript">
        function doSomething() {
            alert('you can manipulate the form before it gets submitted');
            return true;
        }
    </script>

</head>

<body>


Remote form replacing another div:<br/>

<div id='two' style="border: 1px solid yellow;"><b>initial content</b></div>
<ww:form
        id='theForm2'
        cssStyle="border: 1px solid green;"
        action='/AjaxRemoteForm.action'
        method='post'
        theme="ajax">

    <input type='text' name='data' value='WebWork User'>

    <ww:submit value="GO2" theme="ajax" resultDivId="two"/>

</ww:form>


Remote form replacing the forms content:<br/>
<ww:form
        id='theForm3'
        cssStyle="border: 1px solid green;"
        action='/AjaxRemoteForm.action'
        method='post'
        theme="ajax">

    <input type='text' name='data' value='WebWork User'>

    <ww:submit value="GO3" theme="ajax" resultDivId="theForm3"/>

</ww:form>

Remote form evaluating suplied JS on completion:<br/>
<ww:form
        id='theForm4'
        cssStyle="border: 1px solid green;"
        action='/AjaxRemoteForm.action'
        method='post'
        theme="ajax">

    <input type='text' name='data' value='WebWork User'>

    <ww:submit value="GO4" theme="ajax" onLoadJS="alert('form submitted');"/>

</ww:form>

Remote form replacing the forms content after confirming results:<br/>
<ww:form
        id='theForm5'
        cssStyle="border: 1px solid green;"
        action='/AjaxRemoteForm.action'
        method='post'
        theme="ajax">

    <input type='text' name='data' value='WebWork User'>

    <ww:submit value="GO3" theme="ajax" resultDivId="theForm5" preInvokeJS="confirm('sure?');"/>

</ww:form>

Remote form replacing the forms content after running a function:<br/>
<ww:form
        id='theForm6'
        cssStyle="border: 1px solid green;"
        action='/AjaxRemoteForm.action'
        method='post'
        theme="ajax">

    <input type='text' name='data' value='WebWork User'>

    <ww:submit value="GO3" theme="ajax" resultDivId="theForm6" preInvokeJS="doSomething();"/>

</ww:form>

<ww:include value="../footer.jsp"/>

</body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.