HTMLにダイアログがあります。一部の入力要素は、シーケンス番号を追加することにより、一意のIDで生成されます。ユーザーが「Bookit！」ボタンをクリックすると、ボタン関数は、each（）を使用して同じクラスを持つすべての入力を繰り返します。このようにして、各入力のIDを取得し、ajaxを使用してGET呼び出しを行うことができます。ボタンは最初は正しく機能しますが、その後は毎回シーケンス番号の入力が増えます。動的に生成されない入力は乗算されません。each（）を使用することで、一意の要素が新たに作成されているようです。
[Book it！]ボタンを最初にクリックすると、URLは次のように正しく作成されます。AddParty?pMemberId=0&pReservationType_0=34&pReservationType_1=63
ただし、その後のクリックにより、次のように長さが長くなります。 AddParty?pMemberId=0&pReservationType_0=34&pReservationType_1=63&pReservationType_0=34&pReservationType_1=63
これが、サーブレットから返されるHTMLファイルのダイアログコードです。
<div class="reservation">
<div id="dialog-reservation-form" title="Reservation Form">
<input id="pMemberId" name="pMemberId" type="hidden" value="0"/>
<input id="pReservationType_0" class="PartyType" type="hidden" value="0"/>
<input id="pReservationType_1" class="PartyType" type="hidden" value="1"/>
</div>
<input id="plan-party" type="submit" value="Plan Party"/>
</div>
これが私のjavascriptファイルです。
$(document).ready(function () {
$("#plan-party").button().click(function (e) {
e.preventDefault();
$("#dialog-party-form").dialog("open");
});
$("#dialog-party-form").dialog( {
autoOpen : false, height : 600, width : 700, modal : true, buttons : {
"Book it!" : function () {
try {
var memberIdValue = document.getElementById("pMemberId").value;
var url = "AddParty?pMemberId=" + memberIdValue;
$(".PartyType").each(function () {
var reservationTypeIdName = $(this).attr('id');
var reservationTypeIdValue = $(this).attr('value');
url = url + "&" + reservationTypeIdName + "=" + reservationTypeIdValue;
});
var ajax = new AJAXInteraction(url, addHuntCallback);
ajax.doGet();
}
catch (e) {
alert(e.description);
}
$(this).dialog("close");
},
Cancel : function () {
$(this).dialog("close");
}
}
});
});