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); 해당 대륙의 국가를 가져올 수 있도록 대륙 옵션에서 선택된 값으로 지정 하시겠습니까? fetch countries querystring에서 대륙 매개 변수가 비어있는 경우가 있습니다. 결과적으로 도시에서도 마찬가지입니다. –
전체 코드를 보는 것이 도움이됩니다. loadContinents가 무엇을하고 있는지 알지 못하는 것을 제외하면 브라우저에 치명적인 문제가되지 않습니다. 전체 코드를 게시하십시오. 제가 살펴 보겠습니다. – AlexC