title: Receiving jQuery body changes in Wicket
body: <p>I got a question here regarding Wicket and jQuery. I got a WebPage which is rendered and shown by Wicket. Within this page I got one "draggable" and one "droppable" component, in which the user should be able to move components. This is realized via jQuery. Additionally I got a "Save" button at the end of the WebPage, which should save the new values (if there are any), which means: the newly dropped items. But if I click on "Save" I don't see the newly dropped objects within Wicket, I still just see the objects which have been in the "droppable" area from the beginning on. Here some Code snippets:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="user"&gt;
          &lt;h1 class="ui-widget-header"&gt;Benutzer&lt;/h1&gt;
          &lt;div class="ui-widget-content" id="userList"&gt;
              &lt;input type="text" placeholder="Benutzername" id="userNameSearch" /&gt;
              &lt;ul class="list-group"&gt;
                  &lt;li class="list-group-item" wicket:id="userList"&gt;&lt;span
                      wicket:id="user" id="user"&gt;&lt;/span&gt;&lt;span style="visibility: hidden;" wicket:id="userId" id="userId"&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="project"&gt;
          &lt;h1 class="ui-widget-header"&gt;Benutzer im Projekt&lt;/h1&gt;
          &lt;div class="ui-widget-content" id="project"&gt;
              &lt;ul class="list-group"&gt;
                  &lt;li class="placeholder list-group-item"&gt;&lt;span&gt;Benutzer
                          in dieses Feld ziehen.&lt;/span&gt;&lt;/li&gt;
                  &lt;li class="list-group-item" wicket:id="usersInProjectList"&gt;&lt;span
                      wicket:id="userInProject"&gt;&lt;/span&gt;&lt;span style="visibility: hidden;" wicket:id="userInProjectId"&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button id="save" wicket:id="save"&gt;Speichern&lt;/button&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $(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();
                                  $("&lt;li class=\"list-group-item new-project-member\" wicket:id=\"usersInProjectList\"&gt;&lt;span wicket:id=\"userInProject\"&gt;"+userName+"&lt;/span&gt;&lt;span style=\"visibility:hidden;\" wicket:id=\"userInProjectId\"&gt;"+userId+"&lt;/span&gt;&lt;/li&gt;")
                                          .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) &gt;= 0) ? $(
                                                              this).show()
                                                              : $(this)
                                                                      .hide();
                                                  });
                              }
                              ;
                          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Java Code (Wicket):</p>
  
  <pre><code>    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&lt;Void&gt;("save")
              {
                  @Override
                  public void onClick(AjaxRequestTarget target)
                  {
                      System.out.println(target.getPage().get("usersInProjectList"));
                      //window.close(target);
                  }
              });     
      add(userListView);
      add(usersInProjectListView);
  </code></pre>