Question

我正在研究一种基于Ajax / PHP的表单序列。提交第一个表单，成功提交后，页面将使用Ajax，PHP和jQuery返回一个新表单。第一部分工作正常。形式成功后新形式产生的部分不会。

$('#some_form').submit(function (event) {
    event.preventDefault();
    var form = $(this);
    console.log(form);

    var formdata = {
        'title': form.find('input[name=title]').val(),
        'user': form.find('select').val()
    };

    $.ajax({
        type: 'POST',
        url: "some_url",
        data: formdata,
        dataType: 'json',
        encode: 'true',
        success: function (res) {

            if(res.field_errors) {

                // If there are errors: do stuff
            }
            else {
                //No errors, so successful submission, time to load new form

                var form_div = $("<div>",{"id":"some_div","class":"col-lg-12"});
                var table = fill_table(res.data); 

                var form_content = form_div.load('page_template.html');

                //The line below does not work.
                form_content.find("#table-div").append(table);

                form_div.append(form_content);
                form_div.appendTo("#page-wrapper");
            }
        },
        error: function (jqXHR, errorThrown) {
            console.log('jqXHR:');
            console.log(jqXHR);
            console.log('errorThrown:');
            console.log(errorThrown);
        }
    });
)};

fill_table函数（有点笨拙但它仍在进行中）：

function create_table_row(row_data){
    var tr = $('<tr>');

    var first_td = "<td class='checkbox'><label><input type='checkbox' value="+mi.id+" name='mi[]'/></label></td>";
    var second_td = "<td>"+row_data.title+"</td>";
    var third_td = "<td>"+row_data.description+"</td>";
    var fourth_td = "<td class='file'><a href="+row_data.url+"><i style='vertical-align:middle; line-height:30px;' class='fa fa-1x fa-file-pdf-o'></i></a></td>";

    tr.append(first_td);
    tr.append(second_td);
    tr.append(third_td);
    tr.append(fourth_td);
    return $(tr);
}

function fill_table(data_pool) {
    if(data_pool.length==0){
        return "There is no data available yet.";
    }
    else {
        var table = $("<table>",{"class":"mi-list","id":"mi-table"}).append("<tr><th class='checkbox'><label><input type='checkbox' id='bulk' name='data[]'/> </label></th> <th>Title</th><th>Description</th><th>Date</th><th>File</th></tr>");
        $.each(data_pool, function(index, val){
            table.append(create_table_row(val));
        });
        return table;
    }
}

表函数工作正常，.load()正确加载静态HTML部分也是如此。但是，我似乎无法将生成的表正确添加到div刚刚加载的.load()。将表数据记录到控制台会向我显示该表存在，其中包含静态和动态表数据。

form_content.find("#table-div").append(table);不起作用。 form_content.find("#table-div").html(table);也没有。如何正确地将其附加到新div？

Answer 1

由于 load 是异步的，因此您需要使用一个在加载过程完成后运行的回调。请参阅jQuery.load() documentation。

然后，你的看起来应该是这样的：

form_div.load('page_template.html', function() {
    form_content.find("#table-div").append(table);
    form_div.append(form_content);
    form_div.appendTo("#page-wrapper");
});

将html表添加到jQuery加载的内容中

1 个答案: