我继承了一些不太工作的代码......
我有一个布局对话框的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>