Stripes et Jquery et Ajax pour les listes déroulantes dynamiques

Question

J'utilise Stripes pour le niveau Web. Je souhaite inclure deux listes déroulantes dans lesquelles la liste des éléments de la deuxième liste déroulante dépend de la valeur choisie dans la première.

Assez simple Ajax vous dites. Je ne peux pas trouver un seul exemple de faire cela. Les exemples sur le site de Stripes sont tous triviaux, comme la mise à jour d'une étiquette. J'ai lu, que le JSON retourné par Stripes est funky & pas facile à gérer pour jQuery. Comment puis je faire ça? Un exemple serait apprécié!

Answer 1

Vous pouvez utiliser Google Gson (https://code.google.com/p/google-gson/) Par exemple:

import com.google.gson.Gson; 

public Resolution autocomplete() { 

    List<String> opts = new ArrayList<String>(); 

    ... 

    String json = new Gson().toJson(opts); 
    return new StreamingResolution("application/json",json); 
} 

Answer 2

La partie javascript (en utilisant jQuery) est assez simple. Vous attachez un gestionnaire de modification au premier <select> et pour chaque modification, faites une demande au serveur pour les données spécifiques à la nouvelle valeur.

La réponse peut être JSON ou html. Ce qui suit suppose serveur renvoie html:

$('#select_1').change(function(){ 
    var data={ select_1_val : $(this).val() }; 
    /* make ajax request and load result into select_2*/ 
    $('#select_2').load('/path/to/server', data);  
}); 

A votre contrôleur de serveur vous traiter une requête GET et extraire la valeur de l'EEG param select_1_val et faire tout ce que la magie arrière est nécessaire pour revenir juste un ensemble de <option> balises

Answer 3

package com.rajamma.dealmeister.domain; 

public class Item 
{ 

int value; 
String label; 

public int getValue() 
{ 
    return value; 
} 

public void setValue(int value) 
{ 
    this.value = value; 
} 

public String getLabel() 
{ 
    return label; 
} 

public void setLabel(String label) 
{ 
    this.label = label; 
} 

public Item(int key, String name) 
{ 
    value = key; 
    label = name; 
} 
} 

Le Bean action

package com.rajamma.dealmeister.web.actions; 

import java.util.ArrayList; 
import java.util.List; 

import net.sourceforge.stripes.action.DefaultHandler; 
import net.sourceforge.stripes.action.ForwardResolution; 
import net.sourceforge.stripes.action.Resolution; 
import net.sourceforge.stripes.action.SessionScope; 
import net.sourceforge.stripes.action.StreamingResolution; 

import com.google.gson.Gson; 
import com.rajamma.dealmeister.domain.Item; 

    @SessionScope 
    public class DropDownActionBean extends AbstractActionBean 
    { 

     List<Item> habitatList = new ArrayList<Item>(); 
     List<Item> animalList = new ArrayList<Item>(); 

     private String selectHabitat = "1"; 
     private String selectAnimal; 

     public DropDownActionBean() 
     { 

      habitatList.add(new Item(1, "Land")); 
      habitatList.add(new Item(2, "Sea")); 
      habitatList.add(new Item(3, "Air")); 

      animalList.add(new Item(1, "please choose Habitat")); 

     } 

     public List<Item> getHabitatList() 
     { 
     return habitatList; 
     } 

      public void setHabitatList(List<Item> habitatList) 
     { 
      this.habitatList = habitatList; 
     } 

     public List<Item> getAnimalList() 
     { 
      return animalList; 
     } 

     public void setAnimalList(List<Item> animalList) 
     { 
      this.animalList = animalList; 
     } 

    public String getSelectHabitat() 
    { 
     return selectHabitat; 
    } 

    public void setSelectHabitat(String selectHabitat) 
    { 
     this.selectHabitat = selectHabitat; 
    } 

    public String getSelectAnimal() 
{ 
    return selectAnimal; 
} 

public void setSelectAnimal(String selectAnimal) 
{ 
    this.selectAnimal = selectAnimal; 
} 

@DefaultHandler 
public Resolution test() 
{ 
    return new ForwardResolution("/WEB-INF/jsp/deal/DropDownTest.jsp"); 
} 

public Resolution populateDropDownList() 
{ 
    if (selectHabitat.equals("1")) // Land 
    { 
     animalList = new ArrayList<Item>(); 
     animalList.add(new Item(1, "Lion")); 
     animalList.add(new Item(2, "Tiger")); 
     animalList.add(new Item(3, "Horse")); 
     animalList.add(new Item(4, "Elephant")); 
    } 
    if (selectHabitat.equals("1")) // Land 
    { 
     animalList = new ArrayList<Item>(); 
     animalList.add(new Item(1, "Lion")); 
     animalList.add(new Item(2, "Tiger")); 
     animalList.add(new Item(3, "Horse")); 
     animalList.add(new Item(4, "Elephant")); 
    } 
    if (selectHabitat.equals("2")) // Sea 
    { 
     animalList = new ArrayList<Item>(); 
     animalList.add(new Item(1, "Whale")); 
     animalList.add(new Item(2, "Shark")); 
     animalList.add(new Item(3, "Dolphin")); 
     animalList.add(new Item(4, "Octopus")); 
    } 
    if (selectHabitat.equals("3")) // Sea 
    { 
     animalList = new ArrayList<Item>(); 
     animalList.add(new Item(1, "Eagle")); 
     animalList.add(new Item(2, "Vulture")); 
     animalList.add(new Item(3, "Swift")); 
     animalList.add(new Item(4, "Crow")); 
    } 
    String json = new Gson().toJson(animalList); 
    return new StreamingResolution("application/json", json); 
} 

    public Resolution submit() 
{ 
    return new ForwardResolution("/WEB-INF/jsp/deal/DropDownTest.jsp"); 
} 

    } 

La page Stripes/JSP

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 

<html> 
<head><title>Simple jsp page</title> 
    <script type="text/javascript" src="../js/jquery-latest.js"></script>  
     <script type="text/javascript"> 

      function invokeForJson(form, event, container) { 

        params = {}; 
        if (event != null) params = event + '&' + $(form).serialize();    
       $.post(form.action, 
        params, 
         function (data) { 
         var listItems = ""; 

         if (data) { 
          for(var i = 0; i < data.length;i++) 
          { 
           listItems+="<option value='" + data[i].value + "'>" + data[i].label + "</option>"; 
         } 
         $(container).html(listItems); 
         } 
        }); 
    } 


     $(function() { 
       $('#dropdown1').change(function() { 
        var selectedValue = $(this).val(); 
       invokeForJson($('form')[0], 'populateDropDownList', '#dropdown2'); 
       });   
     }); 

    </script> 
</head> 
<body> 

<stripes:form beanclass="com.rajamma.dealmeister.web.actions.DropDownActionBean"> 
    <stripes:select id="dropdown1" name="selectHabitat"> 
      <c:forEach var="item" items="${actionBean.habitatList}"> 
       <option value="${item.value}">${item.label}</option> 
     </c:forEach> 
    </stripes:select> 

    <stripes:select name="selectAnimal" id="dropdown2"> 
       <c:forEach var="item" items="${actionBean.animalList}"> 
       <option value="${item.value}">${item.label}</option> 
     </c:forEach> 
    </stripes:select> 

    <stripes:submit name="submit"/> 


</stripes:form> 

</body> 
</html>