Question

我仍在尝试掌握jQuery，AJAX和JSON。

在我的应用程序中，我有以下下拉选择菜单：

 <select id="serviceload" name="serviceload"></select>

我自动用另一个功能填充OPTIONS，我觉得这里没有必要显示。只要知道上面的SELECT有1个或更多OPTION值。

接下来是内容部分：

 <div class="row" id="completeProfile">
    // series of DIVS and TABLES
 </div>

最初，内容部分是隐藏的，因此用户只能看到下拉菜单：

 $('#completeProfile').hide();

现在，jQuery：下一段代码就是我在用户从下拉菜单中选择一个选项时使用的代码。每次选择新选择时，查询都会重新运行，并且新内容会显示在屏幕上，除非他们选择空白的选项。

 $('#serviceload').change(function () {
     var page = $('#serviceload').val();
     if (page == "") {
         $('#completeProfile').hide();
     } else {
         $.post('api/profileSearch.php', {
             page: page
         }, function (data) {
             var obj = JSON.parse(data);
             $('#portBody').empty();
             var htmlToInsert = obj.map(function (item) {
                 return '<tr><td>' + item.PORT + '</td><td>' + item.NAME + '</tr>';
             });
             $('#portBody').html(htmlToInsert);
         });

         // I do several more $.post to return data into specific tables
         // Take note of this next $.post

         $.post('api/vesselSearch.php', {
             page: page
         }, function (data) {
             var obj = JSON.parse(data);
             $('#vesselinfo').empty();
             var htmlToInsert = obj.map(function (item) {
                 return '<tr><td><a href="#" class="editVesselLink" data-toggle="modal" data-vessel="' + item.VESSEL_NAME + '">Edit</a></td><td>' + item.VESSEL_NAME + '</td></tr>';
             });
         });

         // after all the queries are ran, and the data is returned, now we show the content
         $('#completeProfile').show();
     }
 });

在上面的vesselInfo部分中，有一个部分可以打印一个可以单击的超链接，它会打开一个模态窗口。这是为了编辑目的。这功能正常。

这就是问题所在。

返回内容部分，还有另一个超链接可打开一个模态窗口以添加新容器。

 <h3>Vessels</h3> / <a href="#" id="vesselInfoLink" data-toggle="modal">Add New</a>

这将打开一个Add New Vessel模式。在该模态中，有一个带有按钮的FORM，其内容如下：

 <button type="button" id="addVesselSubmit">Add</button>

单击此按钮时，会将用户输入的值发送到更新表的PHP脚本。

$('#addVesselSubmit').click(function () {
    var addservice = $('#addservice').val();
    var addvessel = $('#addvessel').val();
    $.post('api/addInfo.php', {
        addservice: addservice,
        addvessel: addvessel
    }, function (data) {
        // here is where my problem lies
        if (data == 0) {
            alert("Vessel was not saved");
        } else {
            alert("Vessel was saved");
            // At this point, I need to rerun the main function above so that it shows the vessel that was added immediately to the content section without a page refresh
        }
    });
});

因此，在上面的代码中，如果新记录已成功保存到表中，则整个内容部分应重新运行而不刷新页面，新记录将自动显示在vesselInfo部分中。

我认为用于显示内容的代码需要转换为可在addVesselSubmit成功时调用的main函数，但我不知道如何继续。

重申我的问题：我需要能够保存新记录，并将新记录打印到页面而不刷新页面。

Answer 1

$.post('api/addInfo.php', {
    addservice: addservice,
    addvessel: addvessel
}, function (data) {
    // here is where my problem lies
    if (data == 0) {
        alert("Vessel was not saved");
    } else {
        alert("Vessel was saved");
        // At this point, I need to rerun the main function above so that it shows the vessel that was added immediately to the content section without a page refresh
        //Trigger a change on element
        $('#serviceload').trigger('change');
       /*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/            
    }
});

完成jQuery AJAX中的另一个函数后重新运行原始函数

1 个答案: