將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加載的內容

回答

相關問題