javascript - Ajax POSTS不更新屏幕内容

Question

因此，我有一个“方案”，由许多包含大量“事件”和“数据”等的“表单”组成。要填充所有这些信息，我需要在页面中运行该信息，以便在页面完成后运行

$(document).ready(function() {
var scenarioID = ${testScenarioInstance.id}
var myData = ${results as JSON}
populateFormData(myData, scenarioID);
});

然后调用下面的函数(第一个调用第二个函数，这样做是因为我遇到了一个问题，因为它是ajax，因此在添加东西之前循环中的变量正在更新，因此所有结果都在最后一个子表中): --

function populateFormData(results, scenarioID) {
    $table = $('#formList')
    for ( var i in results) {
        var formIDX = (results[i]["forms_idx"])
        var formID = (results[i]["form_id"])
        appendSubTable(formIDX, scenarioID, $table, formID);
    }
}
    function appendSubTable(formIDX, scenarioID, $table, formID) {
    var url = "http://localhost:3278/FARTFramework/testScenario/ajaxPopulateSubTables"
    $.post(url, {
        formIDX : formIDX, scenarioID : scenarioID, formID :formID 
    }, function(data) {
        var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
        $subTable.append(data)
    }).fail(function() {
        alert("it failed!")
    });
}

然后，像这样从 Controller 中获取数据。

def ajaxPopulateSubTables(int formIDX, int scenarioID, int formID) {
        def db = new Sql(dataSource)

        String mySQL = "Loads of SQL STUFF"
        def subTableResults = db.rows(mySQL)

        render(template: "subTableEntry", model: [subTableResults:subTableResults, formID:formID, formIDX:formIDX])
    }

并在gsp上触发它:

    <colgroup>
        <col width="150"/>
        <col width="350"/>
        <col width="350"/>
        <col width="350"/>
    </colgroup>
<g:if test="${subTableResults != null && !subTableResults.isEmpty()}">
    <tr>
        <th>eventIDX</th>
        <th>eventID </th>
        <th>objID</th>
        <th>testVal</th>
    </tr>
</g:if>


<g:each in="${subTableResults}" status = "i" var="item">
    <tr id = ${i} class="${((i) % 2) == 0 ? 'even' : 'odd'}" name="main">
        <td>${item.events_idx}</td>
        <td>${item.type}</td>   
        <td>${item.object_description}</td>
        <td><g:textField id = "testData[${formIDX}:${formID}:${i}]" name="testData[${formIDX}:${formID}:${i}]" value="${item.value}" optionKey="id" /></td>
    </tr>
</g:each>

然后将其塞入相关的子表中。

问题是，有时我在加载页面时并未填写所有子表，但是如果我按F5刷新页面，这似乎可以解决问题……尽管并非总是如此，有时我会得到一个不同的部分不刷新:(

我将println放入 Controller 中，以查看是否所有SQL都被触发了，但是它总是返回所有单独形式的SQL字符串……

在 Firebug 中查找所有POST都恢复正常，但是页面没有更新...

关于可能导致这种情况的任何建议或想法，将不胜感激，我不知所措。

我还尝试过更新我的appendSubTable函数，以防万一某件事失败了，但该帖子包含一个失败，但这也没有成功，上面有更新的代码来显示这一点

Answer 1

奇怪的是，我将post函数略微更改为以下内容，将表的查找移动到函数的开头，而不是在post自身内部，这似乎已经解决了问题，尽管为什么我不确定...是否有人可以解释为什么会这样，我很想知道为什么!

function appendSubTable(formIDX, scenarioID, $table, formID) {
    var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
    var url = "http://localhost:3278/FARTFramework/testScenario/ajaxPopulateSubTables"
    $.post(url, {
        formIDX : formIDX, scenarioID : scenarioID, formID :formID 
    }, function(data) {
        $subTable.append(data)
    }).fail(function() {
        alert("fail")
    });
}