在Wicket中接收jQuery正文更改

Question

我在這裏提到了關於Wicket和jQuery的問題。我得到了Wicket呈現並顯示的WebPage。在這個頁面中，我得到了一個「可拖動」和一個「droppable」組件，用戶應該能夠移動組件。這是通過jQuery實現的。另外，我在WebPage的末尾有一個「保存」按鈕，它應該保存新值（如果有的話），這意味着：新丟棄的項目。但是，如果我點擊「保存」，我沒有看到Wicket內新近丟棄的對象，我仍然只看到從一開始就處於「可丟棄」區域的對象。這裏是一些代碼片段：

HTML：

<div class="container"> 
    <div id="user"> 
     <h1 class="ui-widget-header">Benutzer</h1> 
     <div class="ui-widget-content" id="userList"> 
      <input type="text" placeholder="Benutzername" id="userNameSearch" /> 
      <ul class="list-group"> 
       <li class="list-group-item" wicket:id="userList"><span 
        wicket:id="user" id="user"></span><span style="visibility: hidden;" wicket:id="userId" id="userId"></span></li> 
      </ul> 
     </div> 
    </div> 

    <div id="project"> 
     <h1 class="ui-widget-header">Benutzer im Projekt</h1> 
     <div class="ui-widget-content" id="project"> 
      <ul class="list-group"> 
       <li class="placeholder list-group-item"><span>Benutzer 
         in dieses Feld ziehen.</span></li> 
       <li class="list-group-item" wicket:id="usersInProjectList"><span 
        wicket:id="userInProject"></span><span style="visibility: hidden;" wicket:id="userInProjectId"></span></li> 
      </ul> 
     </div> 
    </div> 
    <button id="save" wicket:id="save">Speichern</button> 
</div> 
<script> 
    $(function() { 
     $("#userList li").draggable({ 
      appendTo : "body", 
      helper : "clone" 
     }); 
     $("#project ul") 
       .droppable(
         { 
          activeClass : "ui-state-default", 
          hoverClass : "ui-state-hover", 
          accept : ":not(.ui-sortable-helper)", 
          drop : function(event, ui) { 
           $(this).find(".placeholder").remove(); 
           var userName = ui.draggable.find("#user").text(); 
           var userId = ui.draggable.find("#userId").text(); 
           $("<li class=\"list-group-item new-project-member\" wicket:id=\"usersInProjectList\"><span wicket:id=\"userInProject\">"+userName+"</span><span style=\"visibility:hidden;\" wicket:id=\"userInProjectId\">"+userId+"</span></li>") 
             .appendTo(this); 
           $(ui.draggable).remove(); 
          } 
         }).sortable({ 
        items : "li:not(.placeholder)", 
        sort : function() { 
         // gets added unintentionally by droppable interacting with sortable 
         // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options 
         $(this).removeClass("ui-state-default"); 
        } 
       }); 

     $('#userNameSearch') 
       .keyup(
         function() { 
          var valThis = $(this).val().toLowerCase(); 
          if (valThis == "") { 
           $('#userList li').show(); 
          } else { 
           $('#userList li') 
             .each(
               function() { 
                var text = $(this) 
                  .text() 
                  .toLowerCase(); 
                (text.indexOf(valThis) >= 0) ? $(
                  this).show() 
                  : $(this) 
                    .hide(); 
               }); 
          } 
          ; 
         }); 
    }); 
</script> 

的Java代碼（檢票）：

ListView userListView = new ListView("userList", finalUserList) { 
     protected void populateItem(ListItem item) { 
      User user = (User) item.getModelObject(); 
      item.add(new Label("user", user.getLastname()+", "+user.getFirstname())); 
      item.add(new Label("userId", user.getId())); 
     } 
    }; 

    ListView usersInProjectListView = new ListView("usersInProjectList", usersInProjectList) { 
     protected void populateItem(ListItem item) { 
      User user = (User) item.getModelObject(); 
      item.add(new Label("userInProject", user.getLastname()+", "+user.getFirstname())); 
      item.add(new Label("userInProjectId", user.getId())); 
     } 
    }; 
    usersInProjectListView.setOutputMarkupId(true); 

    add(new AjaxLink<Void>("save") 
      { 
       @Override 
       public void onClick(AjaxRequestTarget target) 
       { 
        System.out.println(target.getPage().get("usersInProjectList")); 
        //window.close(target); 
       } 
      });  
    add(userListView); 
    add(usersInProjectListView); 

Answer 1

你可以某種方式得到從客戶機到服務器使用Ajax的變化，例如。您可以觸發一個回調函數，可以通過AbstractAjaxBehaviour（詳細信息here）或可能切換到wicket-dnd