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

我正在开发一个基于Ajax/PHP的表单序列。提交第一个表单，并在成功提交时返回一个使用Ajax，PHP和jQuery的新表单。这第一部分工作正常。新形式在形式上取得成功的部分不适用。将html表添加到由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; 
    } 
}

表功能做工精细，也是如此，其正确装入静态HTML部分。但是，我似乎无法正确地将已生成的表格添加到div，该表格只由加载。将表格数据记录到控制台会告诉我该表格在那里，静态和动态表格数据都在里面。

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

来源

2016-03-10 Lennart Kloppenburg

是否'.find（ “＃表格”）'居然找到DIV？我认为jQuery可能在'.find（）'部分失败 – theblackgigant

由于加载是异步的，所以您需要使用一个回调，一旦加载过程完成后就会运行回调。请参阅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"); 
});

来源

2016-03-10 13:25:05

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

回答

相关问题