1
私の問題は次のとおりです。いくつかのレコードに関するデータを取得してフォームで利用できるようにするのは簡単です。関連するドロップダウンリストを持つ編集するフォームをロードする
問題は：3つの関連するドロップダウンリストで表される場所（大陸、国、都市）です。
私が得るのは、ブラウザが応答を停止することです、私はより良い解決策を考え出すためにいくつかのアイデアが必要です。ここで
はので、多分誰かが私にヒントを与えることができ、それが失速場所に関するコメントとコードのサンプルです：
// To load the drop-down lists I use similar ajax code as the one shown below in the edit case
function processRow(command, id) {
switch(command){
case 'Delete': {
$("#deleteId").val(id);
$('#deleteEventModal').reveal();
}
break;
case 'Edit': {
/* Fetch Data to Fill up the form */
$.ajax({
type: "GET",
url: "scripts/fetchEventById.php?eventId=" + encodeURIComponent(id),
dataType: "json",
success: function(response){
/* On Successful Posting to server side */
// THIS DROP DOWN LOADS AND SETS DB VAL OK
loadContinents("#editEventContinents");
$("#editEventContinents").val(response.eventData.continentId);
// FROM THIS MOMENT ON IT WILL STALL
// last instruction sets continent drop-down with proper value BUT
// when fetching the countries for that continent (below)
// the continent drop-down value comes empty as if nothing
// was selected
// but it was, I visually confirmed that
// after setting it with val() above
loadCountries("#editEventContinents", "#editEventCountries", "#editEventCities");
$("#editEventCountries").val(response.eventData.countryId);
loadCities("#editEventCountries", "#editEventCities");
$("#editEventCities").val(response.eventData.cityId);
$("#editEventStartDate").val(response.eventData.startDate);
$("#editEventEndDate").val(response.eventData.endDate);
$("#editEventUserName").val(response.eventData.userName);
$("#editEventName").val(response.eventData.eventName);
$("#editEventDetails").val(response.eventData.details);
},
error: function(jqXHR, textStatus, errorThrown){
/* log the error to the console */
console.log(
"The following error occured: " +
textStatus, errorThrown
);
}
});
// Get the overlay with the form for editing to pop up
$('#editEventModal').reveal();
}
break;
default:
// oops, something wrong happened
break;
}
return false;
}
// Here is the load continents function
function loadContinents(continentObj) {
// fetch continent data
$.ajax({
type: "GET",
url: "scripts/fetchContinents.php",
dataType: "json",
success: function(data){
/* On Successful Posting to server side */
// Add fetched options to the select object responsible for holding the continents list
$(continentObj).empty(); //clear current available selections
if(data == ""){
$(continentObj).append("<option value=\"\">No continents found</option>");
}
else{
for(i = 0; i < data.id.length; i++){
$(continentObj).append("<option value=\"" + data.id[i] + "\">" + data.name[i] + "</option>");
}
}
},
error: function(jqXHR, textStatus, errorThrown){
/* log the error to the console */
console.log(
"The following error occured: " +
textStatus, errorThrown
);
$(countryObj).append("<option selected value=\"\">Select Continent</option>");
$("#searchEventError").fadeOut(200);
$("#searchEventError").fadeIn(200).html("<div class=\"alert-box error\">Something went wrong with the server request, please try again later</div>");
}
});
return false;
}
// Load Countries
function loadCountries(continentObj, countryObj, cityObj) {
var continentOption = $(continentObj).val();
// clear/reset countries and cities selections
$(countryObj).empty();
$(cityObj).empty().append("<option selected value=\"-1\">Please Select Country First</option>");
$.ajax({
type: "GET",
url: "scripts/fetchCountries.php?continent=" + encodeURIComponent(continentOption),
dataType: "json",
success: function(data){
/* On Successful Posting to server side */
// Add fetched options to the select object responsible for holding the countries list
if(data == ""){
$(countryObj).append("<option value=\"0\">No countries found</option>");
}
else{
for(i = 0; i < data.id.length; i++){
$(countryObj).append("<option value=\"" + data.id[i] + "\">" + data.name[i] + "</option>");
}
}
},
error: function(jqXHR, textStatus, errorThrown){
/* log the error to the console */
console.log(
"The following error occured: " +
textStatus, errorThrown
);
$(countryObj).append("<option selected value=\"-1\">Please Select Continent First</option>");
$("#searchEventError").fadeOut(200);
$("#searchEventError").fadeIn(200).html("<div class=\"alert-box error\">Something went wrong with the server request, please try again later</div>");
}
});
return false;
}
// Load Cities
function loadCities(countryObj, cityObj) {
var countryOption = $(countryObj).val();
// clear/reset cities selections
$(cityObj).empty();
$.ajax({
type: "GET",
url: "scripts/fetchCities.php?country=" + encodeURIComponent(countryOption),
dataType: "json",
success: function(data){
/* On Successful Posting to server side */
// Add fetched options to the select object responsible for holding the cities list
if(data == ""){
$(cityObj).append("<option value=\"0\">No cities found</option>");
}
else{
for(i = 0; i < data.id.length; i++){
$(cityObj).append("<option value=\"" + data.id[i] + "\">" + data.name[i] + "</option>");
}
}
},
error: function(jqXHR, textStatus, errorThrown){
/* log the error to the console */
console.log(
"The following error occured: " +
textStatus, errorThrown
);
$(cityObj).append("<option selected value=\"-1\">Please Select Country First</option>");
$("#searchEventError").fadeOut(200);
$("#searchEventError").fadeIn(200).html("<div class=\"alert-box error\">Something went wrong with the server request, please try again later</div>");
}
});
return false;
}
ブラウザが応答しなくなったとすると、完全にロックされているとは限りませんか？あなたはアドレスバーに入力することはできませんし、別のサイトに行く？それともJavascriptが処理を停止するということですか？ – AlexC
ブラウザがロックされているように見えます。 問題は次のとおりです。なぜ$（ "＃editEventContinents"）がval（continentId）でないのですか？その大陸の国を取得するために大陸のオプションで選択された値に固執しますか？ フェッチの国のクエリー文字列で大陸のパラメータが空になっているということが起こりました（私はその間に見つけました）。結果として同じことが都市に起こります。 –
完全なコードを見ると便利です。 loadContinentsが何をしているのか分からない限り、ブラウザに致命的なものとして私に飛び出すものはありません。完全なコードを投稿してください、私は見てみましょう。 – AlexC