ドロップダウン リストの昇順/降順オプションで UserNames をフィルター処理したいので、オプション (ASC/DESC) を選択するたびに、ユーザー名がその順序でそれぞれ並べ替えられます。
<script>
/* xmlhttpRequest send HTTP/HTTPS requests directly to a webServer and load the server
response data directly back into the script :) */
var xmlHttp;
function showUser(str){
xmlHttp = GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url = "http://localhost:8080/Shipping_Order/getcustomer_xml.jsp?order="+str;
//force a fresh page to load because it's unique, not a page from the cache.
url = url+"&sid="+Math.random();
//the onreadystatechange event is fired ones the request is sent back
xmlHttp.onreadystatechange = stateChanged;
// sends the request to the server
xmlHttp.open("GET",url,true);
xmlHttp.send();
} // end of showUser()
function stateChanged()
{
if (xmlHttp.readyState==4)
{
var xmlDoc = xmlHttp.responseXML.documentElement;
document.getElementById("username").innerHTML =
xmlDoc.getElementsByTagName("username")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("contact").innerHTML =
xmlDoc.getElementsByTagName("contact")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
} // end catch outer
return xmlHttp;
} // end of GetXmlHttpObject
</script>
HTML コード
<form name="myOrderType" action="myOrderType.action">
<select id="order" onChange="showUser(this.value)">
<option>Select a user name :</option>
<option value="ASC">Ascending</option>
<option value="DESC">Descending</option>
</select>
<%-- <s:select label="Select an Order"
name="order"
headerValue="DESC"
list="#{'1':'ASC', '2':'DESC'}"
/> --%>
</form>
以下はコントローラークラスの orderList です
<s:iterator value="orderList">
<tr>
<td><s:property id="username" value="username"/></td>
<td><s:property id="city" value="city"/></td>
<td><s:property id="contact" value="contact"/></td>
</tr>
</s:iterator>
struts.xml
<action name="listUser" class="com.view.OrderProcessingAction" method="listAllUser">
<result name="success">/adminPanel.jsp</result>
</action>
//View クラス (Action Class) //ASC/DESC 順ですべてのユーザーを一覧表示します
public String listAllUser(){
this.orderList = orderDaoFactory.listUser();
System.out.println("execute called");
return SUCCESS;
}
//コントローラークラス (DAO ファクトリー)
public List<OrderProcessing> listUser() {
HttpServletRequest request = (HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
Session session = HibernateUtil.getSessionFactory().openSession();
List<OrderProcessing> orderList = null;
String order = request.getParameter("order");
try {
orderList =(List<OrderProcessing>) session.createQuery("from OrderProcessing ORDER BY username" +order).list();
} catch (Exception e) {
e.printStackTrace();
}
return orderList;
}
私は今私の解決策を得ました。ありがとう仲間。しかし、そのコードを struts2 にデプロイする問題が発生しました。新しい問題は、「Struts2 を使用したドロップダウン リストの OnChange イベントでのアクションの呼び出し」です。
応答データをスクリプトに直接戻します:)
var xmlHttp;
function showUser(str) {
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Your browser does not support AJAX!");
return;
}
var url = "http://localhost:8080/Shipping_Order/getcustomer_xml.jsp?order="+str;
//force a fresh page to load because it's unique, not a page from the cache.
url = url + "&sid=" + Math.random();
//the onreadystatechange event is fired ones the request is sent back
xmlHttp.onreadystatechange = stateChanged;
// sends the request to the server
xmlHttp.open("GET", url, true);
xmlHttp.send();
}
function stateChanged() {
if (xmlHttp.readyState == 4) {
var xmlDoc = xmlHttp.responseXML.documentElement;
$("#dropdowntable").empty();
for(var i=0;i<xmlDoc.getElementsByTagName("username").length;i++)
{
$("#dropdowntable").append('<tr><td id="username"'+i+'>'+xmlDoc.getElementsByTagName("username")[i].childNodes[0].nodeValue+'</td><td id="city"'+i+'>'+xmlDoc.getElementsByTagName("city")[i].childNodes[0].nodeValue+'</td> <td id="contact"'+i+'>'+xmlDoc.getElementsByTagName("contact")[i].childNodes[0].nodeValue+'</td></tr>');
/* $("#dropdowntable").append('<td id="city"'+i+'>'+xmlDoc.getElementsByTagName("city")[i].childNodes[0].nodeValue+'</td>');
$("#dropdowntable").append('<td id="contact"'+i+'>'+xmlDoc.getElementsByTagName("contact")[i].childNodes[0].nodeValue+'</td></tr>');
*/
}
}
}
function GetXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//getcustomer_xml.jsp
String order = request.getParameter("order");
ResultSet rs = st.executeQuery("select username, contact, city from user ORDER BY username "+order);
while(rs.next())
{
out.println("<user>");
out.println("<username>" +rs.getString(1)+ "</username>");
out.println("<contact>" +rs.getInt(2)+ "</contact>");
out.println("<city>" +rs.getString(3)+ "</city>");
out.println("</user>");
}
rs.close();
st.close();