Php 加载具有相互关联下拉列表的要编辑的表单

因此，我的问题是：很容易获得有关某个记录的数据，并以某种形式提供这些数据

问题是：它的一部分是一个位置（大陆、国家、城市），由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;
}

//要加载下拉列表，我使用与下面在编辑案例中显示的类似的ajax代码
函数processRow（命令，id）{
开关（命令）{
案例“删除”：
$（“#deleteId”）.val（id）；
$（'#deleteEventModal'）.reveal（）；
}
打破
案例“编辑”：{
/*获取数据以填写表单*/
$.ajax({
键入：“获取”，
url:“scripts/fetchEventById.php？eventId=“+encodeURIComponent（id），
数据类型：“json”，
成功：功能（响应）{
/*成功发布到服务器端时*/
//此下拉列表加载并设置DB VAL OK
装载大陆（“编辑事件大陆”）；
$（“#editEventContinents”）.val（response.eventData.continentId）；
//从这一刻起，它将停止
//“最后一条指令集”下拉列表具有正确的值，但
//获取该大陆的国家时（下图）
//“大陆”下拉列表值为空，好像什么都没有
//被选中
//但事实是，我目测证实了这一点
//使用上面的val（）进行设置后
loadCountries（“EditEvent大陆”、“editEventCountries”、“editEventCities”）；
$（“#editEventCountries”）.val（response.eventData.countryId）；
装货城市（“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）；
},
错误：函数（jqXHR，textStatus，errorshown）{
/*将错误记录到控制台*/
console.log(
发生以下错误：“+
文本状态，错误抛出
);
}
});
//获取带有表单的覆盖图，以便弹出进行编辑
$（'#editEventModal'）.reveal（）；
}
打破
违约：
//哎呀，出什么事了
打破
}
返回false；
}
//这是load continents函数
函数加载大陆（大陆对象）{
//获取大陆数据
$.ajax({
键入：“获取”，
url:“scripts/fetchcontricons.php”，
数据类型：“json”，
成功：功能（数据）{
/*成功发布到服务器端时*/
//将提取的选项添加到负责保存大陆列表的选择对象
$（obj）.empty（）；//清除当前可用的选择
如果（数据==“”）{
$（大陆OBJ）.append（“未发现大陆”）；
}
否则{
对于（i=0；ifunction processRow(command, id) {
    console.log('Starting the processing of row #' +id);
    switch(command){

        case 'Delete': {    
            $("#deleteId").val(id);
            $('#deleteEventModal').dialog( "open" );
        }
        break;
        case 'Edit': {
            /* Fetch Data to Fill up the form */    

            $.ajax({
                type: "GET",
                url: "stackAjax.php?Action=Event&eventId=" + encodeURIComponent(id),
                dataType: "json",
                success: function(response){
                    $("#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);
                    $("#editEventContinents").val(response.eventData.continentId);

                    /* On Successful Posting to server side */
                    window.currentContinent = response.eventData.continentId;
                    window.currentCountry = response.eventData.countryId;
                    window.currentCity = response.eventData.cityId;

                    var countryObj = $("#editEventCountries"),
                    cityObj = $("#editEventCities");

                    $(countryObj).empty();
                    $(cityObj).empty().append("<option selected value=\"-1\">Please Select Country First</option>");

                    $.ajax({
                        type: "GET",
                        url: "stackAjax.php?Action=Countries&continent=" + encodeURIComponent(window.currentContinent),
                        dataType: "json",
                        success: function(countryData){
                            /* On Successful Posting to server side */

                            // Add fetched options to the select object responsible for holding the countries list
                            if( countryData == "" ){
                                $(countryObj).append("<option value=\"0\">No countries found</option>");
                            }
                            else{
                                for( i = 0; i < countryData.id.length; i++ ){
                                    $(countryObj).append("<option value=\"" + countryData.id[i]  + "\">" + countryData.name[i]  + "</option>");
                                }
                            }

                            $(cityObj).empty();

                            console.log('about to set the country');        
                            $("#editEventCountries").val(response.eventData.countryId);
                            $.ajax({
                                type: "GET",
                                url: "stackAjax.php?Action=Cities&country=" + encodeURIComponent(window.currentCountry),
                                dataType: "json",
                                success: function(cityData){
                                    /* On Successful Posting to server side */

                                    // Add fetched options to the select object responsible for holding the cities list     
                                    if( cityData == "" ){
                                        $(cityObj).append("<option value=\"0\">No cities found</option>");
                                    }
                                    else{
                                        for( i = 0; i < cityData.id.length; i++ ){
                                            $(cityObj).append("<option value=\"" + cityData.id[i]  + "\">" + cityData.name[i]  + "</option>");
                                        }
                                    }

                                console.log('about to set the city');       
                                $("#editEventCities").val(response.eventData.cityId);
                                },
                                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>");
                                }
                            });
                        },
                        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>");

                        }
                    });

                    //console.log('A: Country DB: ' + response.eventData.countryId);
                    //$("#editEventCountries").change();

                    //console.log('A: Selected Country: ' + $("#editEventCountries").val());


                    //console.log('A: Selected City: ' + $("#editEventCities").val());

                    //$('#editEventModal').dialog( "open" );
                },
                error: function(jqXHR, textStatus, errorThrown){            
                    /* log the error to the console */
                    console.log(
                        "The following error occured: " + 
                        textStatus, errorThrown
                    );
                },
                complete: function(){

                }
            });
        }
        break;
        default:
            alert("Don't know what to do but id is "+id);
        break;
    }
    return false;
}

    $("#editEventContinents").change(function(){ // continents on change
    return loadCountries("#editEventContinents", "#editEventCountries", "#editEventCities");
});

$("#editEventCountries").change(function(){ // countries on change
    return loadCities("#editEventCountries", "#editEventCities");
});

 loadContinents("#editEventContinents");
 $("#editEventContinents").val(response.eventData.continentId);