うまく機能していないコードを継承しました...
ダイアログボックスをレイアウトするjspがあります。
<div class="ShippingPoints">
<div id="dialog-form" title="Shipping Points">
<p class="validateTips">
Please include all vendor ship points by product group. If vendor
ships all products from one location input City, State, Zip Code
then select "All" for product group.
</p>
<fieldset>
<label font-family="Courier New" align="left" for="city">City</label>
<input maxlength=50 align="right" type="text" name="city" id="city"
class="text ui-corner-all" />
<br />
<label font-family="Courier New" align="left" for="state">State</label>
<select maxlength=6 align="right" name="state" id="state"
class="text ui-corner-all">
<c:forEach items="${states}" var="state">
<option value="${state.fieldValue}">
${state.fieldDescription}
</option>
</c:forEach>
</select>
<br />
<label font-family="Courier New" align="left" for="stateOther">State (Other):</label>
<input maxlength=6 align="right" type="text" name="stateOther" id="stateOther" value=""
class="text ui-corner-all" />
<br />
<label font-family="Courier New" align="left" for="zip">Zip</label>
<input align="right" maxlength=10 align="right" type="text" name="zip" id="zip" value=""
class="text ui-corner-all" />
<br />
<label font-family="Courier New" align="left" align="left" for="product">Product</label>
<input align="right" maxlength=50 type="text" name="product" id="product" value=""
class="text ui-corner-all" />
<br />
</fieldset>
</div>
このページには、ダイアログを開くリンクと、削除を呼び出すリンクがあります。
<table id="shipPoints" class="ui-widget" width="697">
<tr width="695">
<td width="395"><a href="#" id="add-shipping-point"> Add Shipping Point </a></td>
<td width="300">Click <img src="<%= request.getContextPath() %>/images/delete.gif" onclick="deleteShippingPoints('shipPoints')" /> to remove checked shipping points</td>
</tr>
</table>
これはこのjquery関数を呼び出します
$j("#add-shipping-point").click(function() {
$j("#dialog-form").dialog("open");
return false;
});
ダイアログの完全なコードは次のとおりです
$j(function() {
$j("#dialog:ui-dialog").dialog("destroy");
var city = $j("#city"), state = $j("#state"), zip = $j("#zip"), product = $j("#product"), allFields = $j(
[]).add(city).add(state).add(zip).add(product), tips = $j(".validateTips");
function updateTips(t) {
tips.text(t).addClass("ui-state-highlight");
setTimeout( function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " + min + " and "
+ max + ".");
return false;
} else {
return true;
}
}
function checkRequired(o, n) {
if (o.val().length == 0) {
o.addClass("ui-state-error");
updateTips(n + " is a required field.");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips("Zip Code is not in proper format.");
return false;
} else {
return true;
}
}
$j("#dialog-form")
.dialog(
{
autoOpen : false,
height : 500,
width : 500,
modal : true,
buttons : {
"Add Shipping Point" : function() {
var bValid = true;
var cityValid = true;
var stateValid = true;
var zipPresent = true;
var zipValid = true;
updateTips("");
allFields.removeClass("ui-state-error");
cityValid = checkRequired(city, "City");
stateValid = checkRequired(state, "State");
zipPresent = checkRequired(zip, "Zip");
if(zipPresent) { zipValid = checkRegexp(zip, /(^\d{5}$)|(^\d{5}-\d{4}$)/, "Zip Code"); }
bValid = cityValid && stateValid && zipPresent && zipValid;
if (bValid) {
// make Ajax call save the Shipping Point and add to the list
var shipPointId = saveShippingPoint();
// alert(shipPointId);
if (shipPointId == "na") {
alert("There was a problem adding the Shipping Point. Please try again.
If the problem persists please contact support.");
} else {
$j("#shipPoints tr:last").after(
"<tr>"
+ "<td>"
+ city.val()
+ ", "
+ state.val()
+ "</td>"
+ "<td>"
+ "<INPUT type='checkbox' NAME='chk' VALUE='"
+ shipPointId
+ "' />"
+ "</td>"
+ "</tr>");
}
$j(this).dialog("close");
}
},
Cancel : function() {
$j(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$j("#add-shipping-point").click(function() {
$j("#dialog-form").dialog("open");
return false;
});
});
問題は、テーブルに行を動的に追加できることです。その後、チェックボックスをオンにして新しく作成された行を削除しても、削除されません。基本的に、出荷ポイントの削除の呼び出しが空白のIDを渡すためです。
私はそれを読んで、イベントを新しく作成されたロールにバインドするためにデリゲートを使用する必要があることに気付きました。しかし、私が持っているものの構文はネット上にあるものと完全には一致していないようです。そのため、デリゲートをどこに指定するかわかりませんか？
誰かアイデアはありますか？
コードの保存と削除は次のとおりです
<script>
// Ajax call to add the Shipping Point to the Session
function saveShippingPoint() {
var savedId = "";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
savedId = xhr.responseText;
// alert(savedId);
}
};
var url = '<portlet:resourceURL id="saveShippingPoint"/>';
xhr.open("GET", url +
"?city=" + $j( "#city" ).val() +
"&state=" + $j( "#state" ).val() +
"&stateOther=" + $j( "#stateOther" ).val() +
"&zip=" + $j( "#zip" ).val() +
"&product=" + $j( "#product" ).val()
, true);
xhr.send();
// alert(savedId);
return savedId;
}
// A function to delete rows from the Shipping Points table
function deleteShippingPoints(tableID) {
var xhr = new XMLHttpRequest();
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var shippingPointsId = "";
for ( var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[1].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
shippingPointsId = shippingPointsId + chkbox.value + ",";
table.deleteRow(i);
rowCount--;
i--;
}
}
var url = '<portlet:resourceURL id="deleteShippingPoint"/>';
xhr.open("GET", url + "?shippingPointsId=" + shippingPointsId, true);
xhr.send();
}
</script>