Spring AutoPopulatingList と JQuery を使用して動的フォームを作成しました。追加は魔法のように機能し、新しいアイテムが作成されてデータベースに保持されます。問題は削除にあります。ブラウザー側の要素の削除に関係なく、更新メソッドは常に完全なリストを取得します。
コントローラの更新方法は簡単です
@RequestMapping(value = "/user/{id}", method = RequestMethod.POST)
@ResponseBody
public String updateUser(@PathVariable("id") int id, @ModelAttribute("user") User user, HttpServletRequest request) {
userService.update(user);
return messageSource.getMessage("user.data_updated", null, request.getLocale());
}
ユーザーPOJOの実装は次のとおりです
@Entity
public class User implements Serializable {
...
@OneToMany(targetEntity = Language.class, fetch = FetchType.EAGER, cascade = CascadeType.ALL)
private List<Language> languages = new AutoPopulatingList(Language.class);
...
}
私のコントローラーに送られるPOSTリクエストは次のようになります(追加、言語2が追加されました):
languages[0].code:pl
languages[0].level:Fluent
languages[1].code:de
languages[1].level:Native
languages[2].code:cc
languages[2].level:Intermediate
および削除 (JQuery .remove()メソッドを使用して言語 1 を削除):
languages[0].code:pl
languages[0].level:Fluent
languages[2].code:cc
languages[2].level:Intermediate
したがって、通信側からは問題ないように見えますが、updateUser メソッドで @ModelAttribute("user") から取得したユーザーには、まだ 3 つの言語要素があり、すべて有効です (null ではありません)。助言がありますか?関連する場合は、Spring 3.1.1 と JQuery 1.7.2 を使用しています。
編集: フィールドを追加/削除するためのクライアント側のコードは次のとおりです。
$.addLanguage = function() {
var newLanguage = $('<input type="text" id="languages' + languagesCounter + '.code" name="languages[' + languagesCounter + '].code" class="langIdentifier"/>' +
'<select id="languages' + languagesCounter + '.level" name="languages[' + languagesCounter + '].level" class="langSelect">' +
'<option value="Basic">Basic</option>' +
'<option value="Intermediate">Intermediate</option>' +
'<option value="Fluent">Fluent</option>' +
'<option value="Native">Native</option>' +
'</select>' +
'<input type="button" id="remove' + languagesCounter + '" onclick="$.removeLanguage(' + languagesCounter + ')"' +
'name="Remove" value="Remove" class="removeButton"/>' +
'<br/>');
languagesCounter++;
newLanguage.insertBefore($("#add"));
}
および削除の場合:
$.removeLanguage = function(languageId) {
var languageField = '#languages' + languageId + '\\.code';
var levelField = '#languages' + languageId + '\\.level';
var removeButton = '#remove' + languageId;
$(languageField).fadeOut(250, function() { $(this).remove(); });
$(levelField).fadeOut(250, function() { $(this).remove(); });
$(removeButton).fadeOut(250, function() { $(this).remove(); });
};