所以我的页面上有一个链接“添加发货点”。这会出现一个对话框，让用户输入一些信息..当用户然后单击“保存运输点”时，对话框关闭，javascript 在屏幕上添加一个新行。
问题是，如果用户随后单击动态创建的行上的复选框并单击“删除发货点”，则该行不会被删除。
发生这种情况是因为创建新行的代码在 AJAX 调用之前执行此操作，该调用执行 db update 返回正确的 id。
所以我需要让代码在创建行之前等待 id。我在 Stack 上看到了类似的问题，但是调用的语法有点不同，所以我不确定如何让它适用于我的情况。
这是调用保存并创建新行的对话中的代码。
if (bValid) {
// make Ajax call save the Shipping Point and add to the list
var shipPointId = saveShippingPoint();
// This alert when active does not have the id.
//alert("Alert3:" + 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().toUpperCase() + ", " + state.val().toUpperCase() + "</td>"
+ "<td>"
+ "<INPUT type='checkbox' NAME='chk' VALUE='"+ shipPointId + "' />"
+ "<INPUT type='hidden' NAME='shipPointId' VALUE='"+ shipPointId + "' />"
+ "</td>"+ "</tr>");
}
$j(this).dialog("close");
}
这是使AJAX调用保存的代码......我在那里放了一个while循环来强制等待，就像临时更改一样，以确认这是问题......它等待的循环，并且该行已正确创建。如果没有该函数，它会立即向调用者返回一个未赋值的 id，并且它不起作用。所以需要知道让它等待的正确方法，这样我才能得到我需要的行为。
// 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;
}
};
var url = '<portlet:resourceURL id="saveShippingPoint"/>';
xhr.open("GET", url +
"?city=" + $j( "#city" ).val().toUpperCase() +
"&state=" + $j( "#state" ).val().toUpperCase() +
"&stateOther=" + $j( "#stateOther" ).val().toUpperCase() +
"&zip=" + $j( "#zip" ).val() +
"&product=" + $j( "#product" ).val().toUpperCase()
, true);
xhr.send();
/* WHile loop just here to test and verify problem */
while(xhr.readyState != 4) /* null statement */ ;
return savedId;
}
在此先感谢，-吉姆
好的，根据前几个建议，我修改了代码，以便我使用 $.ajax 并定义成功回调方法，而不是自己操作 XmlHttpRequest。
作为 jquery 的新手，我在这里显然搞砸了一些语法，因为 Add Shipping Point 按钮没有关闭，也没有添加行......
这是新代码：
$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)
{
saveShippingPoint();
$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;
});
});
</script>
<script>
// Ajax call to add the Shipping Point to the Session
function saveShippingPoint()
{
$.ajax(
{
// This is a portal URL....which in reality has no spaces, it just didn't paste in very nicely
url: "/web/secure/!ut/p /b1/jY7LUoMwGIWfpQ_g5CekGJdRKHek3FrYdCLN0DgUKlBUnl7sxpXo2Z2Z71xQgXIMVAVMASjao6Lho6z4INuG19--0A7xo51uEs1x9Sx- AntNrMAgBMBUZiCfAUUJXd81FaDPAGD7DnYjfa0A4P_l4Rcx- Cu_Q8UNWXpwAxYmAqs9C5TP2P3PVOJjHWxPswjoRAWKUYL2QA7xK30bjsb79bOcQiC0n_pqPMKH46bt4DUvnke7bFKzNGNbFuhGNLHVar6ZL5fvOt3164UKOr5KOKTvFxkU4WtbAa0LXl5Ep4YRR3ySqBzUW8e7DtznBj7Ao0UMN4!/" +
"?city=" + $j( "#city" ).val().toUpperCase() +
"&state=" + $j( "#state" ).val().toUpperCase() +
"&stateOther=" + $j( "#stateOther" ).val().toUpperCase() +
"&zip=" + $j( "#zip" ).val() +
"&product=" + $j( "#product" ).val().toUpperCase() ,
type: 'GET',
cache: false,
timeout: 30000,
success: function(data)
{
$j("#shipPoints tr:last").after(
"<tr>"
+ "<td>"
+ city.val().toUpperCase()
+ ", "
+ state.val().toUpperCase()
+ "</td>"
+ "<td>"
+ "<INPUT type='checkbox' NAME='chk' VALUE='"+ data + "' />"
+ "<INPUT type='hidden' NAME='shipPointId' VALUE='"+ data + "' />"
+ "</td>"
+ "</tr>");
}
});
return;
};
</script>