Html komponenter onchange JSP - Servlet - Model - DB

Det nemmeste er at bruge et JSP taglib med indbygget AJAX support.

Hvis du bruger JSF saa kan du vaelge og vrage mellem AJAX taglibs.

Men der er ogsaa nogle til ren JSP.

Jeg brugte AjaxTags http://ajaxtags.sourceforge.net/ til et andet spoergasmaal
her paa E.

snippet:

<!-- demo #4 -->
<select id="make4">
    <option value="">Select make</option>
    <option value="Ford">Ford</option>
    <option value="VW">VW</option>
</select>
<div id="modeldiv"></div>
<ajax:htmlContent baseUrl="GetModelHtml" parameters="make={make4}" source="make4" target="modeldiv"/>

package test;

import java.io.*;
import java.util.*;

import javax.servlet.*;
import javax.servlet.http.*;

public class GetModelHtml extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String make = request.getParameter("make");
        List lst = new ArrayList();
        if(make.equals("Ford")) {
            lst.add(new Car("Ford", "Fiesta"));
            lst.add(new Car("Ford", "Focus"));
            lst.add(new Car("Ford", "Mondeo"));
        } else if(make.equals("VW")) {
            lst.add(new Car("VW", "Polo"));
            lst.add(new Car("VW", "Golf"));
            lst.add(new Car("VW", "Passat"));
        }
        request.setAttribute("allmodels", lst);
        getServletConfig().getServletContext().getRequestDispatcher("/show.jsp").forward(request, response);
    }
}

Sorry - forkert kode. Jeg proever igen.

<form>
Make:
<select id="make3">
    <option value="">Select make</option>
    <option value="Ford">Ford</option>
    <option value="VW">VW</option>
</select>
Model:
<select id="model3" disabled="disabled">
    <option value="">Select model</option>
</select>
</form>
<ajax:select baseUrl="GetModelXml" source="make3" target="model3" parameters="make={make3}"/>

package test;

import java.util.*;

import javax.servlet.http.*;

import org.ajaxtags.helpers.*;
import org.ajaxtags.servlets.*;

public class GetModelXml extends BaseAjaxServlet {
    public String getXmlContent(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String make = request.getParameter("make");
        List lst = new ArrayList();
        if(make.equals("Ford")) {
            lst.add(new Car("Ford", "Fiesta"));
            lst.add(new Car("Ford", "Focus"));
            lst.add(new Car("Ford", "Mondeo"));
        } else if(make.equals("VW")) {
            lst.add(new Car("VW", "Polo"));
            lst.add(new Car("VW", "Golf"));
            lst.add(new Car("VW", "Passat"));
        }
        AjaxXmlBuilder bld = new AjaxXmlBuilder();
        bld.addItems(lst, "model", "make");
        return bld.toString();
    }
}

Ok så bliver det vidst nok Ajax..
Men men, nu har jeg lige prøvet at installere AjaxTags den nyeste version 1.4, det virker godt nok med deres eksempel, men kan ikke lave compile selve servleten da den ikke kan finde de mapper som man importerer (org.ajaxtags.helpers.*; import org.ajaxtags.servlets.*;), har endda også lagt dem ind jar filerne ind i java installations mappen hmm...
Ved du hvad der går galt..

Nu ved jeg ikke hvordan du builder, men AjaxTags jar filen skal med i classpath
for build og den skal ogsaa vaere der runtime (for det sidste kan du smide den
i WEB-INF/lib).

Jeg har fået det til at virke kun med version 1.3 desværre, men hvis jeg nu har en combobox hvori alle min grupper skal blive loadet og derved generere en en liste med alle subgroups i en eller anden tabel, listbox..

Når jeg kalder min AjaxServlet så får jeg en liste som her:
----
List<Group> groups = gh.getGroups(req);
AjaxXmlBuilder bld = new AjaxXmlBuilder();
bld.addItems( groups, "groupID", "name" );
----
public class Group
{
  private int groupID;
  private String name;
  private String description;
  private List<SubGroup> subgroups;
----
Istedet for at kalde flere forskellige metoder hvergang for at hente grupperne, subgrupperne, samt navn og beskrivelse, kan jeg ikke bare gøre sådan at jeg bruger selve listen som udgangspunkt, dvs. at når siden loader siden skal grupperne vises i den første combobox, og når jeg har valgt en gruppe, sættes tekstfelter for name, description for gruppen, og en liste med alle subgrupperne bliver vist..

Håber det giver lidt mening :)

Kan man egentlig med ajaxtags difinere flere end to elementer for et xml dokument/parser, altså istedet for at kun have 2 variabler for et objekt f.eks Car, som indeholder make, model.. men istedet have make, model, motor, width, length osv.. og ser derved parse det igennem til noget HTML

re 14:58:56)

Man kan godt lave en hel masse ren client side, men det bliver hurtigt en
masse JavaScript fedteri.

Jeg har faktisk ogsaa et eksempel med det liggende.

<%@ page import="java.sql.*" %>
<html>
<head>
</head>
<body onload="loadbrands();">
<%
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con = DriverManager.getConnection("jdbc:odbc:TestMSAccess");
Statement stmt = con.createStatement();
ResultSet rs1 = stmt.executeQuery("SELECT DISTINCT brand FROM cars");
String brands = "'vælg mærke'";
int nbrands = 0;
while(rs1.next()) {
    brands = brands + ",'" + rs1.getString(1) +"'";
    nbrands++;
}
rs1.close();
ResultSet rs2 = stmt.executeQuery("SELECT brand,model FROM cars");
String[] cars = new String[nbrands];
String lastbrand = "";
int ix = -1;
while(rs2.next()) {
    String col = rs2.getString(1);
    if(!col.equals(lastbrand)) {
        ix++;
        cars[ix] = "'vælg model'";
        lastbrand = col;
    }
    cars[ix] = cars[ix] + ",'" + rs2.getString(2) +"'";
}
rs2.close();
stmt.close();
con.close();
%>
<script type="text/javascript">
var brands = new Array(<%=brands%>);
var models = new Array(
<%
for(int i = 0; i < cars.length; i++) {
%>
                    new Array(<%=cars[i]%>)<%=(i<cars.length-1)?",":""%>
<%
}
%>
                    );
function loadbrands()
{
    for(i=0;i<brands.length;i++) document.car.brand.options[i] = new Option(brands[i],brands[i]);
};
function loadmodels()
{
    var a = models[document.car.brand.selectedIndex-1];
    for(i=0;i<a.length;i++) document.car.model.options[i] = new Option(a[i],a[i]);
}
</script>
<form name="car" method="POST" action="show.jsp">
Mærke:
<select name="brand" onchange="loadmodels();">
</select>
<br/>
Model:
<select name="model">
</select>
<br/>
<input type="SUBMIT" value="Vis"/>
</form>
</body>
</html>

re 19:45:12)

Det er faktisk det som det jeg postede 07:26:42 og 07:27:41 viser !

Jeg er endt ud med at lave mine helt egne ajax implementeringer, da der er endt med at blive en gang komplekst snavs ;) Men du har da prikket lidt huld på bylden, så du fortjener da lige de points.. ;) Så smid lige et svar

ok