0

struts 1.3 html タグ ライブラリ タグを使用している単純な jsp コードを作成しました。ボタンのクリックイベントでstrutsアクションクラスへのajax呼び出しを行いたいです。JSPで複数のボタンを使用するため、jQueryは要素のIDまたはタグ名（ここではボタンのID）を必要としますが、タグ名を使用することはできません。しかし、htmlタグライブラリの要素には「id」というプロパティがありません。この問題の解決策を教えてください。 

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>


$(document).ready(function(){
  $("#action").click(function(){
      alert("inside function");
      var dataToBeSent = $("form").serialize();

      $.post("http://localhost:8013/MyProject1/details.do", dataToBeSent, function(data, textStatus) {

              alert(data.income);
              alert(data.taxReturn);
              alert(textStatus);
              $("#income").val(data.income);
              $("#taxReturn").val(data.taxReturn);

        }, "json");

      });

   });


</script>
</head>
<body>

<table>
<tr><td>
<html:form action="details.do">

SSN : <html:text  property="numberSSN" />  <br/>
YEAR : <html:text property="year" /> <br/>
INCOME: <html:text  property="income" value=""/><br/>
TAX: <html:text property="taxReturn" value=""/><br/> <br/>


<html:button  property="action"  >TestClickEvent </html:button>
<html:reset></html:reset>
</html:form>

<div id="details1">
</div>
</td>
</tr? 

</body>
</html>

ここでは、レンダリングされた html コードを追加しています

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>


$(document).ready(function(){
  $("#htmlFindButton").click(function(){
      alert("inside function");
      var dataToBeSent = $("form").serialize();

      $.post("http://localhost:8013/MyProject1/details.do?action=\"find\" ", dataToBeSent, function(data, textStatus) {

              alert(data.income);
              alert(data.taxReturn);
              alert(textStatus);
              $("#income").val(data.income);
              $("#taxReturn").val(data.taxReturn);

        }, "json");

      });

   });


</script>
</head>
<body>

<table>
<tr><td>
<form name="detailsForm" method="post" action="/MyProject1/details.do;jsessionid=A42FCDD6D26ACC6631384375C69D2743">

SSN : <input type="text" name="numberSSN" value="0">  <br/>
YEAR : <input type="text" name="year" value=""> <br/>
INCOME: <input type="text" name="income" value=""><br/>
TAX: <input type="text" name="taxReturn" value=""><br/> <br/>

<span id="htmlFindButton" >
<input type="button" name="action" value="TestClickEvent"> </span>
<input type="reset" value="Reset">
</form>

<div id="details1">
</div>
</td>
</tr>


</table>

<p>
   <a href="/MyProject1/Welcome.do;jsessionid=A42FCDD6D26ACC6631384375C69D2743">Click me to access to JSP Welcome page</a>
</p> 

</body>
</html>

ここでは、完全な (フォームを LookUpDispatchAction に送信しているため、スパンに 2 つのボタンがある) レンダリングされた html コードを追加しています。

4

0 に答える 0