2012-02-27 11 views
7

Yeni bir platform öğrendiğimde, aynı eski sorunu yeniden çözmem gerekiyor gibi görünüyor: Ajax kullanarak başka bir açılır menünün değiştirilmesiyle seçimleri bir açılır aşağıdan güncelleştirin. Bu sefer çerçevesi Wicket'tir.Wicket Ajax bir açılır kapanışı diğerine güncelleştiriyor

Foo ve Bar olarak adlandırdığım iki öğe var ve her Foo'nun Foo'ya dahili bir enum olan bir kategorisi var. Ayrıca, bir FooDAO aşırı yüklenmiş find() yöntemleri vardır: no-arg sürümü, DB'deki tüm Foo'yu veya boş olmayan değerlerde tüm Foo eşleştirme filtresini döndüren Type Foo'nun paramater "filtresini" içeren bir sürümü döndürür.

İstemci, yeni bir Bar oluştururken Foos'u Bar'larla ilişkilendirmeyi, ancak bir tane eklemeden önce Foos'u kategoriye göre filtrelemeyi ister. Bu yüzden her biri bir kategoriye sahip bir avuç Foo'nun var olduğunu varsayalım. Bir kullanıcı, Oluşturma çubuğu sayfasına gider ve yeni bir Foo: Dropdown A eklemek için bölüm kategorileri listeler ve bir kategori seçildiğinde, Dropdown B, bir Ajax güncellemesi aracılığıyla o kategorideki mevcut Foo'nun listesini gösterir. Hiçbir kategori seçili değil, açılan B tüm kullanılabilir Foo'yu göstermelidir.

<form wicket:id="createBarForm"> 
<div> 
    <label>Category</label> 
    <select wicket:id="category"> 
    </select> 
</div> 
<div> 
    <label>Available Foo(s)</label> 
    <select class="xlarge" wicket:id="selectedFoo"> 
    </select> 
</div> 
<button style="float:right;">Add</button> 

<!-- and more Bar related fields --> 
</form> 

(. Düğmesi sonunda kendi kimliği ve davranışı elde edecek, ama şu anda odak listesinde yer alan) İşte

Java geçerli:

Benim HTML biraz şuna benzer (sayfanın yapıcı yönteminde) tarafı:

createBarForm = new Form<Bar>("createBarForm", 
      new CompoundPropertyModel<Bar>()); 

    final List<Foo> availableFoo = fooDao.find(); 

    final FormComponent<Foo> selectedFoo = 
      new DropDownChoice<Foo>("selectedFoo", 
        Model.of(new TechnologyFoo()), availableFoo); 

    Foo.Category categoryStandin = null; 

    final FormComponent<Foo.Category> fooCategory = 
      new DropDownChoice<Foo.Category> 
       ("fooCategory", Model.of(categoryStandin), 
         Arrays.asList(Foo.Category.values())); 

    fooCategory.add(new AjaxFormComponentUpdatingBehavior("onchange") { 
     private static final long serialVersionUID = 1L; 
     @Override 
     protected void onUpdate(AjaxRequestTarget target) { 
      // re-set the form component 
      availableFoo.clear(); 
      ((DropDownChoice<Foo>)selectedFoo).setChoices(availableFoo); 
      createBarForm.remove(selectedFoo); 

      Foo.Category newSelection = 
        fooCategory.getModelObject(); 
      if (newSelection != null) { 
       Foo filter = new Foo(); 
       filter.setCategory(newSelection); 
       availableFoo.addAll(fooDao.find(filter)); 
      } 
      else { 
       availableFoo.addAll(fooDao.find()); 
      } 
      // re-fresh the form component 
      ((DropDownChoice<Foo>)selectedFoo).setChoices(availableFoo); 
      createBarForm.add(selectedFoo); 
     } 
    }); 

    createBarForm.add(fooCategory); 
    createBarForm.add(selectedFoo); 

    // etc..... 

benim logger.debug aramaları gösterilmeyen, ancak onlarla ben newSelection ediliyor göstermek mümkün duyuyorum doğru şekilde yakalandı ve DAO, beklenen Foo listesini döndürüyor. Ayrıca, avaliableFoo Liste gerekli değerleri de içerir. Bununla birlikte, Dropdown B, kategori seçiminin sayısından bağımsız olarak daima Foo'nun tam listesini gösterir.

+1

görünce olduğu gibi

, bu bir dipnot düşmek üzerine: Ben muhtemelen açılan seçim bileşenlerinin ilgili modellerinde seçimi/seçim güncelleme kodunu taşımak ve sadece ediyorum 'onUpdate()' yönteminde target.addComponent() 'çağrısını yapın, kodunuzun okunması ve bakımı çok daha kolay olacaktır. – biziclop

cevap

5

DropDowns'ınızı AjaxRequestTarget uygulamasına eklemeniz veya güncellenmemesi gerekir. Eğer doğru cevabı var olduğu

target.add(selectedFoo); 
+0

Ayrıca "selectedFoo.setOutputMarkupId (true);" eklemek zorundayım, ama çalışıyor gibi görünüyor. – cobaltduck