そのため、私のページに「配送ポイントを追加する」というリンクがあります。これによりダイアログが表示され、ユーザーはいくつかの情報を入力します..ユーザーが「配送ポイントを保存」をクリックすると、ダイアログが閉じ、javascript が画面に新しい行を追加します。
問題は、ユーザーが動的に作成された行のチェックボックスをクリックし、[配送ポイントの削除] をクリックしても、行が削除されないことです。
これは、データベースの更新を行う AJAX 呼び出しが適切な ID で返される前に、新しい行を作成するコードがそうするために発生しています。
そのため、行を作成する前に ID を待機するコードを取得する必要があります。ここスタックでも同様の問題が見られますが、呼び出しの構文が少し異なるため、自分の状況に適用する方法がわかりません。
これは、保存を呼び出して新しい行を作成するダイアログのコードです。
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;
}
前もって感謝します、-ジム
わかりました。最初のいくつかの提案に基づいて、コードを修正し、XmlHttpRequest を自分で操作する代わりに、$.ajax を使用して成功のコールバック メソッドを定義しました。
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>