appending HTML to a variable using jQuery
I am having some trouble appending html onto the end of a table,
here is my code:
$('[data-custom="view_financiers"]').live('click', function(){
var product_id = $(this).closest('tr').attr('data-pid');开发者_StackOverflow中文版
var supplier_id = $(this).closest('table').attr('data-custom');
var parent = $(this).closest('tr');
$(this).hide();
$.getJSON("get.php", {pid:product_id, sid:supplier_id}, function(data){
var size = $(data).size();
if(data == null){
$(parent).after("<table width='70%' align='center'><tr><td colspan='14'><center><h3>Sorry, this supplier does not have the financiers.</h3></center></td></tr></table>");
}else{
var replacingHtml = "<tr colspan='15'><table width='100%' height='350' data-replaced='true' data-rep='"+product_id+"'><tr><th class='system_header'>Financier name</th><th class='system_header'>Address</th><th class='system_header'>Contact number</th><th class='system_header'>Fax number</th><th class='system_header'>Email</th><th class='system_header'>Region</th></tr></table></tr>";
$.each(data, function(i,json){
$(replacingHtml).find("[data-replaced='true']").append("<tr><td colspan='2'>"+json.financier_name+"</td><td colspan='2'>"+json.address+"</td><td colspan='2'>"+json.contact_number+"</td><td colspan='2'>"+json.fax_number+"</td><td colspan='2'>"+json.email+"</td><td colspan='2'>"+json.region+"</td><td class='view_hide' data-custom='view_hide'><u>Hide</u></td></tr>");
});
$(parent).after(replacingHtml);
}
});
});
So basically I am trying to append a tr onto a table element and then add it all after a specified element, but for some reason it is not working, and I am not getting any errors in firebug.
Any idea on what it could be?
Thanx in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-custom="view_financiers"]').live('click', function () {
var product_id = $(this).closest('tr').data('pid');
var supplier_id = $(this).closest('table').data('custom');
var parent = $(this).closest('tr');
$(this).hide();
var data = [{ "financier_name": "financier_name1", "address": "address1", "contact_number": "contact_number1", "fax_number": "fax_number1", "email": "email1", "region": "region1" }, { "financier_name": "financier_name2", "address": "address2", "contact_number": "contact_number2", "fax_number": "fax_number2", "email": "email2", "region": "region2" }, { "financier_name": "financier_name3", "address": "address3", "contact_number": "contact_number3", "fax_number": "fax_number3", "email": "email3", "region": "region3"}];
//$.getJSON("get.php", { pid: product_id, sid: supplier_id }, function (data) {
if (data === null && data.length === 0) {
$(parent).after("<table width='70%' align='center'><tr><td colspan='14'><center><h3>Sorry, this supplier does not have the financiers.</h3></center></td></tr></table>");
} else {
var replacingHtml = [];
replacingHtml.push('<tr colspan="15"><table width="100%" height="350" data-replaced="true" data-rep="" + product_id + ""><tr><th class="system_header">Financier name</th><th class="system_header">Address</th><th class="system_header">Contact number</th><th class="system_header">Fax number</th><th class="system_header">Email</th><th class="system_header">Region</th></tr>');
$.each(data, function (i, entity) {
replacingHtml.push("<tr><td colspan='2'>" + entity.financier_name + "</td><td colspan='2'>" + entity.address + "</td><td colspan='2'>" + entity.contact_number + "</td><td colspan='2'>" + entity.fax_number + "</td><td colspan='2'>" + entity.email + "</td><td colspan='2'>" + entity.region + "</td><td class='view_hide' data-custom='view_hide'><u>Hide</u></td></tr>");
});
replacingHtml.push('</table></tr>');
$(parent).after(replacingHtml.join(''));
}
//});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<table data-custom="2345">
<tr>
<th colspan="15">
Super Market
</th>
</tr>
<tr data-pid="1">
<td colspan="15">
<a data-custom="view_financiers">Testing 1</a>
</td>
</tr>
<tr data-pid="2">
<td colspan="15">
<a data-custom="view_financiers">Testing 2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论